@hitachivantara/uikit-react-core 5.58.2 → 5.59.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/Accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/Badge/Badge.styles.cjs.map +1 -1
- package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs.map +1 -1
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs +1 -2
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/BaseInput/BaseInput.styles.cjs.map +1 -1
- package/dist/cjs/BaseInput/validations.cjs.map +1 -1
- package/dist/cjs/BaseRadio/BaseRadio.cjs.map +1 -1
- package/dist/cjs/BaseSwitch/BaseSwitch.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/BreadCrumb.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/Page/Page.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/utils.cjs.map +1 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs +13 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs.map +1 -1
- package/dist/cjs/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/Calendar/Calendar.cjs.map +1 -1
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs.map +1 -1
- package/dist/cjs/Card/Media/Media.cjs.map +1 -1
- package/dist/cjs/Carousel/Carousel.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselControls.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselSlide/CarouselSlide.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselThumbnails.cjs.map +1 -1
- package/dist/cjs/Controls/Controls.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs +12 -20
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs +4 -34
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs.map +1 -1
- package/dist/cjs/Dropdown/List/List.cjs.map +1 -1
- package/dist/cjs/DropdownButton/DropdownButton.cjs +57 -0
- package/dist/cjs/DropdownButton/DropdownButton.cjs.map +1 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs +65 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs.map +1 -0
- package/dist/cjs/FileUploader/DropZone/DropZone.cjs.map +1 -1
- package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs.map +1 -1
- package/dist/cjs/Focus/Focus.cjs +1 -3
- package/dist/cjs/Focus/Focus.cjs.map +1 -1
- package/dist/cjs/Forms/Adornment/Adornment.cjs.map +1 -1
- package/dist/cjs/Forms/Suggestions/Suggestions.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/MenuBar/MenuBar.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/Navigation.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/utils/FocusContext.cjs.map +1 -1
- package/dist/cjs/IconButton/IconButton.cjs +2 -1
- package/dist/cjs/IconButton/IconButton.cjs.map +1 -1
- package/dist/cjs/InlineEditor/InlineEditor.cjs.map +1 -1
- package/dist/cjs/Input/Input.cjs +1 -3
- package/dist/cjs/Input/Input.cjs.map +1 -1
- package/dist/cjs/ListContainer/ListContainer.cjs +3 -5
- package/dist/cjs/ListContainer/ListContainer.cjs.map +1 -1
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs +4 -6
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.cjs +24 -11
- package/dist/cjs/MultiButton/MultiButton.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.styles.cjs +56 -326
- package/dist/cjs/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/Pagination/Pagination.styles.cjs.map +1 -1
- package/dist/cjs/Pagination/Select.cjs.map +1 -1
- package/dist/cjs/Radio/Radio.cjs.map +1 -1
- package/dist/cjs/Select/Select.cjs +6 -2
- package/dist/cjs/Select/Select.cjs.map +1 -1
- package/dist/cjs/SelectionList/SelectionList.cjs +4 -6
- package/dist/cjs/SelectionList/SelectionList.cjs.map +1 -1
- package/dist/cjs/Slider/Slider.cjs.map +1 -1
- package/dist/cjs/Slider/Slider.styles.cjs.map +1 -1
- package/dist/cjs/Slider/utils.cjs.map +1 -1
- package/dist/cjs/Snackbar/Snackbar.cjs.map +1 -1
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs +0 -3
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs.map +1 -1
- package/dist/cjs/SnackbarProvider/SnackbarProvider.cjs.map +1 -1
- package/dist/cjs/Stack/Stack.cjs +2 -3
- package/dist/cjs/Stack/Stack.cjs.map +1 -1
- package/dist/cjs/Switch/Switch.cjs.map +1 -1
- package/dist/cjs/Tab/Tab.styles.cjs.map +1 -1
- package/dist/cjs/Table/Table.cjs.map +1 -1
- package/dist/cjs/Table/TableBody/TableBody.cjs.map +1 -1
- package/dist/cjs/Table/TableCell/TableCell.cjs.map +1 -1
- package/dist/cjs/Table/TableCell/TableCell.styles.cjs.map +1 -1
- package/dist/cjs/Table/TableHeader/TableHeader.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useHeaderGroups.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useResizeColumns.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useRowExpand.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useRowSelection.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useSticky.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useTableStyles.cjs.map +1 -1
- package/dist/cjs/Tag/Tag.cjs.map +1 -1
- package/dist/cjs/Tag/Tag.styles.cjs.map +1 -1
- package/dist/cjs/TagsInput/TagsInput.cjs.map +1 -1
- package/dist/cjs/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs.map +1 -1
- package/dist/cjs/TreeView/TreeItem/TreeItem.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/Actions/Action.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/Header/Header.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/VerticalNavigationContext.cjs.map +1 -1
- package/dist/cjs/hooks/useClickOutside.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/esm/Accordion/Accordion.js.map +1 -1
- package/dist/esm/Avatar/Avatar.js.map +1 -1
- package/dist/esm/Badge/Badge.styles.js.map +1 -1
- package/dist/esm/BaseCheckBox/BaseCheckBox.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +2 -2
- package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/BaseInput/validations.js.map +1 -1
- package/dist/esm/BaseRadio/BaseRadio.js.map +1 -1
- package/dist/esm/BaseSwitch/BaseSwitch.js.map +1 -1
- package/dist/esm/BreadCrumb/BreadCrumb.js.map +1 -1
- package/dist/esm/BreadCrumb/Page/Page.js.map +1 -1
- package/dist/esm/BreadCrumb/utils.js.map +1 -1
- package/dist/esm/BulkActions/BulkActions.styles.js +13 -1
- package/dist/esm/BulkActions/BulkActions.styles.js.map +1 -1
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/Calendar/Calendar.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
- package/dist/esm/Card/Media/Media.js.map +1 -1
- package/dist/esm/Carousel/Carousel.js.map +1 -1
- package/dist/esm/Carousel/CarouselControls.js.map +1 -1
- package/dist/esm/Carousel/CarouselSlide/CarouselSlide.js.map +1 -1
- package/dist/esm/Carousel/CarouselThumbnails.js.map +1 -1
- package/dist/esm/Controls/Controls.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.js +12 -20
- package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js +4 -34
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js.map +1 -1
- package/dist/esm/Dropdown/List/List.js.map +1 -1
- package/dist/esm/DropdownButton/DropdownButton.js +58 -0
- package/dist/esm/DropdownButton/DropdownButton.js.map +1 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js +65 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js.map +1 -0
- package/dist/esm/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/FileUploader/DropZone/DropZone.styles.js.map +1 -1
- package/dist/esm/Focus/Focus.js +2 -2
- package/dist/esm/Focus/Focus.js.map +1 -1
- package/dist/esm/Forms/Adornment/Adornment.js.map +1 -1
- package/dist/esm/Forms/Suggestions/Suggestions.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuBar/MenuBar.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/Header/Navigation/Navigation.js.map +1 -1
- package/dist/esm/Header/Navigation/utils/FocusContext.js.map +1 -1
- package/dist/esm/IconButton/IconButton.js +2 -1
- package/dist/esm/IconButton/IconButton.js.map +1 -1
- package/dist/esm/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/esm/Input/Input.js +2 -2
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/ListContainer/ListContainer.js +4 -4
- package/dist/esm/ListContainer/ListContainer.js.map +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.js +5 -5
- package/dist/esm/ListContainer/ListItem/ListItem.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.js +26 -11
- package/dist/esm/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.styles.js +56 -326
- package/dist/esm/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/Pagination/Pagination.js.map +1 -1
- package/dist/esm/Pagination/Pagination.styles.js.map +1 -1
- package/dist/esm/Pagination/Select.js.map +1 -1
- package/dist/esm/Radio/Radio.js.map +1 -1
- package/dist/esm/Select/Select.js +6 -2
- package/dist/esm/Select/Select.js.map +1 -1
- package/dist/esm/SelectionList/SelectionList.js +5 -5
- package/dist/esm/SelectionList/SelectionList.js.map +1 -1
- package/dist/esm/Slider/Slider.js.map +1 -1
- package/dist/esm/Slider/Slider.styles.js.map +1 -1
- package/dist/esm/Slider/utils.js.map +1 -1
- package/dist/esm/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js +0 -3
- 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.js +3 -3
- package/dist/esm/Stack/Stack.js.map +1 -1
- package/dist/esm/Switch/Switch.js.map +1 -1
- package/dist/esm/Tab/Tab.styles.js.map +1 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Table/TableBody/TableBody.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.styles.js.map +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
- package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
- package/dist/esm/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/esm/Table/hooks/useSticky.js.map +1 -1
- package/dist/esm/Table/hooks/useTableStyles.js.map +1 -1
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/Tag/Tag.styles.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/DefaultContent.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.js.map +1 -1
- package/dist/esm/VerticalNavigation/Actions/Action.js.map +1 -1
- package/dist/esm/VerticalNavigation/Header/Header.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
- package/dist/esm/hooks/useClickOutside.js.map +1 -1
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/types/index.d.ts +247 -258
- package/package.json +5 -5
- package/dist/cjs/Select/SelectButton.cjs +0 -92
- package/dist/cjs/Select/SelectButton.cjs.map +0 -1
- package/dist/esm/Select/SelectButton.js +0 -92
- package/dist/esm/Select/SelectButton.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowSelection.js","sources":["../../../../src/Table/hooks/useRowSelection.tsx"],"sourcesContent":["import { ChangeEvent, useCallback, useMemo } from \"react\";\nimport {\n Hooks,\n IdType,\n PropGetter,\n Row,\n actions,\n ensurePluginOrder,\n useGetLatest,\n useMountedLayoutEffect,\n makePropGetter,\n} from \"react-table\";\n\nimport { useLabels } from \"../../hooks/useLabels\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\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: ChangeEvent, checked?: boolean) => void;\n checked?: boolean;\n disabled?: boolean;\n indeterminate?: boolean;\n}\n\nexport interface UseHvRowSelectionBulkCheckboxProps {\n onChange?: (e: 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\nexport const CellWithCheckBox = ({ row, labels: labelsProp }) => {\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) => {\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, { column }) => {\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, { row }) => {\n const nextProps: UseHvRowSelectionTableRowProps = {\n selected: row.isSelected,\n };\n\n return [props, nextProps];\n};\n\nexport const defaultGetToggleRowSelectedProps = (props, meta) => {\n const { instance, row } = meta;\n const { manualRowSelectedKey = \"isSelected\" } = instance;\n let checked = false;\n\n if (row.original && row.original[manualRowSelectedKey]) {\n checked = true;\n } else {\n checked = row.isSelected;\n }\n\n return [\n props,\n {\n onChange: (e, check) => {\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 = (props, { instance }) => [\n props,\n {\n onChange: (e) => {\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,\n { instance }\n) => [\n props,\n {\n onChange(e) {\n instance.toggleAllPageRowsSelected(e.target.checked);\n },\n checked: instance.isAllPageRowsSelected,\n indeterminate: Boolean(\n !instance.isAllPageRowsSelected &&\n instance.page.some(({ id }) => instance.state.selectedRowIds[id])\n ),\n },\n];\n\nexport function reducer(state, action, previousState, instance) {\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) => {\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) => {\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) => {\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) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n page.forEach((row) => 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) => {\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) => {\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, selectedRowIds, getSubRows) {\n if (selectedRowIds[row.id]) {\n return true;\n }\n\n const subRows = getSubRows(row);\n\n if (subRows && subRows.length) {\n let allChildrenSelected = true;\n let someSelected = false;\n\n subRows.forEach((subRow) => {\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\nexport function useInstance(instance) {\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) => {\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 &&\n page.length &&\n page.some(({ id }) => !selectedRowIds[id])\n );\n\n if (isAllPageRowsSelected) {\n isAllSelectablePageRowsSelected = true;\n\n isAllSelectablePageRowsUnselected =\n existsLockedRows &&\n page &&\n page.length &&\n page.filter(({ id }) => !lockedSelectionRowIds[id]).length === 0;\n\n isNoPageRowsSelected = false;\n } else {\n isAllSelectablePageRowsSelected =\n existsLockedRows &&\n !(\n page &&\n page.length &&\n page\n .filter(({ id }) => !lockedSelectionRowIds[id])\n .some(({ id }) => !selectedRowIds[id])\n );\n\n isAllSelectablePageRowsUnselected =\n !existsLockedRows ||\n !(\n page &&\n page.length &&\n page\n .filter(({ id }) => !lockedSelectionRowIds[id])\n .some(({ id }) => selectedRowIds[id])\n );\n\n isNoPageRowsSelected = !(\n page &&\n page.length &&\n page.some(({ id }) => 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) => dispatch({ type: actions.toggleAllRowsSelected, value }),\n [dispatch]\n );\n\n const toggleAllPageRowsSelected = useCallback(\n (value) => dispatch({ type: actions.toggleAllPageRowsSelected, value }),\n [dispatch]\n );\n\n const toggleRowSelected = useCallback(\n (id, value) => 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, value) =>\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\nexport function prepareRow(row, { instance }) {\n row.toggleRowSelected = (set) => 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) =>\n instance.toggleRowLockedSelection(row.id, set);\n row.isSelectionLocked =\n instance.state?.lockedSelectionRowIds?.[row.id] || false;\n}\n\nconst useRowSelection: 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\nuseRowSelection.pluginName = \"useHvRowSelection\";\n\nexport default useRowSelection;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useRowSelection.js","sources":["../../../../src/Table/hooks/useRowSelection.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n Hooks,\n IdType,\n PropGetter,\n Row,\n actions,\n ensurePluginOrder,\n useGetLatest,\n useMountedLayoutEffect,\n makePropGetter,\n} from \"react-table\";\n\nimport { useLabels } from \"../../hooks/useLabels\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\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\nexport const CellWithCheckBox = ({ row, labels: labelsProp }) => {\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) => {\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, { column }) => {\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, { row }) => {\n const nextProps: UseHvRowSelectionTableRowProps = {\n selected: row.isSelected,\n };\n\n return [props, nextProps];\n};\n\nexport const defaultGetToggleRowSelectedProps = (props, meta) => {\n const { instance, row } = meta;\n const { manualRowSelectedKey = \"isSelected\" } = instance;\n let checked = false;\n\n if (row.original && row.original[manualRowSelectedKey]) {\n checked = true;\n } else {\n checked = row.isSelected;\n }\n\n return [\n props,\n {\n onChange: (e, check) => {\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 = (props, { instance }) => [\n props,\n {\n onChange: (e) => {\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,\n { instance }\n) => [\n props,\n {\n onChange(e) {\n instance.toggleAllPageRowsSelected(e.target.checked);\n },\n checked: instance.isAllPageRowsSelected,\n indeterminate: Boolean(\n !instance.isAllPageRowsSelected &&\n instance.page.some(({ id }) => instance.state.selectedRowIds[id])\n ),\n },\n];\n\nexport function reducer(state, action, previousState, instance) {\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) => {\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) => {\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) => {\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) => {\n handleRowById(subrow.id);\n });\n }\n };\n\n page.forEach((row) => 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) => {\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) => {\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, selectedRowIds, getSubRows) {\n if (selectedRowIds[row.id]) {\n return true;\n }\n\n const subRows = getSubRows(row);\n\n if (subRows && subRows.length) {\n let allChildrenSelected = true;\n let someSelected = false;\n\n subRows.forEach((subRow) => {\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\nexport function useInstance(instance) {\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) => {\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 &&\n page.length &&\n page.some(({ id }) => !selectedRowIds[id])\n );\n\n if (isAllPageRowsSelected) {\n isAllSelectablePageRowsSelected = true;\n\n isAllSelectablePageRowsUnselected =\n existsLockedRows &&\n page &&\n page.length &&\n page.filter(({ id }) => !lockedSelectionRowIds[id]).length === 0;\n\n isNoPageRowsSelected = false;\n } else {\n isAllSelectablePageRowsSelected =\n existsLockedRows &&\n !(\n page &&\n page.length &&\n page\n .filter(({ id }) => !lockedSelectionRowIds[id])\n .some(({ id }) => !selectedRowIds[id])\n );\n\n isAllSelectablePageRowsUnselected =\n !existsLockedRows ||\n !(\n page &&\n page.length &&\n page\n .filter(({ id }) => !lockedSelectionRowIds[id])\n .some(({ id }) => selectedRowIds[id])\n );\n\n isNoPageRowsSelected = !(\n page &&\n page.length &&\n page.some(({ id }) => 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) => dispatch({ type: actions.toggleAllRowsSelected, value }),\n [dispatch]\n );\n\n const toggleAllPageRowsSelected = useCallback(\n (value) => dispatch({ type: actions.toggleAllPageRowsSelected, value }),\n [dispatch]\n );\n\n const toggleRowSelected = useCallback(\n (id, value) => 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, value) =>\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\nexport function prepareRow(row, { instance }) {\n row.toggleRowSelected = (set) => 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) =>\n instance.toggleRowLockedSelection(row.id, set);\n row.isSelectionLocked =\n instance.state?.lockedSelectionRowIds?.[row.id] || false;\n}\n\nconst useRowSelection: 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\nuseRowSelection.pluginName = \"useHvRowSelection\";\n\nexport default useRowSelection;\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSticky.js","sources":["../../../../src/Table/hooks/useSticky.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport {\n makePropGetter,\n useGetLatest,\n Hooks,\n PropGetter,\n TableCommonProps,\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) => /left|right/i.test(value);\n\nconst getStickyValue = ({ sticky, parent }) => {\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) => col.sticky != null)?.sticky;\n if (isSticky(sticky)) {\n return sticky;\n }\n }\n }\n\n return undefined;\n};\n\nconst updateColumnAndParent = (column, props) => {\n Object.assign(column, props);\n\n if (column.parent != null) {\n updateColumnAndParent(column.parent, props);\n }\n};\n\nconst visibleColumnsHook = (columns, { instance }) => {\n const toTheLeft: any[] = [];\n const toTheRight: any[] = [];\n const others: any[] = [];\n\n columns.forEach((column) => {\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, 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) => {\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, isHeaderCell: boolean) => {\n const props: UseHvTableStickyCellProps & { style: 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 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, { instance }) => {\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>\nexport const getTableHeadPropsHook = (props, { instance }) => {\n const nextProps = {\n stickyHeader: instance.stickyHeader,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr>\nexport const getHeaderGroupPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props, { instance, column }) => {\n const nextProps = instance.hasStickyColumns ? getCellProps(column, true) : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props, { instance, cell }) => {\n const nextProps: UseHvTableStickyCellProps = instance.hasStickyColumns\n ? getCellProps(cell.column, false)\n : {};\n\n return [props, nextProps];\n};\n\nconst useSticky: 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\nuseSticky.pluginName = \"useHvTableSticky\";\n\nexport default useSticky;\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSticky.js","sources":["../../../../src/Table/hooks/useSticky.ts"],"sourcesContent":["import {\n makePropGetter,\n useGetLatest,\n Hooks,\n PropGetter,\n TableCommonProps,\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) => /left|right/i.test(value);\n\nconst getStickyValue = ({ sticky, parent }) => {\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) => col.sticky != null)?.sticky;\n if (isSticky(sticky)) {\n return sticky;\n }\n }\n }\n\n return undefined;\n};\n\nconst updateColumnAndParent = (column, props) => {\n Object.assign(column, props);\n\n if (column.parent != null) {\n updateColumnAndParent(column.parent, props);\n }\n};\n\nconst visibleColumnsHook = (columns, { instance }) => {\n const toTheLeft: any[] = [];\n const toTheRight: any[] = [];\n const others: any[] = [];\n\n columns.forEach((column) => {\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, 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) => {\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, 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 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, { instance }) => {\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>\nexport const getTableHeadPropsHook = (props, { instance }) => {\n const nextProps = {\n stickyHeader: instance.stickyHeader,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr>\nexport const getHeaderGroupPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props, { instance, column }) => {\n const nextProps = instance.hasStickyColumns ? getCellProps(column, true) : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props, { instance }) => {\n const nextProps = instance.hasStickyColumns ? getRowProps() : {};\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props, { instance, cell }) => {\n const nextProps: UseHvTableStickyCellProps = instance.hasStickyColumns\n ? getCellProps(cell.column, false)\n : {};\n\n return [props, nextProps];\n};\n\nconst useSticky: 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\nuseSticky.pluginName = \"useHvTableSticky\";\n\nexport default useSticky;\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableStyles.js","sources":["../../../../src/Table/hooks/useTableStyles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useTableStyles.js","sources":["../../../../src/Table/hooks/useTableStyles.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Hooks } from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport type UseHvTableStylesTableOptions = {\n style?: React.CSSProperties;\n className?: string;\n classes?: Record<string, string>;\n component?: any;\n};\n\n// column definition:\nexport interface UseHvTableStylesColumnOptions {\n variant?: \"checkbox\" | \"expand\" | \"actions\" | \"default\" | \"none\";\n align?: \"center\" | \"inherit\" | \"justify\" | \"left\" | \"right\";\n\n style?: React.CSSProperties;\n className?: string;\n classes?: Record<string, string>;\n\n headerStyle?: React.CSSProperties;\n headerClassName?: string;\n headerClasses?: Record<string, string>;\n\n cellStyle?: React.CSSProperties;\n cellClassName?: string;\n cellClasses?: Record<string, string>;\n}\n\n// PROPS:\nexport interface UseHvTableStylesTableRowProps {\n hover?: boolean;\n}\n\nexport interface UseHvTableStylesTableCellProps {\n style?: React.CSSProperties;\n className?: string;\n classes?: Record<string, string>;\n variant?: \"checkbox\" | \"expand\" | \"actions\" | \"default\" | \"none\";\n align?: \"center\" | \"inherit\" | \"justify\" | \"left\" | \"right\";\n}\n\nexport type UseTableStylesProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n// props target: <table>\nconst getTablePropsHook = (props, { instance }) => {\n const nextProps: UseHvTableStylesTableOptions = {\n component: instance.tableComponent,\n };\n\n if (instance.style != null) {\n nextProps.style = instance.style;\n }\n\n if (instance.className != null) {\n nextProps.className = instance.className;\n }\n\n if (instance.classes != null) {\n nextProps.classes = instance.classes;\n }\n\n return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nexport const getHeaderFooterPropsHook = (props, { column }) => {\n const nextProps: UseHvTableStylesColumnOptions = {\n variant: column.variant,\n align: column.align,\n };\n\n if (column.style != null || column.headerStyle != null) {\n nextProps.style = {\n ...props.style,\n ...column.style,\n ...column.headerStyle,\n };\n }\n\n if (column.className != null || column.headerClassName != null) {\n nextProps.className = clsx(\n props.className,\n column.className,\n column.headerClassName\n );\n }\n\n if (column.classes != null || column.headerClasses) {\n nextProps.classes = {\n ...props.classes,\n ...column.classes,\n ...column.headerClasses,\n };\n }\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nconst getRowPropsHook = (props) => {\n const nextProps: UseHvTableStylesTableRowProps = {\n hover: true,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props, { cell }) => {\n const nextProps: UseHvTableStylesTableCellProps = {\n variant: cell.column.variant,\n align: cell.column.align,\n };\n\n if (cell.column.style != null || cell.column.cellStyle != null) {\n nextProps.style = {\n ...props.style,\n ...cell.column.style,\n ...cell.column.cellStyle,\n };\n }\n\n if (cell.column.className != null || cell.column.cellClassName != null) {\n nextProps.className = clsx(\n props.className,\n cell.column.className,\n cell.column.cellClassName\n );\n }\n\n if (cell.column.classes != null || cell.column.cellClasses) {\n nextProps.classes = {\n ...props.classes,\n ...cell.column.classes,\n ...cell.column.cellClasses,\n };\n }\n\n return [props, nextProps];\n};\n\nconst useTableStyles: UseTableStylesProps = (hooks) => {\n // props target: <table>\n hooks.getTableProps.push(getTablePropsHook);\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderFooterPropsHook);\n // props target: <table><tfoot><tr><td>\n hooks.getFooterProps.push(getHeaderFooterPropsHook);\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\nuseTableStyles.pluginName = \"useHvTableStyles\";\n\nexport default useTableStyles;\n"],"names":[],"mappings":";AAkDA,MAAM,oBAAoB,CAAC,OAAO,EAAE,eAAe;AACjD,QAAM,YAA0C;AAAA,IAC9C,WAAW,SAAS;AAAA,EAAA;AAGlB,MAAA,SAAS,SAAS,MAAM;AAC1B,cAAU,QAAQ,SAAS;AAAA,EAC7B;AAEI,MAAA,SAAS,aAAa,MAAM;AAC9B,cAAU,YAAY,SAAS;AAAA,EACjC;AAEI,MAAA,SAAS,WAAW,MAAM;AAC5B,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGO,MAAM,2BAA2B,CAAC,OAAO,EAAE,aAAa;AAC7D,QAAM,YAA2C;AAAA,IAC/C,SAAS,OAAO;AAAA,IAChB,OAAO,OAAO;AAAA,EAAA;AAGhB,MAAI,OAAO,SAAS,QAAQ,OAAO,eAAe,MAAM;AACtD,cAAU,QAAQ;AAAA,MAChB,GAAG,MAAM;AAAA,MACT,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IAAA;AAAA,EAEd;AAEA,MAAI,OAAO,aAAa,QAAQ,OAAO,mBAAmB,MAAM;AAC9D,cAAU,YAAY;AAAA,MACpB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAEA,MAAI,OAAO,WAAW,QAAQ,OAAO,eAAe;AAClD,cAAU,UAAU;AAAA,MAClB,GAAG,MAAM;AAAA,MACT,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IAAA;AAAA,EAEd;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGA,MAAM,kBAAkB,CAAC,UAAU;AACjC,QAAM,YAA2C;AAAA,IAC/C,OAAO;AAAA,EAAA;AAGF,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGA,MAAM,mBAAmB,CAAC,OAAO,EAAE,WAAW;AAC5C,QAAM,YAA4C;AAAA,IAChD,SAAS,KAAK,OAAO;AAAA,IACrB,OAAO,KAAK,OAAO;AAAA,EAAA;AAGrB,MAAI,KAAK,OAAO,SAAS,QAAQ,KAAK,OAAO,aAAa,MAAM;AAC9D,cAAU,QAAQ;AAAA,MAChB,GAAG,MAAM;AAAA,MACT,GAAG,KAAK,OAAO;AAAA,MACf,GAAG,KAAK,OAAO;AAAA,IAAA;AAAA,EAEnB;AAEA,MAAI,KAAK,OAAO,aAAa,QAAQ,KAAK,OAAO,iBAAiB,MAAM;AACtE,cAAU,YAAY;AAAA,MACpB,MAAM;AAAA,MACN,KAAK,OAAO;AAAA,MACZ,KAAK,OAAO;AAAA,IAAA;AAAA,EAEhB;AAEA,MAAI,KAAK,OAAO,WAAW,QAAQ,KAAK,OAAO,aAAa;AAC1D,cAAU,UAAU;AAAA,MAClB,GAAG,MAAM;AAAA,MACT,GAAG,KAAK,OAAO;AAAA,MACf,GAAG,KAAK,OAAO;AAAA,IAAA;AAAA,EAEnB;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEA,MAAM,iBAAsC,CAAC,UAAU;AAE/C,QAAA,cAAc,KAAK,iBAAiB;AAEpC,QAAA,eAAe,KAAK,wBAAwB;AAE5C,QAAA,eAAe,KAAK,wBAAwB;AAE5C,QAAA,YAAY,KAAK,eAAe;AAEhC,QAAA,aAAa,KAAK,gBAAgB;AAC1C;AAEA,eAAe,aAAa;AAE5B,MAAA,mBAAe;"}
|
package/dist/esm/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n Checkbox,\n CheckboxCheck,\n CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\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<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\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 /** Background color to be applied to the tag */\n color?: HvColorAny;\n /** Icon used to customize the delete icon in the Chip element */\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?: (event: React.MouseEvent<HTMLElement>) => void;\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 /** @ignore */\n ref?: MuiChipProps[\"ref\"];\n /** @ignore */\n component?: MuiChipProps[\"component\"];\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\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\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 *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n const {\n classes: classesProp,\n className,\n style,\n label,\n disabled,\n type = \"semantic\",\n selectable,\n selected,\n defaultSelected = false,\n color,\n deleteIcon,\n onDelete,\n onClick,\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 { colors } = useTheme();\n const { classes, cx, css } = useClasses(classesProp);\n\n const [isSelected, setIsSelected] = useControlled(\n selected,\n Boolean(defaultSelected)\n );\n\n const defaultDeleteIcon = (\n <CloseXS\n role=\"none\"\n className={cx(classes.button, classes.tagButton)}\n iconSize=\"XS\"\n {...deleteButtonProps}\n />\n );\n\n const categoricalBackgroundColor =\n type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n const backgroundColor =\n (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n undefined;\n\n const isClickable = !!(onClick || onDelete) && !disabled;\n\n const clickableClass = css({\n \"&:hover\": {\n boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n },\n });\n\n const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n const avatarIcon = isSelected ? (\n <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n ) : (\n <Checkbox color={colorOverride} iconSize=\"XS\" />\n );\n\n return (\n <Chip\n ref={ref}\n label={label}\n disabled={disabled}\n className={cx({ [clickableClass]: isClickable }, className)}\n style={{\n ...(disabled ? null : { backgroundColor }),\n ...style,\n }}\n classes={{\n root: cx(classes.root, classes.chipRoot, {\n [classes.disabled]: disabled,\n [classes.clickable]: isClickable,\n [classes.categorical]: type === \"categorical\",\n [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n }),\n label: classes.label,\n deleteIcon: cx(classes.deleteIcon, {\n [classes.disabledDeleteIcon]: disabled,\n }),\n }}\n deleteIcon={deleteIcon || defaultDeleteIcon}\n onDelete={disabled ? undefined : onDelete}\n onClick={(event) => {\n if (disabled) return;\n if (selectable) setIsSelected(!isSelected);\n onClick?.(event, !isSelected);\n }}\n aria-pressed={isSelected}\n {...(selectable &&\n type === \"semantic\" && {\n avatar: avatarIcon,\n })}\n {...others}\n />\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUO,MAAM,QAAQ,WAAuC,CAAC,OAAO,QAAQ;AACpE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AACd,YAAA;AAAU;AACV,YAAA;AAAY,wBAAc,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n root: {\n color: theme.colors.base_dark,\n\n [`& .${chipClasses.avatar}`]: {\n width: 12,\n height: 12,\n marginLeft: 2,\n marginRight: 0,\n },\n },\n\n chipRoot: {\n [`&.${chipClasses.root}`]: {\n height: 16,\n borderRadius: 0,\n maxWidth: 180,\n fontFamily: theme.fontFamily.body,\n \"&:focus-visible\": {\n backgroundColor: theme.alpha(\"base_light\", 0.3),\n },\n\n \"&$categorical\": {\n borderRadius: 8,\n \"& $label\": {\n color: theme.colors.secondary,\n },\n },\n },\n\n \"&$disabled\": {\n opacity: 1,\n backgroundColor: theme.colors.atmo3,\n \"& $label\": {\n color: theme.colors.secondary_60,\n },\n },\n\n [`& .${chipClasses.label}`]: {\n paddingLeft: 4,\n paddingRight: 4,\n ...(theme.typography.caption2 as React.CSSProperties),\n color: \"currentcolor\",\n },\n\n [`& .${chipClasses.deleteIcon}`]: {\n margin: 0,\n width: 16,\n height: 16,\n padding: 0,\n color: \"currentColor\",\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n color: \"unset\",\n },\n \"&:focus\": {\n ...outlineStyles,\n borderRadius: 0,\n },\n \"&:focus:not(:focus-visible)\": {\n outline: \"0 !important\",\n boxShadow: \"none !important\",\n },\n },\n },\n\n disabled: {},\n\n clickable: {\n cursor: \"pointer\",\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n\n categorical: {},\n\n label: {},\n\n deleteIcon: {},\n\n // TODO: redundant - use deleteIcon. remove in v6\n button: {},\n tagButton: {},\n // TODO: redundant - use $clickable or :not($disabled). remove in v6\n focusVisible: {},\n disabledDeleteIcon: {},\n categoricalFocus: {},\n categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;;;AAQO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAO,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAM,YAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAK,YAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY,MAAM,WAAW;AAAA,MAC7B,mBAAmB;AAAA,QACjB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,CAAC,MAAM,YAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAI,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAM,YAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAG;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EAEA,aAAa,CAAC;AAAA,EAEd,OAAO,CAAC;AAAA,EAER,YAAY,CAAC;AAAA;AAAA,EAGb,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,CAAC;AACxB,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { baseInputClasses } from \"../BaseInput\";\nimport { HvInput } from \"../Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport {\n HvCharCounter,\n HvCharCounterProps,\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvSuggestions,\n HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n extends HvBaseProps<\n HTMLElement,\n \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n > {\n /** The form element name. */\n name?: string;\n /** The value of the form element. */\n value?: string[] | HvTagProps[];\n /** When uncontrolled, defines the initial input value. */\n defaultValue?: string[] | HvTagProps[];\n /**\n * The label of the form element.\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n */\n label?: React.ReactNode;\n /** Provide additional descriptive text for the form element. */\n description?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** Indicates that the form element is not editable. */\n readOnly?: boolean;\n /** Indicates that the form element is required. */\n required?: boolean;\n /** The function that will be executed onChange. */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLElement, MouseEvent>\n | React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps[]\n ) => void;\n /** The function that will be executed when the element is focused. */\n onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /** The function that will be executed when the element is blurred. */\n onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /** The function that will be executed when a tag is deleted. */\n onDelete?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLElement, MouseEvent>\n | React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /** The function that will be executed when a tag is added. */\n onAdd?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLElement, MouseEvent>\n | React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /** The placeholder value of the input. */\n placeholder?: string;\n /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n hideCounter?: boolean;\n /** Text between the current char counter and max value. */\n middleCountLabel?: string;\n /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n maxTagsQuantity?: number;\n /** Attributes applied to the input element. */\n inputProps?: MuiInputBaseComponentProps;\n /** If `true` it should autofocus. */\n autoFocus?: boolean;\n /** If `true` the component is resizable. */\n resizable?: boolean;\n /** Props passed to the HvCharCount component. */\n countCharProps?: Partial<HvCharCounterProps>;\n /** If `true` the component is in multiline mode. */\n multiline?: boolean;\n /** The status of the form element. */\n status?: HvFormStatus;\n /** The error message to show when `status` is \"invalid\". */\n statusMessage?: React.ReactNode;\n /** An Object containing the various texts associated with the input. */\n validationMessages?: HvValidationMessages;\n /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n commitTagOn?: string[];\n /** If `true` the tag will be committed when the blur event occurs. */\n commitOnBlur?: boolean;\n /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n /** The validation function that will be executed when adding tags in the suggestions mode. */\n suggestionValidation?: (value: string) => boolean;\n /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n suggestionsLoose?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLUListElement, HvTagsInputProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue = [],\n readOnly = false,\n disabled = false,\n required = false,\n label: textAreaLabel,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onAdd,\n onDelete,\n onBlur,\n onFocus,\n placeholder,\n hideCounter = false,\n middleCountLabel = \"/\",\n maxTagsQuantity,\n autoFocus = false,\n resizable = true,\n inputProps = {},\n countCharProps = {},\n multiline = false,\n status,\n statusMessage,\n validationMessages,\n commitTagOn = [\"Enter\"],\n commitOnBlur = false,\n suggestionListCallback,\n suggestionValidation,\n suggestionsLoose = false,\n ...others\n } = useDefaultProps(\"HvTagsInput\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const hasLabel = textAreaLabel != null;\n const hasDescription = description != null;\n\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy\n );\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [tagInput, setTagInput] = useState(\"\");\n const [tagCursorPos, setTagCursorPos] = useState(value.length);\n const [stateValid, setStateValid] = useState(true);\n\n const inputRef = useRef<any>();\n const containerRef = useRef<any>();\n const skipReset = useRef(false);\n const blurTimeout = useRef<any>();\n const materialInputRef = useRef<any>(null);\n\n const forkedContainerRef = useForkRef(ref, containerRef);\n\n const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n // suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvTagSuggestion[] | null\n >(null);\n\n const isStateInvalid = useMemo(() => {\n return hasCounter && value.length > maxTagsQuantity;\n }, [hasCounter, maxTagsQuantity, value.length]);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n [validationMessages]\n );\n\n const performValidation = useCallback(\n (currValue) => {\n if (\n maxTagsQuantity !== null &&\n maxTagsQuantity !== undefined &&\n currValue.length > maxTagsQuantity\n ) {\n setValidationState(validationStates.invalid);\n setValidationMessage(errorMessages.maxCharError);\n setStateValid(false);\n } else {\n setValidationState(validationStates.valid);\n setValidationMessage(\"\");\n setStateValid(true);\n }\n },\n [\n errorMessages.maxCharError,\n maxTagsQuantity,\n setValidationMessage,\n setValidationState,\n ]\n );\n\n /**\n * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n * Also executes the user provided onDelete and onChange events.\n *\n * @param {number} tagPos - the position at which to remove the tag\n * @param {Event} event - the event associated with the delete\n * @param {boolean} end - whether or not to set the cursor at the end of the array\n */\n const deleteTag = useCallback(\n (tagPos, event, end) => {\n const newTagsArr = [\n ...value.slice(0, tagPos),\n ...value.slice(tagPos + 1),\n ];\n setValue(newTagsArr);\n setTagCursorPos(\n end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n );\n inputRef.current?.focus();\n performValidation(newTagsArr);\n onDelete?.(event, value[tagPos], tagPos);\n onChange?.(event, newTagsArr);\n skipReset.current = true;\n },\n [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n );\n\n /**\n * Adds a Tag to the array of tags.\n * Also executes the user provided onAdd and onDelete events.\n *\n * @param {Event} event - whatever event triggered adding a tag\n * @param {string} tag - the string for the tag\n */\n const addTag = useCallback(\n (event, tag) => {\n event.preventDefault();\n if (tag !== \"\") {\n const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n const newTagsArr = [...value, newTag];\n setValue(newTagsArr);\n performValidation(newTagsArr);\n onAdd?.(event, newTag, newTagsArr.length - 1);\n onChange?.(event, newTagsArr);\n }\n },\n [onAdd, onChange, performValidation, setValue, value]\n );\n\n const canShowError =\n (status !== undefined &&\n status === \"invalid\" &&\n statusMessage !== undefined) ||\n !stateValid;\n\n useEffect(() => {\n if (!multiline) {\n const element = containerRef?.current?.children[tagCursorPos];\n // this setTimeout is a workaround for Firefox not properly dealing\n // with setting the scrollLeft value.\n setTimeout(() => {\n const container = containerRef.current;\n if (container == null) return;\n container.scrollLeft = element\n ? element.offsetLeft -\n container.getBoundingClientRect().width / 2 +\n element.getBoundingClientRect().width / 2\n : 0;\n }, 50);\n\n element?.focus();\n }\n }, [multiline, tagCursorPos]);\n\n useEffect(() => {\n if (!skipReset.current) {\n setTagInput(\"\");\n setTagCursorPos(value.length);\n }\n skipReset.current = false;\n }, [value]);\n\n const isMounted = useIsMounted();\n\n /**\n * Looks for the node that represent the input inside the material tree and focus it.\n */\n const focusInput = () => {\n materialInputRef.current.focus();\n };\n\n const getSuggestions = useCallback(\n (li) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") || \"\"\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n },\n [elementId]\n );\n\n /**\n * Clears the suggestion array.\n */\n const suggestionClearHandler = useCallback(() => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n }, [isMounted]);\n\n /**\n * Fills of the suggestion array.\n */\n const suggestionHandler = useCallback(\n (val) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n },\n [suggestionClearHandler, suggestionListCallback]\n );\n\n /**\n * Executes the user callback adds the selection to the state and clears the suggestions.\n */\n const suggestionSelectedHandler = (event, item) => {\n addTag(event, item.value || item.label);\n\n // set the input value (only when value is uncontrolled)\n setTagInput(item.value || item.label);\n\n focusInput();\n suggestionClearHandler();\n };\n\n /**\n * Handler for the `onKeyDown` event on the suggestions component\n */\n const onSuggestionKeyDown = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /**\n * Handler for the `onChange` event on the tag input\n */\n const onChangeHandler = useCallback(\n (_, input) => {\n setTagInput(input);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(input);\n }\n },\n [canShowSuggestions, suggestionHandler]\n );\n\n /**\n * Handler for the `onKeyDown` event on the form element\n */\n const onInputKeyDownHandler = useCallback(\n (event) => {\n if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n addTag(event, tagInput);\n }\n },\n [addTag, canShowSuggestions, commitTagOn, tagInput]\n );\n\n /**\n * Handler for the `onKeyDown` event on the list container.\n */\n const onKeyDownHandler = useCallback(\n (event) => {\n if (tagInput === \"\") {\n switch (event.code) {\n case \"ArrowLeft\":\n setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n break;\n case \"ArrowRight\":\n setTagCursorPos(\n tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n );\n break;\n case \"Backspace\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n } else {\n setTagCursorPos(value.length - 1);\n }\n break;\n case \"Delete\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n }\n break;\n default:\n break;\n }\n } else {\n switch (event.code) {\n case \"ArrowDown\":\n getSuggestions(0)?.focus();\n break;\n case \"Enter\":\n if (\n canShowSuggestions &&\n suggestionsLoose &&\n (suggestionValidation?.(tagInput) || !suggestionValidation)\n ) {\n addTag(event, tagInput);\n\n // set the input value (only when value is uncontrolled)\n setTagInput(tagInput);\n\n focusInput();\n suggestionClearHandler();\n }\n break;\n default:\n break;\n }\n }\n },\n [\n addTag,\n canShowSuggestions,\n deleteTag,\n getSuggestions,\n isTagSelected,\n suggestionClearHandler,\n suggestionValidation,\n suggestionsLoose,\n tagCursorPos,\n tagInput,\n value.length,\n ]\n );\n\n /**\n * Handler for the `onDelete` event on the tag component\n */\n const onDeleteTagHandler = useCallback(\n (event, i) => {\n deleteTag(i, event, true);\n setValidationState(validationStates.standBy);\n },\n [deleteTag, setValidationState]\n );\n\n /**\n * Handler for the `onClick` event on the list container\n */\n const onContainerClickHandler = useCallback(() => {\n inputRef.current?.focus();\n clearTimeout(blurTimeout.current);\n setTagCursorPos(value.length);\n }, [value.length]);\n\n const onBlurHandler = (evt) => {\n blurTimeout.current = setTimeout(() => {\n if (commitOnBlur) {\n addTag(evt, tagInput);\n }\n onBlur?.(evt, tagInput);\n }, 250);\n };\n\n const onFocusHandler = (evt) => {\n clearTimeout(blurTimeout.current);\n onFocus?.(evt, tagInput);\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n status={validationState}\n required={required}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n className\n )}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n className={classes.label}\n id={setId(id, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={textAreaLabel}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n className={classes.description}\n id={setId(elementId, \"description\")}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n {hasCounter && (\n <HvCharCounter\n id={setId(elementId, \"charCounter\")}\n className={classes.characterCounter}\n separator={middleCountLabel}\n currentCharQuantity={value.length}\n maxCharQuantity={maxTagsQuantity}\n {...countCharProps}\n />\n )}\n\n <HvListContainer\n className={cx(classes.tagsList, {\n [classes.error]: canShowError,\n [classes.resizable]: resizable && multiline,\n [classes.invalid]: isStateInvalid,\n [classes.singleLine]: !multiline,\n })}\n onKeyDown={onKeyDownHandler}\n onClick={onContainerClickHandler}\n ref={forkedContainerRef}\n >\n {value &&\n value.map((t, i) => {\n const tag =\n typeof t === \"string\"\n ? {\n label: t,\n type: \"semantic\",\n }\n : t;\n const { label, type, ...otherProps } = tag;\n return (\n <HvListItem\n key={`${tag.label}-${i}`}\n tabIndex={-1}\n className={cx({ [classes.singleLine]: !multiline })}\n classes={{\n gutters: classes.listItemGutters,\n root: classes.listItemRoot,\n }}\n id={setId(elementId, `tag-${i}`)}\n >\n <HvTag\n label={label}\n className={cx({\n [classes.tagSelected]: i === tagCursorPos,\n })}\n classes={{\n chipRoot: classes.chipRoot,\n }}\n type={type}\n {...(!(readOnly || disabled || type === \"categorical\") && {\n onDelete: (event) => onDeleteTagHandler(event, i),\n })}\n deleteButtonProps={{\n tabIndex: -1,\n }}\n {...otherProps}\n />\n </HvListItem>\n );\n })}\n {!(disabled || readOnly) && (\n <HvListItem\n className={cx(\n {\n [classes.singleLine]: !multiline,\n [classes.tagInputRootEmpty]: value.length === 0,\n },\n !!isTagSelected &&\n css({\n [`& .${baseInputClasses.inputRoot}`]: {\n backgroundColor: theme.colors.atmo1,\n },\n })\n )}\n classes={{\n root: classes.tagInputContainerRoot,\n gutters: classes.listItemGutters,\n }}\n id={setId(elementId, `tag-${value.length}`)}\n >\n <HvInput\n value={tagInput}\n disableClear\n onChange={onChangeHandler}\n onKeyDown={onInputKeyDownHandler}\n placeholder={value.length === 0 ? placeholder : \"\"}\n autoFocus={autoFocus}\n className={cx({\n [classes.singleLine]: !multiline,\n })}\n classes={{\n root: classes.tagInputRoot,\n input: classes.input,\n inputBorderContainer: classes.tagInputBorderContainer,\n inputRootFocused: classes.tagInputRootFocused,\n }}\n disabled={disabled}\n readOnly={readOnly || isTagSelected}\n inputProps={{\n ref: materialInputRef,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : (description && setId(elementId, \"description\")) ||\n undefined,\n\n ...inputProps,\n }}\n inputRef={inputRef}\n {...others}\n />\n </HvListItem>\n )}\n </HvListContainer>\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={containerRef?.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n }\n);\n"],"names":["validationState","validationStates","baseInputClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TagsInput.js","sources":["../../../src/TagsInput/TagsInput.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"../ListContainer\";\nimport { baseInputClasses } from \"../BaseInput\";\nimport { HvInput } from \"../Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"../Tag\";\nimport {\n HvCharCounter,\n HvCharCounterProps,\n HvFormElement,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvSuggestions,\n HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n extends HvBaseProps<\n HTMLElement,\n \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\n > {\n /** The form element name. */\n name?: string;\n /** The value of the form element. */\n value?: string[] | HvTagProps[];\n /** When uncontrolled, defines the initial input value. */\n defaultValue?: string[] | HvTagProps[];\n /**\n * The label of the form element.\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n */\n label?: React.ReactNode;\n /** Provide additional descriptive text for the form element. */\n description?: React.ReactNode;\n /** Indicates that the form element is disabled. */\n disabled?: boolean;\n /** Indicates that the form element is not editable. */\n readOnly?: boolean;\n /** Indicates that the form element is required. */\n required?: boolean;\n /** The function that will be executed onChange. */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLElement, MouseEvent>\n | React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps[]\n ) => void;\n /** The function that will be executed when the element is focused. */\n onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /** The function that will be executed when the element is blurred. */\n onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n /** The function that will be executed when a tag is deleted. */\n onDelete?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLElement, MouseEvent>\n | React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /** The function that will be executed when a tag is added. */\n onAdd?: (\n event:\n | React.ChangeEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>\n | React.MouseEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLElement, MouseEvent>\n | React.KeyboardEventHandler<HTMLElement>,\n value: HvTagProps,\n index: number\n ) => void;\n /** The placeholder value of the input. */\n placeholder?: string;\n /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n hideCounter?: boolean;\n /** Text between the current char counter and max value. */\n middleCountLabel?: string;\n /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n maxTagsQuantity?: number;\n /** Attributes applied to the input element. */\n inputProps?: MuiInputBaseComponentProps;\n /** If `true` it should autofocus. */\n autoFocus?: boolean;\n /** If `true` the component is resizable. */\n resizable?: boolean;\n /** Props passed to the HvCharCount component. */\n countCharProps?: Partial<HvCharCounterProps>;\n /** If `true` the component is in multiline mode. */\n multiline?: boolean;\n /** The status of the form element. */\n status?: HvFormStatus;\n /** The error message to show when `status` is \"invalid\". */\n statusMessage?: React.ReactNode;\n /** An Object containing the various texts associated with the input. */\n validationMessages?: HvValidationMessages;\n /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n commitTagOn?: string[];\n /** If `true` the tag will be committed when the blur event occurs. */\n commitOnBlur?: boolean;\n /** The function that will be executed to received an array of objects that has a label and id to create list of suggestions. */\n suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;\n /** The validation function that will be executed when adding tags in the suggestions mode. */\n suggestionValidation?: (value: string) => boolean;\n /** When in suggestions mode, this property indicates that tags that are not present on the suggestions list can also be added. */\n suggestionsLoose?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTagsInputClasses;\n}\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = forwardRef<HTMLUListElement, HvTagsInputProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue = [],\n readOnly = false,\n disabled = false,\n required = false,\n label: textAreaLabel,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onAdd,\n onDelete,\n onBlur,\n onFocus,\n placeholder,\n hideCounter = false,\n middleCountLabel = \"/\",\n maxTagsQuantity,\n autoFocus = false,\n resizable = true,\n inputProps = {},\n countCharProps = {},\n multiline = false,\n status,\n statusMessage,\n validationMessages,\n commitTagOn = [\"Enter\"],\n commitOnBlur = false,\n suggestionListCallback,\n suggestionValidation,\n suggestionsLoose = false,\n ...others\n } = useDefaultProps(\"HvTagsInput\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const hasLabel = textAreaLabel != null;\n const hasDescription = description != null;\n\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy\n );\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [tagInput, setTagInput] = useState(\"\");\n const [tagCursorPos, setTagCursorPos] = useState(value.length);\n const [stateValid, setStateValid] = useState(true);\n\n const inputRef = useRef<any>();\n const containerRef = useRef<any>();\n const skipReset = useRef(false);\n const blurTimeout = useRef<any>();\n const materialInputRef = useRef<any>(null);\n\n const forkedContainerRef = useForkRef(ref, containerRef);\n\n const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n // suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvTagSuggestion[] | null\n >(null);\n\n const isStateInvalid = useMemo(() => {\n return hasCounter && value.length > maxTagsQuantity;\n }, [hasCounter, maxTagsQuantity, value.length]);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n [validationMessages]\n );\n\n const performValidation = useCallback(\n (currValue) => {\n if (\n maxTagsQuantity !== null &&\n maxTagsQuantity !== undefined &&\n currValue.length > maxTagsQuantity\n ) {\n setValidationState(validationStates.invalid);\n setValidationMessage(errorMessages.maxCharError);\n setStateValid(false);\n } else {\n setValidationState(validationStates.valid);\n setValidationMessage(\"\");\n setStateValid(true);\n }\n },\n [\n errorMessages.maxCharError,\n maxTagsQuantity,\n setValidationMessage,\n setValidationState,\n ]\n );\n\n /**\n * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n * Also executes the user provided onDelete and onChange events.\n *\n * @param {number} tagPos - the position at which to remove the tag\n * @param {Event} event - the event associated with the delete\n * @param {boolean} end - whether or not to set the cursor at the end of the array\n */\n const deleteTag = useCallback(\n (tagPos, event, end) => {\n const newTagsArr = [\n ...value.slice(0, tagPos),\n ...value.slice(tagPos + 1),\n ];\n setValue(newTagsArr);\n setTagCursorPos(\n end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n );\n inputRef.current?.focus();\n performValidation(newTagsArr);\n onDelete?.(event, value[tagPos], tagPos);\n onChange?.(event, newTagsArr);\n skipReset.current = true;\n },\n [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n );\n\n /**\n * Adds a Tag to the array of tags.\n * Also executes the user provided onAdd and onDelete events.\n *\n * @param {Event} event - whatever event triggered adding a tag\n * @param {string} tag - the string for the tag\n */\n const addTag = useCallback(\n (event, tag) => {\n event.preventDefault();\n if (tag !== \"\") {\n const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n const newTagsArr = [...value, newTag];\n setValue(newTagsArr);\n performValidation(newTagsArr);\n onAdd?.(event, newTag, newTagsArr.length - 1);\n onChange?.(event, newTagsArr);\n }\n },\n [onAdd, onChange, performValidation, setValue, value]\n );\n\n const canShowError =\n (status !== undefined &&\n status === \"invalid\" &&\n statusMessage !== undefined) ||\n !stateValid;\n\n useEffect(() => {\n if (!multiline) {\n const element = containerRef?.current?.children[tagCursorPos];\n // this setTimeout is a workaround for Firefox not properly dealing\n // with setting the scrollLeft value.\n setTimeout(() => {\n const container = containerRef.current;\n if (container == null) return;\n container.scrollLeft = element\n ? element.offsetLeft -\n container.getBoundingClientRect().width / 2 +\n element.getBoundingClientRect().width / 2\n : 0;\n }, 50);\n\n element?.focus();\n }\n }, [multiline, tagCursorPos]);\n\n useEffect(() => {\n if (!skipReset.current) {\n setTagInput(\"\");\n setTagCursorPos(value.length);\n }\n skipReset.current = false;\n }, [value]);\n\n const isMounted = useIsMounted();\n\n /**\n * Looks for the node that represent the input inside the material tree and focus it.\n */\n const focusInput = () => {\n materialInputRef.current.focus();\n };\n\n const getSuggestions = useCallback(\n (li) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") || \"\"\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n },\n [elementId]\n );\n\n /**\n * Clears the suggestion array.\n */\n const suggestionClearHandler = useCallback(() => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n }, [isMounted]);\n\n /**\n * Fills of the suggestion array.\n */\n const suggestionHandler = useCallback(\n (val) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n },\n [suggestionClearHandler, suggestionListCallback]\n );\n\n /**\n * Executes the user callback adds the selection to the state and clears the suggestions.\n */\n const suggestionSelectedHandler = (event, item) => {\n addTag(event, item.value || item.label);\n\n // set the input value (only when value is uncontrolled)\n setTagInput(item.value || item.label);\n\n focusInput();\n suggestionClearHandler();\n };\n\n /**\n * Handler for the `onKeyDown` event on the suggestions component\n */\n const onSuggestionKeyDown = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /**\n * Handler for the `onChange` event on the tag input\n */\n const onChangeHandler = useCallback(\n (_, input) => {\n setTagInput(input);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(input);\n }\n },\n [canShowSuggestions, suggestionHandler]\n );\n\n /**\n * Handler for the `onKeyDown` event on the form element\n */\n const onInputKeyDownHandler = useCallback(\n (event) => {\n if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n addTag(event, tagInput);\n }\n },\n [addTag, canShowSuggestions, commitTagOn, tagInput]\n );\n\n /**\n * Handler for the `onKeyDown` event on the list container.\n */\n const onKeyDownHandler = useCallback(\n (event) => {\n if (tagInput === \"\") {\n switch (event.code) {\n case \"ArrowLeft\":\n setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n break;\n case \"ArrowRight\":\n setTagCursorPos(\n tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n );\n break;\n case \"Backspace\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n } else {\n setTagCursorPos(value.length - 1);\n }\n break;\n case \"Delete\":\n if (isTagSelected) {\n deleteTag(tagCursorPos, event, false);\n }\n break;\n default:\n break;\n }\n } else {\n switch (event.code) {\n case \"ArrowDown\":\n getSuggestions(0)?.focus();\n break;\n case \"Enter\":\n if (\n canShowSuggestions &&\n suggestionsLoose &&\n (suggestionValidation?.(tagInput) || !suggestionValidation)\n ) {\n addTag(event, tagInput);\n\n // set the input value (only when value is uncontrolled)\n setTagInput(tagInput);\n\n focusInput();\n suggestionClearHandler();\n }\n break;\n default:\n break;\n }\n }\n },\n [\n addTag,\n canShowSuggestions,\n deleteTag,\n getSuggestions,\n isTagSelected,\n suggestionClearHandler,\n suggestionValidation,\n suggestionsLoose,\n tagCursorPos,\n tagInput,\n value.length,\n ]\n );\n\n /**\n * Handler for the `onDelete` event on the tag component\n */\n const onDeleteTagHandler = useCallback(\n (event, i) => {\n deleteTag(i, event, true);\n setValidationState(validationStates.standBy);\n },\n [deleteTag, setValidationState]\n );\n\n /**\n * Handler for the `onClick` event on the list container\n */\n const onContainerClickHandler = useCallback(() => {\n inputRef.current?.focus();\n clearTimeout(blurTimeout.current);\n setTagCursorPos(value.length);\n }, [value.length]);\n\n const onBlurHandler = (evt) => {\n blurTimeout.current = setTimeout(() => {\n if (commitOnBlur) {\n addTag(evt, tagInput);\n }\n onBlur?.(evt, tagInput);\n }, 250);\n };\n\n const onFocusHandler = (evt) => {\n clearTimeout(blurTimeout.current);\n onFocus?.(evt, tagInput);\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n status={validationState}\n required={required}\n onBlur={onBlurHandler}\n onFocus={onFocusHandler}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n className\n )}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n className={classes.label}\n id={setId(id, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={textAreaLabel}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n className={classes.description}\n id={setId(elementId, \"description\")}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n {hasCounter && (\n <HvCharCounter\n id={setId(elementId, \"charCounter\")}\n className={classes.characterCounter}\n separator={middleCountLabel}\n currentCharQuantity={value.length}\n maxCharQuantity={maxTagsQuantity}\n {...countCharProps}\n />\n )}\n\n <HvListContainer\n className={cx(classes.tagsList, {\n [classes.error]: canShowError,\n [classes.resizable]: resizable && multiline,\n [classes.invalid]: isStateInvalid,\n [classes.singleLine]: !multiline,\n })}\n onKeyDown={onKeyDownHandler}\n onClick={onContainerClickHandler}\n ref={forkedContainerRef}\n >\n {value &&\n value.map((t, i) => {\n const tag =\n typeof t === \"string\"\n ? {\n label: t,\n type: \"semantic\",\n }\n : t;\n const { label, type, ...otherProps } = tag;\n return (\n <HvListItem\n key={`${tag.label}-${i}`}\n tabIndex={-1}\n className={cx({ [classes.singleLine]: !multiline })}\n classes={{\n gutters: classes.listItemGutters,\n root: classes.listItemRoot,\n }}\n id={setId(elementId, `tag-${i}`)}\n >\n <HvTag\n label={label}\n className={cx({\n [classes.tagSelected]: i === tagCursorPos,\n })}\n classes={{\n chipRoot: classes.chipRoot,\n }}\n type={type}\n {...(!(readOnly || disabled || type === \"categorical\") && {\n onDelete: (event) => onDeleteTagHandler(event, i),\n })}\n deleteButtonProps={{\n tabIndex: -1,\n }}\n {...otherProps}\n />\n </HvListItem>\n );\n })}\n {!(disabled || readOnly) && (\n <HvListItem\n className={cx(\n {\n [classes.singleLine]: !multiline,\n [classes.tagInputRootEmpty]: value.length === 0,\n },\n !!isTagSelected &&\n css({\n [`& .${baseInputClasses.inputRoot}`]: {\n backgroundColor: theme.colors.atmo1,\n },\n })\n )}\n classes={{\n root: classes.tagInputContainerRoot,\n gutters: classes.listItemGutters,\n }}\n id={setId(elementId, `tag-${value.length}`)}\n >\n <HvInput\n value={tagInput}\n disableClear\n onChange={onChangeHandler}\n onKeyDown={onInputKeyDownHandler}\n placeholder={value.length === 0 ? placeholder : \"\"}\n autoFocus={autoFocus}\n className={cx({\n [classes.singleLine]: !multiline,\n })}\n classes={{\n root: classes.tagInputRoot,\n input: classes.input,\n inputBorderContainer: classes.tagInputBorderContainer,\n inputRootFocused: classes.tagInputRootFocused,\n }}\n disabled={disabled}\n readOnly={readOnly || isTagSelected}\n inputProps={{\n ref: materialInputRef,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : (description && setId(elementId, \"description\")) ||\n undefined,\n\n ...inputProps,\n }}\n inputRef={inputRef}\n {...others}\n />\n </HvListItem>\n )}\n </HvListContainer>\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={containerRef?.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n }\n);\n"],"names":["validationState","validationStates","baseInputClasses"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Tooltip, {\n TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport Fade from \"@mui/material/Fade\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes?: HvTooltipClasses;\n /**\n * If true, the tooltip is shown.\n */\n open?: boolean;\n /**\n * Tooltip placement.\n */\n placement?: HvTooltipPlacementType;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This property won't impact the enter touch delay (enterTouchDelay).\n */\n enterDelay?: number;\n /** @inheritdoc */\n title: MuiTooltipProps[\"title\"];\n /** @inheritdoc */\n TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n /** @inheritdoc */\n TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n /**\n * Defines if should use a single or multiline tooltip.\n */\n useSingle?: boolean;\n /**\n * Node to apply the tooltip.\n */\n children: React.ReactElement;\n /**\n * Id attribute value of an HTML Element to have the tooltip appended to it.\n */\n containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n const {\n className,\n classes: classesProp,\n open,\n enterDelay = 300,\n placement = \"top\",\n useSingle = true,\n children,\n title,\n TransitionComponent = Fade,\n TransitionProps = { timeout: 400, placement: \"top\" },\n containerId,\n ...others\n } = useDefaultProps(\"HvTooltip\", props);\n\n const { rootId } = useTheme();\n const { classes } = useClasses(classesProp);\n\n return (\n <Tooltip\n ref={ref}\n open={open ?? undefined}\n enterDelay={enterDelay}\n placement={placement}\n TransitionComponent={TransitionComponent}\n TransitionProps={TransitionProps}\n className={className}\n classes={{\n tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n popper: classes.popper,\n }}\n title={title}\n PopperProps={{\n container: getElementById(containerId || rootId),\n }}\n {...others}\n >\n {children}\n </Tooltip>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;AAmEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,QACX,WAAW,eAAe,eAAe,MAAM;AAAA,MACjD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultContent.js","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"DefaultContent.js","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useCss } from \"../../hooks/useCss\";\nimport { ExtractNames, createClasses } from \"../../utils/classes\";\n\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n root: {},\n expanded: {},\n selected: {},\n focused: {},\n disabled: {},\n iconContainer: {},\n label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n /** className applied to the root element. */\n className?: string;\n /** Override or extend the styles applied to the component. */\n classes?: HvTreeContentClasses;\n /** The tree node label. */\n label?: React.ReactNode;\n /** The id of the node. */\n nodeId: string;\n /** The icon to display next to the tree node's label. */\n icon?: React.ReactNode;\n /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n expansionIcon?: React.ReactNode;\n /** The icon to display next to the tree node's label. Either a parent or end icon. */\n displayIcon?: React.ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n displayIcon,\n expansionIcon,\n icon: iconProp,\n label,\n nodeId,\n onClick,\n onMouseDown,\n ...others\n } = props;\n const { classes } = useClasses(classesProp);\n\n const { cx } = useCss();\n\n const {\n disabled,\n expanded,\n selected,\n focused,\n handleExpansion,\n handleSelection,\n preventSelection,\n } = useHvTreeItem(nodeId);\n\n const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n return (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n <div\n {...others}\n className={cx(className, classes.root, {\n [classes.expanded]: expanded,\n [classes.selected]: selected,\n [classes.focused]: focused,\n [classes.disabled]: disabled,\n })}\n onClick={(event) => {\n handleExpansion(event);\n handleSelection(event);\n onClick?.(event);\n }}\n onMouseDown={(event) => {\n preventSelection(event);\n onMouseDown?.(event);\n }}\n ref={ref}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div className={classes.label}>{label}</div>\n </div>\n );\n }\n);\n"],"names":[],"mappings":";;;;;AAOO,MAAM,EAAE,WAAA,IAAe,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAO;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAW,QAAQ,MAAM;AAAA,YACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5C,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeItem.js","sources":["../../../../src/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import {\n FocusEvent,\n HTMLAttributes,\n JSXElementConstructor,\n ReactNode,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n DescendantProvider,\n TreeItemDescendant,\n useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n /** className applied to the root element. */\n className?: string;\n /** Override or extend the styles applied to the component. */\n classes?: HvTreeContentClasses;\n /** The tree node label. */\n label?: ReactNode;\n /** The id of the node. */\n nodeId: string;\n /** The icon to display next to the tree node's label. */\n icon?: ReactNode;\n /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n expansionIcon?: ReactNode;\n /** The icon to display next to the tree node's label. Either a parent or end icon. */\n displayIcon?: ReactNode;\n}\n\nexport interface HvTreeItemProps extends HTMLAttributes<HTMLElement> {\n /** The element id */\n id?: string;\n /** The id of the node. */\n nodeId: string;\n /** The tree node label. */\n label?: ReactNode;\n /** Override or extend the styles applied to the component. */\n classes?: HvTreeItemClasses;\n /** If `true`, the node is disabled. */\n disabled?: boolean;\n /** The icon to display next to the tree node's label. */\n icon?: ReactNode;\n /** The component used for the content node. */\n ContentComponent?: JSXElementConstructor<HvTreeContentProps>;\n /** Props applied to the content component */\n ContentProps?: HvTreeContentProps;\n /** The content of the component. */\n children?: ReactNode;\n /** className applied to the root element. */\n className?: string;\n /** The icon used to collapse the node. */\n collapseIcon?: ReactNode;\n /** The icon displayed next to an end node. */\n endIcon?: ReactNode;\n /** The icon used to expand the node. */\n expandIcon?: ReactNode;\n /** The component used for the transition. */\n TransitionComponent?: JSXElementConstructor<TransitionProps>;\n /** Props applied to the transition component */\n TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n (props, ref) => {\n const {\n id: idProp,\n nodeId,\n children,\n classes: classesProp,\n className,\n label,\n disabled: disabledProp,\n icon,\n endIcon,\n expandIcon,\n collapseIcon,\n ContentComponent: Component = DefaultContent,\n TransitionProps: transitionProps,\n ContentProps: contentProps,\n ...others\n } = useDefaultProps(\"HvTreeItem\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const {\n instance,\n multiSelect,\n disabledItemsFocusable,\n treeId,\n icons: contextIcons,\n } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n const id =\n idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n const [treeItemElement, setTreeItemElement] =\n useState<HTMLLIElement | null>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeItemElement, ref);\n\n const descendant = useMemo<TreeItemDescendant>(\n () => ({ element: treeItemElement!, id: nodeId }),\n [nodeId, treeItemElement]\n );\n\n const { index, parentId } = useDescendant(descendant);\n\n const expandable = !!(Array.isArray(children) ? children.length : children);\n const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n const focused = instance ? instance.isNodeFocused(nodeId) : false;\n const selected = instance ? instance.isNodeSelected(nodeId) : false;\n const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n const expansionIcon = !expanded\n ? expandIcon || contextIcons.defaultExpandIcon\n : collapseIcon || contextIcons.defaultCollapseIcon;\n\n const displayIcon = expandable\n ? contextIcons.defaultParentIcon\n : endIcon || contextIcons.defaultEndIcon;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (instance && index !== -1) {\n instance.updateNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n expandable,\n disabled: disabledProp,\n });\n\n return () => instance.removeNode(nodeId);\n }\n\n return undefined;\n }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n useEffect(() => {\n if (instance && label) {\n return instance.mapFirstChar(\n nodeId,\n (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n );\n }\n return undefined;\n }, [instance, nodeId, label]);\n\n const handleFocus = (event: FocusEvent<HTMLLIElement, any>) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n const rootElement: any =\n typeof event.target.getRootNode === \"function\"\n ? event.target.getRootNode()\n : event.target.ownerDocument || document;\n\n rootElement.getElementById(treeId).focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n const canFocus =\n instance &&\n !focused &&\n !disabled &&\n !unfocusable &&\n event.currentTarget === event.target;\n\n if (canFocus) {\n instance.focusNode(event, nodeId);\n }\n };\n\n return (\n <li\n id={id}\n ref={handleRef}\n role=\"treeitem\"\n aria-expanded={expandable ? expanded : undefined}\n aria-selected={(multiSelect && selected) || selected || undefined}\n aria-disabled={disabled || undefined}\n className={cx(classes.root, className)}\n // @ts-ignore\n onFocus={handleFocus}\n tabIndex={-1}\n {...others}\n >\n <Component\n ref={contentRef}\n nodeId={nodeId}\n classes={{\n root: classes.content,\n expanded: classes.expanded,\n selected: classes.selected,\n focused: classes.focused,\n disabled: classes.disabled,\n label: classes.label,\n iconContainer: classes.iconContainer,\n }}\n label={label}\n icon={icon}\n expansionIcon={expandable && expansionIcon}\n displayIcon={displayIcon}\n {...contentProps}\n />\n {children && (\n <DescendantProvider id={nodeId}>\n <Collapse\n component=\"ul\"\n role=\"group\"\n unmountOnExit\n className={classes.group}\n in={expanded}\n {...transitionProps}\n >\n {children}\n </Collapse>\n </DescendantProvider>\n )}\n </li>\n );\n }\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TreeItem.js","sources":["../../../../src/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n DescendantProvider,\n TreeItemDescendant,\n useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n /** className applied to the root element. */\n className?: string;\n /** Override or extend the styles applied to the component. */\n classes?: HvTreeContentClasses;\n /** The tree node label. */\n label?: React.ReactNode;\n /** The id of the node. */\n nodeId: string;\n /** The icon to display next to the tree node's label. */\n icon?: React.ReactNode;\n /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n expansionIcon?: React.ReactNode;\n /** The icon to display next to the tree node's label. Either a parent or end icon. */\n displayIcon?: React.ReactNode;\n}\n\nexport interface HvTreeItemProps extends React.HTMLAttributes<HTMLElement> {\n /** The element id */\n id?: string;\n /** The id of the node. */\n nodeId: string;\n /** The tree node label. */\n label?: React.ReactNode;\n /** Override or extend the styles applied to the component. */\n classes?: HvTreeItemClasses;\n /** If `true`, the node is disabled. */\n disabled?: boolean;\n /** The icon to display next to the tree node's label. */\n icon?: React.ReactNode;\n /** The component used for the content node. */\n ContentComponent?: React.JSXElementConstructor<HvTreeContentProps>;\n /** Props applied to the content component */\n ContentProps?: HvTreeContentProps;\n /** The content of the component. */\n children?: React.ReactNode;\n /** className applied to the root element. */\n className?: string;\n /** The icon used to collapse the node. */\n collapseIcon?: React.ReactNode;\n /** The icon displayed next to an end node. */\n endIcon?: React.ReactNode;\n /** The icon used to expand the node. */\n expandIcon?: React.ReactNode;\n /** The component used for the transition. */\n TransitionComponent?: React.JSXElementConstructor<TransitionProps>;\n /** Props applied to the transition component */\n TransitionProps?: TransitionProps;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n (props, ref) => {\n const {\n id: idProp,\n nodeId,\n children,\n classes: classesProp,\n className,\n label,\n disabled: disabledProp,\n icon,\n endIcon,\n expandIcon,\n collapseIcon,\n ContentComponent: Component = DefaultContent,\n TransitionProps: transitionProps,\n ContentProps: contentProps,\n ...others\n } = useDefaultProps(\"HvTreeItem\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const {\n instance,\n multiSelect,\n disabledItemsFocusable,\n treeId,\n icons: contextIcons,\n } = useTreeViewContext<DefaultTreeViewPlugins>();\n\n const id =\n idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n const [treeItemElement, setTreeItemElement] =\n useState<HTMLLIElement | null>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeItemElement, ref);\n\n const descendant = useMemo<TreeItemDescendant>(\n () => ({ element: treeItemElement!, id: nodeId }),\n [nodeId, treeItemElement]\n );\n\n const { index, parentId } = useDescendant(descendant);\n\n const expandable = !!(Array.isArray(children) ? children.length : children);\n const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n const focused = instance ? instance.isNodeFocused(nodeId) : false;\n const selected = instance ? instance.isNodeSelected(nodeId) : false;\n const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n const expansionIcon = !expanded\n ? expandIcon || contextIcons.defaultExpandIcon\n : collapseIcon || contextIcons.defaultCollapseIcon;\n\n const displayIcon = expandable\n ? contextIcons.defaultParentIcon\n : endIcon || contextIcons.defaultEndIcon;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (instance && index !== -1) {\n instance.updateNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n expandable,\n disabled: disabledProp,\n });\n\n return () => instance.removeNode(nodeId);\n }\n\n return undefined;\n }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n useEffect(() => {\n if (instance && label) {\n return instance.mapFirstChar(\n nodeId,\n (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n );\n }\n return undefined;\n }, [instance, nodeId, label]);\n\n const handleFocus = (event: React.FocusEvent<HTMLLIElement>) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n const rootElement: any =\n typeof event.target.getRootNode === \"function\"\n ? event.target.getRootNode()\n : event.target.ownerDocument || document;\n\n rootElement.getElementById(treeId).focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n const canFocus =\n instance &&\n !focused &&\n !disabled &&\n !unfocusable &&\n event.currentTarget === event.target;\n\n if (canFocus) {\n instance.focusNode(event, nodeId);\n }\n };\n\n return (\n <li\n id={id}\n ref={handleRef}\n role=\"treeitem\"\n aria-expanded={expandable ? expanded : undefined}\n aria-selected={(multiSelect && selected) || selected || undefined}\n aria-disabled={disabled || undefined}\n className={cx(classes.root, className)}\n // @ts-ignore\n onFocus={handleFocus}\n tabIndex={-1}\n {...others}\n >\n <Component\n ref={contentRef}\n nodeId={nodeId}\n classes={{\n root: classes.content,\n expanded: classes.expanded,\n selected: classes.selected,\n focused: classes.focused,\n disabled: classes.disabled,\n label: classes.label,\n iconContainer: classes.iconContainer,\n }}\n label={label}\n icon={icon}\n expansionIcon={expandable && expansionIcon}\n displayIcon={displayIcon}\n {...contentProps}\n />\n {children && (\n <DescendantProvider id={nodeId}>\n <Collapse\n component=\"ul\"\n role=\"group\"\n unmountOnExit\n className={classes.group}\n in={expanded}\n {...transitionProps}\n >\n {children}\n </Collapse>\n </DescendantProvider>\n )}\n </li>\n );\n }\n);\n"],"names":[],"mappings":"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"}
|