@hitachivantara/uikit-react-core 5.66.12 → 5.66.14
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/ActionsGeneric/ActionsGeneric.cjs +1 -2
- package/dist/cjs/AvatarGroup/AvatarGroup.cjs +1 -2
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs +2 -4
- package/dist/cjs/Box/Box.cjs +13 -14
- package/dist/cjs/Button/Button.cjs +3 -6
- package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs +2 -4
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs +1 -2
- package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs +4 -8
- package/dist/cjs/Calendar/utils.cjs +4 -8
- package/dist/cjs/Carousel/Carousel.cjs +26 -11
- package/dist/cjs/Carousel/CarouselControls.cjs +9 -2
- package/dist/cjs/ColorPicker/Fields/Fields.cjs +4 -8
- package/dist/cjs/DatePicker/DatePicker.cjs +6 -12
- package/dist/cjs/Dialog/Dialog.cjs +2 -4
- package/dist/cjs/Drawer/Drawer.cjs +1 -2
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs +2 -4
- package/dist/cjs/Dropdown/Dropdown.cjs +1 -2
- package/dist/cjs/Dropdown/List/List.cjs +2 -4
- package/dist/cjs/Dropdown/utils.cjs +1 -2
- package/dist/cjs/FileUploader/DropZone/DropZone.cjs +3 -6
- package/dist/cjs/FileUploader/FileList/FileList.cjs +1 -2
- package/dist/cjs/FilterGroup/FilterContent/FilterContent.cjs +2 -4
- package/dist/cjs/Focus/Focus.cjs +7 -14
- package/dist/cjs/Forms/FormElement/utils/FormUtils.cjs +6 -4
- package/dist/cjs/GlobalActions/GlobalActions.styles.cjs +1 -2
- package/dist/cjs/Grid/Grid.cjs +7 -4
- package/dist/cjs/Header/Navigation/useSelectionPath.cjs +1 -2
- package/dist/cjs/Input/Input.cjs +2 -4
- package/dist/cjs/Link/Link.cjs +1 -2
- package/dist/cjs/List/List.cjs +12 -15
- package/dist/cjs/List/utils.cjs +1 -2
- package/dist/cjs/ListContainer/ListContainer.cjs +1 -2
- package/dist/cjs/ListContainer/ListContext/ListContext.cjs +1 -2
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs +3 -6
- package/dist/cjs/LoadingContainer/LoadingContainer.cjs +2 -1
- package/dist/cjs/Pagination/Select.cjs +1 -2
- package/dist/cjs/QueryBuilder/Rule/Attribute/Attribute.cjs +1 -2
- package/dist/cjs/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs +2 -2
- package/dist/cjs/QueryBuilder/utils/reducer.cjs +1 -2
- package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.cjs +2 -2
- package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs +2 -2
- package/dist/cjs/Select/Select.cjs +2 -2
- package/dist/cjs/Skeleton/Skeleton.cjs +1 -2
- package/dist/cjs/Slider/Slider.cjs +1 -2
- package/dist/cjs/Slider/SliderInput/SliderInput.cjs +1 -2
- package/dist/cjs/Slider/utils.cjs +4 -8
- package/dist/cjs/Stack/Stack.cjs +1 -2
- package/dist/cjs/Table/TableContext.cjs +1 -2
- package/dist/cjs/Table/TableSectionContext.cjs +1 -2
- package/dist/cjs/Table/hooks/useBulkActions.cjs +1 -2
- package/dist/cjs/Table/hooks/useRowExpand.cjs +5 -1
- package/dist/cjs/Table/utils/fallbacks.cjs +1 -2
- package/dist/cjs/Tag/Tag.cjs +2 -4
- package/dist/cjs/TagsInput/TagsInput.cjs +2 -3
- package/dist/cjs/TextArea/TextArea.cjs +1 -2
- package/dist/cjs/TimeAgo/TimeAgo.cjs +1 -2
- package/dist/cjs/TimeAgo/useTimeout.cjs +1 -2
- package/dist/cjs/TimePicker/Placeholder.cjs +3 -6
- package/dist/cjs/TimePicker/TimePicker.cjs +3 -6
- package/dist/cjs/TreeView/TreeItem/TreeItem.cjs +2 -1
- package/dist/cjs/TreeView/TreeItem/useHvTreeItem.cjs +3 -6
- package/dist/cjs/TreeView/internals/DescendantProvider.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewExpansion.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewFocus.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewKeyboardNavigation.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewNodes.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewSelection.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useInstanceEventHandler.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useTreeView.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useTreeViewInstanceEvents.cjs +1 -2
- package/dist/cjs/TreeView/internals/hooks/useTreeViewModels.cjs +1 -2
- package/dist/cjs/Typography/utils.cjs +1 -2
- package/dist/cjs/VerticalNavigation/Header/Header.cjs +1 -2
- package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs +2 -4
- package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs +3 -6
- package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs +4 -8
- package/dist/cjs/hooks/useForkRef.cjs +1 -2
- package/dist/cjs/hooks/useUniqueId.cjs +2 -4
- package/dist/cjs/providers/Provider.cjs +2 -4
- package/dist/cjs/utils/classes.cjs +6 -3
- package/dist/cjs/utils/deepMerge.cjs +2 -1
- package/dist/cjs/utils/helpers.cjs +1 -2
- package/dist/cjs/utils/theme.cjs +1 -2
- package/dist/cjs/utils/useSavedState.cjs +1 -2
- package/dist/esm/ActionsGeneric/ActionsGeneric.js +1 -2
- package/dist/esm/ActionsGeneric/ActionsGeneric.js.map +1 -1
- package/dist/esm/AvatarGroup/AvatarGroup.js +1 -2
- package/dist/esm/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +2 -4
- package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/Box/Box.js +13 -14
- package/dist/esm/Box/Box.js.map +1 -1
- package/dist/esm/Button/Button.js +3 -6
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js +2 -4
- package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js +1 -2
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js +4 -8
- package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js.map +1 -1
- package/dist/esm/Calendar/utils.js +4 -8
- package/dist/esm/Calendar/utils.js.map +1 -1
- package/dist/esm/Card/Card.js.map +1 -1
- package/dist/esm/Carousel/Carousel.js +26 -11
- package/dist/esm/Carousel/Carousel.js.map +1 -1
- package/dist/esm/Carousel/CarouselControls.js +9 -2
- package/dist/esm/Carousel/CarouselControls.js.map +1 -1
- package/dist/esm/ColorPicker/Fields/Fields.js +3 -6
- package/dist/esm/ColorPicker/Fields/Fields.js.map +1 -1
- package/dist/esm/DatePicker/DatePicker.js +6 -12
- package/dist/esm/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/Dialog/Dialog.js +2 -4
- package/dist/esm/Dialog/Dialog.js.map +1 -1
- package/dist/esm/Drawer/Drawer.js +1 -2
- package/dist/esm/Drawer/Drawer.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.js +2 -4
- package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/Dropdown/Dropdown.js +1 -2
- package/dist/esm/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/Dropdown/List/List.js +2 -4
- package/dist/esm/Dropdown/List/List.js.map +1 -1
- package/dist/esm/Dropdown/utils.js +1 -2
- package/dist/esm/Dropdown/utils.js.map +1 -1
- package/dist/esm/FileUploader/DropZone/DropZone.js +3 -6
- package/dist/esm/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/FileUploader/FileList/FileList.js +1 -2
- package/dist/esm/FileUploader/FileList/FileList.js.map +1 -1
- package/dist/esm/FilterGroup/FilterContent/FilterContent.js +2 -4
- package/dist/esm/FilterGroup/FilterContent/FilterContent.js.map +1 -1
- package/dist/esm/Focus/Focus.js +7 -14
- package/dist/esm/Focus/Focus.js.map +1 -1
- package/dist/esm/Forms/FormElement/FormElement.js.map +1 -1
- package/dist/esm/Forms/FormElement/context/FormElementContext.js.map +1 -1
- package/dist/esm/Forms/FormElement/context/FormElementDescriptorsContext.js.map +1 -1
- package/dist/esm/Forms/FormElement/utils/FormUtils.js +6 -4
- package/dist/esm/Forms/FormElement/utils/FormUtils.js.map +1 -1
- package/dist/esm/GlobalActions/GlobalActions.styles.js +1 -2
- package/dist/esm/GlobalActions/GlobalActions.styles.js.map +1 -1
- package/dist/esm/Grid/Grid.js +7 -4
- package/dist/esm/Grid/Grid.js.map +1 -1
- package/dist/esm/Header/Navigation/useSelectionPath.js +1 -2
- package/dist/esm/Header/Navigation/useSelectionPath.js.map +1 -1
- package/dist/esm/Input/Input.js +2 -4
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/Link/Link.js +1 -2
- package/dist/esm/Link/Link.js.map +1 -1
- package/dist/esm/List/List.js +12 -15
- package/dist/esm/List/List.js.map +1 -1
- package/dist/esm/List/utils.js +1 -2
- package/dist/esm/List/utils.js.map +1 -1
- package/dist/esm/ListContainer/ListContainer.js +4 -5
- package/dist/esm/ListContainer/ListContainer.js.map +1 -1
- package/dist/esm/ListContainer/ListContext/ListContext.js +1 -2
- package/dist/esm/ListContainer/ListContext/ListContext.js.map +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.js +5 -8
- package/dist/esm/ListContainer/ListItem/ListItem.js.map +1 -1
- package/dist/esm/Loading/Loading.js.map +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.js +2 -1
- package/dist/esm/LoadingContainer/LoadingContainer.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/Pagination/Select.js +1 -2
- package/dist/esm/Pagination/Select.js.map +1 -1
- package/dist/esm/QueryBuilder/Rule/Attribute/Attribute.js +1 -2
- package/dist/esm/QueryBuilder/Rule/Attribute/Attribute.js.map +1 -1
- package/dist/esm/QueryBuilder/Rule/Operator/Operator.js.map +1 -1
- package/dist/esm/QueryBuilder/Rule/Value/NumericValue/NumericValue.js +2 -2
- package/dist/esm/QueryBuilder/Rule/Value/NumericValue/NumericValue.js.map +1 -1
- package/dist/esm/QueryBuilder/utils/index.js.map +1 -1
- package/dist/esm/QueryBuilder/utils/reducer.js +1 -2
- package/dist/esm/QueryBuilder/utils/reducer.js.map +1 -1
- package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js +2 -2
- package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -1
- package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js +2 -2
- package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
- package/dist/esm/Section/Section.js.map +1 -1
- package/dist/esm/Select/Select.js +2 -2
- package/dist/esm/Select/Select.js.map +1 -1
- package/dist/esm/SimpleGrid/SimpleGrid.styles.js.map +1 -1
- package/dist/esm/Skeleton/Skeleton.js +1 -2
- package/dist/esm/Skeleton/Skeleton.js.map +1 -1
- package/dist/esm/Slider/Slider.js +1 -2
- package/dist/esm/Slider/Slider.js.map +1 -1
- package/dist/esm/Slider/SliderInput/SliderInput.js +1 -2
- package/dist/esm/Slider/SliderInput/SliderInput.js.map +1 -1
- package/dist/esm/Slider/utils.js +4 -8
- package/dist/esm/Slider/utils.js.map +1 -1
- package/dist/esm/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/Stack/Stack.js +1 -2
- package/dist/esm/Stack/Stack.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/Table/TableContext.js +1 -2
- package/dist/esm/Table/TableContext.js.map +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/Table/TableRow/TableRow.js.map +1 -1
- package/dist/esm/Table/TableSectionContext.js +1 -2
- package/dist/esm/Table/TableSectionContext.js.map +1 -1
- package/dist/esm/Table/hooks/useBulkActions.js +1 -2
- package/dist/esm/Table/hooks/useBulkActions.js.map +1 -1
- package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
- package/dist/esm/Table/hooks/usePagination.js.map +1 -1
- package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js +5 -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/useSortBy.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/Table/utils/fallbacks.js +1 -2
- package/dist/esm/Table/utils/fallbacks.js.map +1 -1
- package/dist/esm/Tag/Tag.js +2 -4
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.js +2 -3
- package/dist/esm/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/TextArea/TextArea.js +1 -2
- package/dist/esm/TextArea/TextArea.js.map +1 -1
- package/dist/esm/TimeAgo/TimeAgo.js +1 -2
- package/dist/esm/TimeAgo/TimeAgo.js.map +1 -1
- package/dist/esm/TimeAgo/useTimeout.js +1 -2
- package/dist/esm/TimeAgo/useTimeout.js.map +1 -1
- package/dist/esm/TimePicker/Placeholder.js +3 -6
- package/dist/esm/TimePicker/Placeholder.js.map +1 -1
- package/dist/esm/TimePicker/TimePicker.js +3 -6
- package/dist/esm/TimePicker/TimePicker.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.js +2 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/useHvTreeItem.js +2 -4
- package/dist/esm/TreeView/TreeItem/useHvTreeItem.js.map +1 -1
- package/dist/esm/Typography/utils.js +1 -2
- package/dist/esm/Typography/utils.js.map +1 -1
- package/dist/esm/VerticalNavigation/Header/Header.js +1 -2
- package/dist/esm/VerticalNavigation/Header/Header.js.map +1 -1
- package/dist/esm/VerticalNavigation/Navigation/Navigation.js +2 -4
- package/dist/esm/VerticalNavigation/Navigation/Navigation.js.map +1 -1
- package/dist/esm/VerticalNavigation/NavigationSlider/utils/NavigationSlider.utils.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeView.js +3 -6
- package/dist/esm/VerticalNavigation/TreeView/TreeView.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewContext.js.map +1 -1
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js +4 -8
- package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/dist/esm/hooks/useComputation.js.map +1 -1
- package/dist/esm/hooks/useCss.js.map +1 -1
- package/dist/esm/hooks/useForkRef.js.map +1 -1
- package/dist/esm/hooks/useUniqueId.js +1 -2
- package/dist/esm/hooks/useUniqueId.js.map +1 -1
- package/dist/esm/providers/Provider.js +2 -4
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/types/generic.js.map +1 -1
- package/dist/esm/utils/classes.js +6 -3
- package/dist/esm/utils/classes.js.map +1 -1
- package/dist/esm/utils/deepMerge.js +2 -1
- package/dist/esm/utils/deepMerge.js.map +1 -1
- package/dist/esm/utils/helpers.js +1 -2
- package/dist/esm/utils/helpers.js.map +1 -1
- package/dist/esm/utils/theme.js +1 -2
- package/dist/esm/utils/theme.js.map +1 -1
- package/dist/esm/utils/useSavedState.js +1 -2
- package/dist/esm/utils/useSavedState.js.map +1 -1
- package/dist/types/index.d.ts +299 -365
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/Slider/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFormStatus } from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { sliderStyles as styles } from \"./Slider.styles\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n sliderValue: number,\n minPointValue: number,\n stepValue: number,\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n scaledValue: number | undefined,\n minPointValue: number,\n inverseStepValue: number,\n): number =>\n typeof scaledValue === \"number\"\n ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n values: (number | undefined)[],\n inverseStepValue: number,\n minPointValue: number,\n): number[] => {\n const knobsPositions: number[] = [];\n\n values.forEach((value, index) => {\n knobsPositions[index] = scaledValueToKnobsPositionValue(\n value,\n minPointValue,\n inverseStepValue,\n );\n });\n\n return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n knobPositions: number[],\n stepValue: number,\n minPointValue: number,\n): number[] => {\n const knobsValues: number[] = [];\n\n knobPositions.forEach((value, index) => {\n knobsValues[index] = knobsPositionToScaledValue(\n value,\n minPointValue,\n stepValue,\n );\n });\n\n return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n maxPointValue: number,\n minPointValue: number,\n divisionQuantity: number,\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markstep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n markProperties: HvMarkProperty[],\n markstep: number,\n divisionQuantity: number,\n minPointValue: number,\n maxPointValue: number,\n stepValue: number,\n markDigits: number,\n disabled: boolean,\n formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark,\n): Record<number, { label: string; style: React.CSSProperties }> => {\n const marks: Record<number, { label: string; style: React.CSSProperties }> =\n {};\n\n const values: string[] = [];\n\n if (markProperties.length > 0) {\n markProperties.forEach((markProperty) => {\n if (typeof markProperty.position === \"number\") {\n marks[markProperty.position] = disabled\n ? {\n label: `${markProperty.label}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${markProperty.label}`,\n style: {\n ...styles.mark,\n },\n };\n }\n });\n } else {\n const roundedMarkStep = Math.floor(markstep);\n\n for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n let labelValue: React.ReactNode = knobsPositionToScaledValue(\n index,\n minPointValue,\n stepValue,\n ).toFixed(markDigits);\n\n values.push(labelValue as string);\n labelValue = formatMark?.(labelValue) || labelValue;\n\n marks[index] = disabled\n ? {\n label: `${labelValue}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${labelValue}`,\n style: {\n ...styles.mark,\n },\n };\n }\n\n if (!values.includes(maxPointValue.toString())) {\n const lastMarkPosition = knobsValuesToKnobsPositions(\n [maxPointValue],\n 1 / stepValue,\n minPointValue,\n );\n\n const lastMarkLabel = formatMark?.(maxPointValue.toFixed(markDigits));\n marks[lastMarkPosition[0]] = disabled\n ? {\n label: `${lastMarkLabel}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${lastMarkLabel}`,\n style: {\n ...styles.mark,\n },\n };\n }\n }\n\n return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n knobProperties: HvKnobProperty[],\n): React.CSSProperties[] => {\n const trackStyles: React.CSSProperties[] = [];\n\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n trackStyles[index] = { ...styles.track };\n if (knobProperty.color) {\n trackStyles[index].backgroundColor = knobProperty.trackColor;\n }\n });\n }\n\n return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n knobProperties: HvKnobProperty[],\n): {\n knobInner: React.CSSProperties[];\n knobOuterStyle: React.CSSProperties[];\n} => {\n const knobInner: React.CSSProperties[] = [];\n const knobOuterStyle: React.CSSProperties[] = [];\n\n const lastItem = knobProperties.length - 1;\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n knobInner[index] = { ...styles.knobInner };\n knobOuterStyle[index] = { ...styles.knobOuter };\n\n if (knobProperty.color) {\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index].backgroundColor = \"transparent\";\n }\n\n if (knobProperty.hidden) {\n knobInner[index] = styles.knobHidden;\n if (index === lastItem) {\n knobInner[index] = { ...styles.knobHiddenLast };\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index] = { ...styles.knobHidden };\n knobOuterStyle[index].backgroundColor = knobProperty.color;\n }\n }\n });\n }\n\n return {\n knobInner,\n knobOuterStyle,\n };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n values: number[],\n defaultValues: (number | undefined)[],\n): boolean => {\n if (!(values?.length > 1)) {\n return defaultValues.length === 1;\n }\n return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n numberOfKnobs = 1,\n disabled = false,\n knobPropertiesProp?: HvKnobProperty[],\n): HvKnobProperty[] => {\n let knobProperties = knobPropertiesProp || [];\n\n const defaultKnobStyles = {\n color: theme.colors.secondary,\n hoverColor: theme.colors.secondary,\n trackColor: theme.colors.secondary,\n dragColor: theme.colors.secondary,\n knobRingColor: theme.colors.atmo1,\n };\n\n const disabledKnobStyles = {\n color: theme.colors.secondary_60,\n hoverColor: theme.colors.secondary_60,\n trackColor: theme.colors.secondary_60,\n dragColor: theme.colors.secondary_60,\n knobRingColor: theme.colors.secondary_60,\n };\n\n if (knobProperties.length > 0) {\n knobProperties = knobProperties.slice(0, numberOfKnobs);\n knobProperties = knobProperties.map((knobProperty) => {\n if (!disabled) {\n return {\n ...disabledKnobStyles,\n ...knobProperty,\n };\n }\n return {\n ...defaultKnobStyles,\n ...knobProperty,\n };\n });\n } else {\n for (let i = 0; i < numberOfKnobs; i += 1) {\n if (!disabled) knobProperties.push(defaultKnobStyles);\n if (disabled) knobProperties.push(disabledKnobStyles);\n }\n }\n\n return knobProperties;\n};\n\nconst pushSlider = (\n index: number,\n inputIndex: number,\n inputValue: number,\n): number => {\n const difference = index - inputIndex;\n\n return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n knobPositions: number[],\n inputIndex: number,\n): number[] => {\n const newKnobsPosition: number[] = [...knobPositions];\n\n newKnobsPosition.forEach((value, index) => {\n if (Number.isNaN(value) || value == null) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex],\n );\n } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex],\n );\n } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex],\n );\n }\n });\n\n return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n length: number,\n status?: HvFormStatus | HvFormStatus[],\n): {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n const result: {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n } = {\n arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n };\n\n if (status == null) {\n return result;\n }\n if (!Array.isArray(status)) {\n result.arrayStatus = Array.from({ length }, () => status);\n return result;\n }\n result.arrayStatus = status;\n\n return result;\n};\n\nexport const statusArrayToFormStatus = (\n arrayStatus: HvFormStatus[],\n): keyof typeof validationStates => {\n const invalid = arrayStatus.some(\n (status) => status === validationStates.invalid,\n );\n\n if (invalid) return validationStates.invalid;\n\n const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n if (valid) return validationStates.valid;\n\n return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n knobsValues: number[],\n markDigits: number,\n): string[] =>\n knobsValues.map((knobValue) =>\n Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits),\n );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["styles","validationStates"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/Slider/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFormStatus } from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { sliderStyles as styles } from \"./Slider.styles\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n sliderValue: number,\n minPointValue: number,\n stepValue: number,\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n scaledValue: number | undefined,\n minPointValue: number,\n inverseStepValue: number,\n): number =>\n typeof scaledValue === \"number\"\n ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n values: (number | undefined)[],\n inverseStepValue: number,\n minPointValue: number,\n): number[] => {\n const knobsPositions: number[] = [];\n\n values.forEach((value, index) => {\n knobsPositions[index] = scaledValueToKnobsPositionValue(\n value,\n minPointValue,\n inverseStepValue,\n );\n });\n\n return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n knobPositions: number[],\n stepValue: number,\n minPointValue: number,\n): number[] => {\n const knobsValues: number[] = [];\n\n knobPositions.forEach((value, index) => {\n knobsValues[index] = knobsPositionToScaledValue(\n value,\n minPointValue,\n stepValue,\n );\n });\n\n return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n maxPointValue: number,\n minPointValue: number,\n divisionQuantity: number,\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markstep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n markProperties: HvMarkProperty[],\n markstep: number,\n divisionQuantity: number,\n minPointValue: number,\n maxPointValue: number,\n stepValue: number,\n markDigits: number,\n disabled: boolean,\n formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark,\n): Record<number, { label: string; style: React.CSSProperties }> => {\n const marks: Record<number, { label: string; style: React.CSSProperties }> =\n {};\n\n const values: string[] = [];\n\n if (markProperties.length > 0) {\n markProperties.forEach((markProperty) => {\n if (typeof markProperty.position === \"number\") {\n marks[markProperty.position] = disabled\n ? {\n label: `${markProperty.label}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${markProperty.label}`,\n style: {\n ...styles.mark,\n },\n };\n }\n });\n } else {\n const roundedMarkStep = Math.floor(markstep);\n\n for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n let labelValue: React.ReactNode = knobsPositionToScaledValue(\n index,\n minPointValue,\n stepValue,\n ).toFixed(markDigits);\n\n values.push(labelValue as string);\n labelValue = formatMark?.(labelValue) || labelValue;\n\n marks[index] = disabled\n ? {\n label: `${labelValue}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${labelValue}`,\n style: {\n ...styles.mark,\n },\n };\n }\n\n if (!values.includes(maxPointValue.toString())) {\n const lastMarkPosition = knobsValuesToKnobsPositions(\n [maxPointValue],\n 1 / stepValue,\n minPointValue,\n );\n\n const lastMarkLabel = formatMark?.(maxPointValue.toFixed(markDigits));\n marks[lastMarkPosition[0]] = disabled\n ? {\n label: `${lastMarkLabel}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${lastMarkLabel}`,\n style: {\n ...styles.mark,\n },\n };\n }\n }\n\n return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n knobProperties: HvKnobProperty[],\n): React.CSSProperties[] => {\n const trackStyles: React.CSSProperties[] = [];\n\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n trackStyles[index] = { ...styles.track };\n if (knobProperty.color) {\n trackStyles[index].backgroundColor = knobProperty.trackColor;\n }\n });\n }\n\n return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n knobProperties: HvKnobProperty[],\n): {\n knobInner: React.CSSProperties[];\n knobOuterStyle: React.CSSProperties[];\n} => {\n const knobInner: React.CSSProperties[] = [];\n const knobOuterStyle: React.CSSProperties[] = [];\n\n const lastItem = knobProperties.length - 1;\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n knobInner[index] = { ...styles.knobInner };\n knobOuterStyle[index] = { ...styles.knobOuter };\n\n if (knobProperty.color) {\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index].backgroundColor = \"transparent\";\n }\n\n if (knobProperty.hidden) {\n knobInner[index] = styles.knobHidden;\n if (index === lastItem) {\n knobInner[index] = { ...styles.knobHiddenLast };\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index] = { ...styles.knobHidden };\n knobOuterStyle[index].backgroundColor = knobProperty.color;\n }\n }\n });\n }\n\n return {\n knobInner,\n knobOuterStyle,\n };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n values: number[],\n defaultValues: (number | undefined)[],\n): boolean => {\n if (!(values?.length > 1)) {\n return defaultValues.length === 1;\n }\n return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n numberOfKnobs = 1,\n disabled = false,\n knobPropertiesProp?: HvKnobProperty[],\n): HvKnobProperty[] => {\n let knobProperties = knobPropertiesProp || [];\n\n const defaultKnobStyles = {\n color: theme.colors.secondary,\n hoverColor: theme.colors.secondary,\n trackColor: theme.colors.secondary,\n dragColor: theme.colors.secondary,\n knobRingColor: theme.colors.atmo1,\n };\n\n const disabledKnobStyles = {\n color: theme.colors.secondary_60,\n hoverColor: theme.colors.secondary_60,\n trackColor: theme.colors.secondary_60,\n dragColor: theme.colors.secondary_60,\n knobRingColor: theme.colors.secondary_60,\n };\n\n if (knobProperties.length > 0) {\n knobProperties = knobProperties.slice(0, numberOfKnobs);\n knobProperties = knobProperties.map((knobProperty) => {\n if (!disabled) {\n return {\n ...disabledKnobStyles,\n ...knobProperty,\n };\n }\n return {\n ...defaultKnobStyles,\n ...knobProperty,\n };\n });\n } else {\n for (let i = 0; i < numberOfKnobs; i += 1) {\n if (!disabled) knobProperties.push(defaultKnobStyles);\n if (disabled) knobProperties.push(disabledKnobStyles);\n }\n }\n\n return knobProperties;\n};\n\nconst pushSlider = (\n index: number,\n inputIndex: number,\n inputValue: number,\n): number => {\n const difference = index - inputIndex;\n\n return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n knobPositions: number[],\n inputIndex: number,\n): number[] => {\n const newKnobsPosition: number[] = [...knobPositions];\n\n newKnobsPosition.forEach((value, index) => {\n if (Number.isNaN(value) || value == null) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex],\n );\n } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex],\n );\n } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex],\n );\n }\n });\n\n return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n length: number,\n status?: HvFormStatus | HvFormStatus[],\n): {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n const result: {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n } = {\n arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n };\n\n if (status == null) {\n return result;\n }\n if (!Array.isArray(status)) {\n result.arrayStatus = Array.from({ length }, () => status);\n return result;\n }\n result.arrayStatus = status;\n\n return result;\n};\n\nexport const statusArrayToFormStatus = (\n arrayStatus: HvFormStatus[],\n): keyof typeof validationStates => {\n const invalid = arrayStatus.some(\n (status) => status === validationStates.invalid,\n );\n\n if (invalid) return validationStates.invalid;\n\n const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n if (valid) return validationStates.valid;\n\n return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n knobsValues: number[],\n markDigits: number,\n): string[] =>\n knobsValues.map((knobValue) =>\n Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits),\n );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["styles","validationStates"],"mappings":";;;AAcO,MAAM,6BAA6B,CACxC,aACA,eACA,cACW,gBAAgB,YAAY;AAWlC,MAAM,kCAAkC,CAC7C,aACA,eACA,qBAEA,OAAO,gBAAgB,WACnB,KAAK,OAAO,cAAc,iBAAiB,gBAAgB,IAC3D;AAYC,MAAM,8BAA8B,CACzC,QACA,kBACA,kBACa;AACb,QAAM,iBAA2B,CAAA;AAE1B,SAAA,QAAQ,CAAC,OAAO,UAAU;AAC/B,mBAAe,KAAK,IAAI;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF,CACD;AAEM,SAAA;AACT;AAYO,MAAM,8BAA8B,CACzC,eACA,WACA,kBACa;AACb,QAAM,cAAwB,CAAA;AAEhB,gBAAA,QAAQ,CAAC,OAAO,UAAU;AACtC,gBAAY,KAAK,IAAI;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF,CACD;AAEM,SAAA;AACT;AASa,MAAA,qBAAqB,CAChC,eACA,eACA,qBACW,KAAK,IAAI,gBAAgB,aAAa,IAAI;AAmBhD,MAAM,aAAa,CACxB,gBACA,UACA,kBACA,eACA,eACA,WACA,YACA,UACA,aAA0D,CAAC,SAAS,SACF;AAClE,QAAM,QACJ,CAAA;AAEF,QAAM,SAAmB,CAAA;AAErB,MAAA,eAAe,SAAS,GAAG;AACd,mBAAA,QAAQ,CAAC,iBAAiB;AACnC,UAAA,OAAO,aAAa,aAAa,UAAU;AACvC,cAAA,aAAa,QAAQ,IAAI,WAC3B;AAAA,UACE,OAAO,GAAG,aAAa,KAAK;AAAA,UAC5B,OAAO;AAAA,YACL,GAAGA,aAAO;AAAA,UACZ;AAAA,QAAA,IAEF;AAAA,UACE,OAAO,GAAG,aAAa,KAAK;AAAA,UAC5B,OAAO;AAAA,YACL,GAAGA,aAAO;AAAA,UACZ;AAAA,QAAA;AAAA,MAER;AAAA,IAAA,CACD;AAAA,EAAA,OACI;AACC,UAAA,kBAAkB,KAAK,MAAM,QAAQ;AAE3C,aAAS,QAAQ,GAAG,SAAS,kBAAkB,SAAS,iBAAiB;AACvE,UAAI,aAA8B;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,MAAA,EACA,QAAQ,UAAU;AAEpB,aAAO,KAAK,UAAoB;AACnB,mBAAA,aAAa,UAAU,KAAK;AAEnC,YAAA,KAAK,IAAI,WACX;AAAA,QACE,OAAO,GAAG,UAAU;AAAA,QACpB,OAAO;AAAA,UACL,GAAGA,aAAO;AAAA,QACZ;AAAA,MAAA,IAEF;AAAA,QACE,OAAO,GAAG,UAAU;AAAA,QACpB,OAAO;AAAA,UACL,GAAGA,aAAO;AAAA,QACZ;AAAA,MAAA;AAAA,IAER;AAEA,QAAI,CAAC,OAAO,SAAS,cAAc,SAAU,CAAA,GAAG;AAC9C,YAAM,mBAAmB;AAAA,QACvB,CAAC,aAAa;AAAA,QACd,IAAI;AAAA,QACJ;AAAA,MAAA;AAGF,YAAM,gBAAgB,aAAa,cAAc,QAAQ,UAAU,CAAC;AACpE,YAAM,iBAAiB,CAAC,CAAC,IAAI,WACzB;AAAA,QACE,OAAO,GAAG,aAAa;AAAA,QACvB,OAAO;AAAA,UACL,GAAGA,aAAO;AAAA,QACZ;AAAA,MAAA,IAEF;AAAA,QACE,OAAO,GAAG,aAAa;AAAA,QACvB,OAAO;AAAA,UACL,GAAGA,aAAO;AAAA,QACZ;AAAA,MAAA;AAAA,IAER;AAAA,EACF;AAEO,SAAA;AACT;AAWa,MAAA,oBAAoB,CAC/B,mBAC0B;AAC1B,QAAM,cAAqC,CAAA;AAEvC,MAAA,eAAe,SAAS,GAAG;AACd,mBAAA,QAAQ,CAAC,cAAc,UAAU;AAC9C,kBAAY,KAAK,IAAI,EAAE,GAAGA,aAAO,MAAM;AACvC,UAAI,aAAa,OAAO;AACV,oBAAA,KAAK,EAAE,kBAAkB,aAAa;AAAA,MACpD;AAAA,IAAA,CACD;AAAA,EACH;AAEO,SAAA;AACT;AAWa,MAAA,mBAAmB,CAC9B,mBAIG;AACH,QAAM,YAAmC,CAAA;AACzC,QAAM,iBAAwC,CAAA;AAExC,QAAA,WAAW,eAAe,SAAS;AACrC,MAAA,eAAe,SAAS,GAAG;AACd,mBAAA,QAAQ,CAAC,cAAc,UAAU;AAC9C,gBAAU,KAAK,IAAI,EAAE,GAAGA,aAAO,UAAU;AACzC,qBAAe,KAAK,IAAI,EAAE,GAAGA,aAAO,UAAU;AAE9C,UAAI,aAAa,OAAO;AACZ,kBAAA,KAAK,EAAE,kBAAkB,aAAa;AACjC,uBAAA,KAAK,EAAE,kBAAkB;AAAA,MAC1C;AAEA,UAAI,aAAa,QAAQ;AACb,kBAAA,KAAK,IAAIA,aAAO;AAC1B,YAAI,UAAU,UAAU;AACtB,oBAAU,KAAK,IAAI,EAAE,GAAGA,aAAO,eAAe;AACpC,oBAAA,KAAK,EAAE,kBAAkB,aAAa;AAChD,yBAAe,KAAK,IAAI,EAAE,GAAGA,aAAO,WAAW;AAChC,yBAAA,KAAK,EAAE,kBAAkB,aAAa;AAAA,QACvD;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;AASa,MAAA,iBAAiB,CAC5B,QACA,kBACY;AACR,MAAA,EAAE,QAAQ,SAAS,IAAI;AACzB,WAAO,cAAc,WAAW;AAAA,EAClC;AACA,SAAO,OAAO,WAAW;AAC3B;AAaO,MAAM,gCAAgC,CAC3C,gBAAgB,GAChB,WAAW,OACX,uBACqB;AACjB,MAAA,iBAAiB,sBAAsB;AAE3C,QAAM,oBAAoB;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY,MAAM,OAAO;AAAA,IACzB,WAAW,MAAM,OAAO;AAAA,IACxB,eAAe,MAAM,OAAO;AAAA,EAAA;AAG9B,QAAM,qBAAqB;AAAA,IACzB,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY,MAAM,OAAO;AAAA,IACzB,WAAW,MAAM,OAAO;AAAA,IACxB,eAAe,MAAM,OAAO;AAAA,EAAA;AAG1B,MAAA,eAAe,SAAS,GAAG;AACZ,qBAAA,eAAe,MAAM,GAAG,aAAa;AACrC,qBAAA,eAAe,IAAI,CAAC,iBAAiB;AACpD,UAAI,CAAC,UAAU;AACN,eAAA;AAAA,UACL,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MAEP;AACO,aAAA;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,IACL,CACD;AAAA,EAAA,OACI;AACL,aAAS,IAAI,GAAG,IAAI,eAAe,KAAK,GAAG;AACzC,UAAI,CAAC,SAAyB,gBAAA,KAAK,iBAAiB;AAChD,UAAA,SAAyB,gBAAA,KAAK,kBAAkB;AAAA,IACtD;AAAA,EACF;AAEO,SAAA;AACT;AAEA,MAAM,aAAa,CACjB,OACA,YACA,eACW;AACX,QAAM,aAAa,QAAQ;AAE3B,SAAO,aAAa;AACtB;AAEa,MAAA,0BAA0B,CACrC,eACA,eACa;AACP,QAAA,mBAA6B,CAAC,GAAG,aAAa;AAEnC,mBAAA,QAAQ,CAAC,OAAO,UAAU;AACzC,QAAI,OAAO,MAAM,KAAK,KAAK,SAAS,MAAM;AACxC,uBAAiB,KAAK,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,iBAAiB,UAAU;AAAA,MAAA;AAAA,IAC7B,WACS,QAAQ,cAAc,QAAQ,iBAAiB,UAAU,GAAG;AACrE,uBAAiB,KAAK,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,iBAAiB,UAAU;AAAA,MAAA;AAAA,IAC7B,WACS,QAAQ,cAAc,QAAQ,iBAAiB,UAAU,GAAG;AACrE,uBAAiB,KAAK,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,iBAAiB,UAAU;AAAA,MAAA;AAAA,IAE/B;AAAA,EAAA,CACD;AAEM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAClC,QACA,WAIG;AACH,QAAM,SAGF;AAAA,IACF,oBAAoB,MAAM,KAAK,EAAE,UAAU,MAAMC,gBAAiB,OAAO;AAAA,EAAA;AAG3E,MAAI,UAAU,MAAM;AACX,WAAA;AAAA,EACT;AACA,MAAI,CAAC,MAAM,QAAQ,MAAM,GAAG;AAC1B,WAAO,cAAc,MAAM,KAAK,EAAE,OAAO,GAAG,MAAM,MAAM;AACjD,WAAA;AAAA,EACT;AACA,SAAO,cAAc;AAEd,SAAA;AACT;AAEa,MAAA,0BAA0B,CACrC,gBACkC;AAClC,QAAM,UAAU,YAAY;AAAA,IAC1B,CAAC,WAAW,WAAWA,gBAAiB;AAAA,EAAA;AAGtC,MAAA,gBAAgBA,gBAAiB;AAErC,QAAM,QAAQ,YAAY,KAAK,CAAC,WAAW,WAAWA,gBAAiB,KAAK;AAExE,MAAA,cAAcA,gBAAiB;AAEnC,SAAOA,gBAAiB;AAC1B;AAEO,MAAM,sBAAsB,CACjC,aACA,eAEA,YAAY;AAAA,EAAI,CAAC,cACf,OAAO,MAAM,SAAS,IAAI,KAAK,UAAU,QAAQ,UAAU;AAC7D;AAEW,MAAA,sBAAsB,CAAC,iBAClC,aAAa,IAAI,CAAC,eAAe,WAAW,UAAU,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n SnackbarProps as MuiSnackbarProps,\n SnackbarCloseReason,\n SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"./SnackbarContent\";\nimport { HvSnackbarVariant } from \"./types\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" | \"classes\" | \"children\"> {\n /** If true, Snackbar is open. */\n open?: boolean;\n /**\n * Callback fired when the component requests to be closed.\n * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n * */\n onClose?: (\n event: Event | React.SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason,\n ) => void;\n /** The message to display. */\n label?: React.ReactNode;\n /**\n * The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\", \"center\", \"right\".\n * It defines where the snackbar will end his animation */\n anchorOrigin?: SnackbarOrigin;\n /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n autoHideDuration?: number;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /**\n * The callback function called when an action is triggered, receiving `action` as parameter.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /** The callback function called when an action is triggered, receiving `action` as parameter. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** Duration of transition in milliseconds. */\n transitionDuration?: number;\n /** Direction of slide transition. */\n transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n /** The container the snackbar should slide from. */\n container?: SlideProps[\"container\"];\n /** Custom offset from top/bottom of the page, in px. */\n offset?: number;\n /** Others applied to the content of the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSnackbarClasses;\n /** @ignore */\n ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components.\n * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.\n * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = ({\n classes: classesProp,\n className,\n id,\n open = false,\n onClose,\n label = \"\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n autoHideDuration = 5000,\n variant = \"default\",\n showIcon = false,\n customIcon = null,\n action = null,\n actionCallback, // TODO - remove in v6\n onAction,\n transitionDuration = 300,\n transitionDirection = \"left\",\n container,\n offset = 60,\n snackbarContentProps,\n ...others\n}: HvSnackbarProps) => {\n const { classes } = useClasses(classesProp);\n\n const anchorOriginOffset = {\n anchorOriginTop: {\n top: `${offset}px`,\n },\n anchorOriginBottom: {\n bottom: `${offset}px`,\n },\n };\n\n const SlideTransition = useCallback<\n NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n >(\n (properties) => (\n <Slide\n {...properties}\n container={container}\n direction={transitionDirection}\n />\n ),\n [container, transitionDirection],\n );\n\n return (\n <MuiSnackbar\n style={\n anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n }\n classes={classes}\n className={className}\n id={id}\n anchorOrigin={anchorOrigin}\n open={open}\n onClose={onClose}\n autoHideDuration={autoHideDuration}\n transitionDuration={transitionDuration}\n TransitionComponent={SlideTransition}\n {...others}\n >\n <HvSnackbarContent\n id={setId(id, \"content\")}\n label={label}\n variant={variant}\n customIcon={customIcon}\n showIcon={showIcon}\n action={action}\n actionCallback={actionCallback}\n onAction={onAction}\n {...snackbarContentProps}\n />\n </MuiSnackbar>\n );\n};\n"],"names":["MuiSnackbar"],"mappings":";;;;;;;;;AAiFO,MAAM,aAAa,CAAC;AAAA,EACzB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,EACtD,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT;AAAA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,EAAA;AAGF,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EAAA;AAI/B,SAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,OACE,
|
|
1
|
+
{"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n SnackbarProps as MuiSnackbarProps,\n SnackbarCloseReason,\n SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"./SnackbarContent\";\nimport { HvSnackbarVariant } from \"./types\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n extends Omit<MuiSnackbarProps, \"action\" | \"classes\" | \"children\"> {\n /** If true, Snackbar is open. */\n open?: boolean;\n /**\n * Callback fired when the component requests to be closed.\n * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n * */\n onClose?: (\n event: Event | React.SyntheticEvent<any, Event>,\n reason: SnackbarCloseReason,\n ) => void;\n /** The message to display. */\n label?: React.ReactNode;\n /**\n * The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\", \"center\", \"right\".\n * It defines where the snackbar will end his animation */\n anchorOrigin?: SnackbarOrigin;\n /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n autoHideDuration?: number;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\n /** Custom icon to replace the variant default. */\n customIcon?: React.ReactNode;\n /** Controls if the associated icon to the variant should be shown. */\n showIcon?: boolean;\n /** Action to display. */\n action?: React.ReactNode | HvActionGeneric;\n /**\n * The callback function called when an action is triggered, receiving `action` as parameter.\n *\n * @deprecated Use `onAction` instead.\n * */\n actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /** The callback function called when an action is triggered, receiving `action` as parameter. */\n onAction?: HvActionsGenericProps[\"onAction\"];\n /** Duration of transition in milliseconds. */\n transitionDuration?: number;\n /** Direction of slide transition. */\n transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n /** The container the snackbar should slide from. */\n container?: SlideProps[\"container\"];\n /** Custom offset from top/bottom of the page, in px. */\n offset?: number;\n /** Others applied to the content of the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSnackbarClasses;\n /** @ignore */\n ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components.\n * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.\n * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = ({\n classes: classesProp,\n className,\n id,\n open = false,\n onClose,\n label = \"\",\n anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n autoHideDuration = 5000,\n variant = \"default\",\n showIcon = false,\n customIcon = null,\n action = null,\n actionCallback, // TODO - remove in v6\n onAction,\n transitionDuration = 300,\n transitionDirection = \"left\",\n container,\n offset = 60,\n snackbarContentProps,\n ...others\n}: HvSnackbarProps) => {\n const { classes } = useClasses(classesProp);\n\n const anchorOriginOffset = {\n anchorOriginTop: {\n top: `${offset}px`,\n },\n anchorOriginBottom: {\n bottom: `${offset}px`,\n },\n };\n\n const SlideTransition = useCallback<\n NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n >(\n (properties) => (\n <Slide\n {...properties}\n container={container}\n direction={transitionDirection}\n />\n ),\n [container, transitionDirection],\n );\n\n return (\n <MuiSnackbar\n style={\n anchorOriginOffset[\n `anchorOrigin${capitalize(anchorOrigin.vertical)}` as keyof typeof anchorOriginOffset\n ]\n }\n classes={classes}\n className={className}\n id={id}\n anchorOrigin={anchorOrigin}\n open={open}\n onClose={onClose}\n autoHideDuration={autoHideDuration}\n transitionDuration={transitionDuration}\n TransitionComponent={SlideTransition}\n {...others}\n >\n <HvSnackbarContent\n id={setId(id, \"content\")}\n label={label}\n variant={variant}\n customIcon={customIcon}\n showIcon={showIcon}\n action={action}\n actionCallback={actionCallback}\n onAction={onAction}\n {...snackbarContentProps}\n />\n </MuiSnackbar>\n );\n};\n"],"names":["MuiSnackbar"],"mappings":";;;;;;;;;AAiFO,MAAM,aAAa,CAAC;AAAA,EACzB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,EACtD,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT;AAAA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,EAAA;AAGF,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EAAA;AAI/B,SAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,OACE,mBACE,eAAe,WAAW,aAAa,QAAQ,CAAC,EAClD;AAAA,MAEF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/dist/esm/Stack/Stack.js
CHANGED
|
@@ -8,8 +8,7 @@ import { useClasses } from "./Stack.styles.js";
|
|
|
8
8
|
import { staticClasses } from "./Stack.styles.js";
|
|
9
9
|
import { HvFocus } from "../Focus/Focus.js";
|
|
10
10
|
const getDirection = (direction, width, breakpoints) => {
|
|
11
|
-
if (typeof direction === "string")
|
|
12
|
-
return direction;
|
|
11
|
+
if (typeof direction === "string") return direction;
|
|
13
12
|
for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {
|
|
14
13
|
if (direction[breakpoints[i]] !== void 0) {
|
|
15
14
|
return direction[breakpoints[i]];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sources":["../../../src/Stack/Stack.tsx"],"sourcesContent":["import { Children, useCallback, useMemo, useRef } from \"react\";\nimport MuiDivider, {\n DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFocus } from \"../Focus\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useWidth } from \"../hooks/useWidth\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Stack.styles\";\n\nexport { staticClasses as stackClasses };\n\nexport type HvStackClasses = ExtractNames<typeof useClasses>;\n\nexport type HvStackDirection = \"column\" | \"row\" | Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. */\n direction?: HvStackDirection;\n /** The spacing between elements of the stack. */\n spacing?: HvBreakpoints;\n /** The divider component to be used between the stack elements.\n * - If `true` the Material-UI Divider component will be used.\n * - If a React node is passed then the custom divider will be used.\n */\n divider?: boolean | React.ReactNode;\n /** The properties to pass on to the Material-UI component. */\n dividerProps?: MuiDividerProps;\n /** Sets whether or not there should be arrow navigation between the stack elements. */\n withNavigation?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvStackClasses;\n}\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n * `direction` property is a string and a valid direction then we\n * use it. If it's an object with multiple directions by breakpoint\n * we use the appropriate one or search for the nearest breakpoint\n * smaller than the current one to use.\n */\nconst getDirection = (direction: any, width: any, breakpoints: any) => {\n if (typeof direction === \"string\") return direction;\n\n for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n if (direction[breakpoints[i]] !== undefined) {\n return direction[breakpoints[i]];\n }\n }\n return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n */\nexport const HvStack = (props: HvStackProps) => {\n const {\n classes: classesProp,\n className,\n children,\n direction: directionProp = \"column\",\n spacing = \"sm\",\n divider = false,\n withNavigation = false,\n dividerProps = {},\n ...others\n } = useDefaultProps(\"HvStack\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const width = useWidth();\n const containerRef = useRef(null);\n const { breakpoints } = useTheme();\n\n const direction = useMemo(\n () => getDirection(directionProp, width, breakpoints.keys),\n [directionProp, width, breakpoints],\n );\n\n /**\n * @returns {node} - The divider component to use. If the property `divider` is\n * set to `true` then the Material-UI divider is used, otherwise\n * we use the custom divider the user passed.\n */\n const getDividerComponent = useCallback(() => {\n if (typeof divider === \"boolean\" && divider) {\n return (\n <MuiDivider\n orientation={direction === \"column\" ? \"horizontal\" : \"vertical\"}\n flexItem={direction === \"row\"}\n classes={{\n root: classes.divider,\n }}\n {...dividerProps}\n />\n );\n }\n return divider;\n }, [classes.divider, divider, dividerProps, direction]);\n\n return (\n <div\n ref={containerRef}\n className={cx(\n classes.root,\n classes[direction],\n classes[spacing],\n className,\n )}\n {...others}\n >\n {Children.map(children, (child, i) => {\n return (\n <>\n {divider && i !== 0 && getDividerComponent()}\n {withNavigation ? (\n <HvFocus\n rootRef={containerRef}\n focusDisabled={false}\n strategy=\"grid\"\n navigationJump={\n direction === \"column\" ? 1 : Children.count(children) || 0\n }\n filterClass=\"child\"\n >\n <div className=\"child\">{child}</div>\n </HvFocus>\n ) : (\n child\n )}\n </>\n );\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8CA,MAAM,eAAe,CAAC,WAAgB,OAAY,gBAAqB;
|
|
1
|
+
{"version":3,"file":"Stack.js","sources":["../../../src/Stack/Stack.tsx"],"sourcesContent":["import { Children, useCallback, useMemo, useRef } from \"react\";\nimport MuiDivider, {\n DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFocus } from \"../Focus\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useWidth } from \"../hooks/useWidth\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Stack.styles\";\n\nexport { staticClasses as stackClasses };\n\nexport type HvStackClasses = ExtractNames<typeof useClasses>;\n\nexport type HvStackDirection = \"column\" | \"row\" | Partial<HvStackBreakpoints>;\nexport interface HvStackBreakpoints extends Record<HvBreakpoints, string> {}\n\nexport interface HvStackProps extends HvBaseProps {\n /** The direction of the stack. Can be either a string or an object that states the direction for each breakpoint. */\n direction?: HvStackDirection;\n /** The spacing between elements of the stack. */\n spacing?: HvBreakpoints;\n /** The divider component to be used between the stack elements.\n * - If `true` the Material-UI Divider component will be used.\n * - If a React node is passed then the custom divider will be used.\n */\n divider?: boolean | React.ReactNode;\n /** The properties to pass on to the Material-UI component. */\n dividerProps?: MuiDividerProps;\n /** Sets whether or not there should be arrow navigation between the stack elements. */\n withNavigation?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvStackClasses;\n}\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n * `direction` property is a string and a valid direction then we\n * use it. If it's an object with multiple directions by breakpoint\n * we use the appropriate one or search for the nearest breakpoint\n * smaller than the current one to use.\n */\nconst getDirection = (direction: any, width: any, breakpoints: any) => {\n if (typeof direction === \"string\") return direction;\n\n for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n if (direction[breakpoints[i]] !== undefined) {\n return direction[breakpoints[i]];\n }\n }\n return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.\n */\nexport const HvStack = (props: HvStackProps) => {\n const {\n classes: classesProp,\n className,\n children,\n direction: directionProp = \"column\",\n spacing = \"sm\",\n divider = false,\n withNavigation = false,\n dividerProps = {},\n ...others\n } = useDefaultProps(\"HvStack\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const width = useWidth();\n const containerRef = useRef(null);\n const { breakpoints } = useTheme();\n\n const direction = useMemo(\n () => getDirection(directionProp, width, breakpoints.keys),\n [directionProp, width, breakpoints],\n );\n\n /**\n * @returns {node} - The divider component to use. If the property `divider` is\n * set to `true` then the Material-UI divider is used, otherwise\n * we use the custom divider the user passed.\n */\n const getDividerComponent = useCallback(() => {\n if (typeof divider === \"boolean\" && divider) {\n return (\n <MuiDivider\n orientation={direction === \"column\" ? \"horizontal\" : \"vertical\"}\n flexItem={direction === \"row\"}\n classes={{\n root: classes.divider,\n }}\n {...dividerProps}\n />\n );\n }\n return divider;\n }, [classes.divider, divider, dividerProps, direction]);\n\n return (\n <div\n ref={containerRef}\n className={cx(\n classes.root,\n classes[direction as keyof HvStackClasses],\n classes[spacing],\n className,\n )}\n {...others}\n >\n {Children.map(children, (child, i) => {\n return (\n <>\n {divider && i !== 0 && getDividerComponent()}\n {withNavigation ? (\n <HvFocus\n rootRef={containerRef}\n focusDisabled={false}\n strategy=\"grid\"\n navigationJump={\n direction === \"column\" ? 1 : Children.count(children) || 0\n }\n filterClass=\"child\"\n >\n <div className=\"child\">{child}</div>\n </HvFocus>\n ) : (\n child\n )}\n </>\n );\n })}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8CA,MAAM,eAAe,CAAC,WAAgB,OAAY,gBAAqB;AACjE,MAAA,OAAO,cAAc,SAAiB,QAAA;AAEjC,WAAA,IAAI,YAAY,QAAQ,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG;AACvD,QAAI,UAAU,YAAY,CAAC,CAAC,MAAM,QAAW;AACpC,aAAA,UAAU,YAAY,CAAC,CAAC;AAAA,IACjC;AAAA,EACF;AACO,SAAA;AACT;AAOa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,UAAU;AAAA,IACV,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,eAAe,CAAC;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,QAAQ;AACR,QAAA,eAAe,OAAO,IAAI;AAC1B,QAAA,EAAE,gBAAgB;AAExB,QAAM,YAAY;AAAA,IAChB,MAAM,aAAa,eAAe,OAAO,YAAY,IAAI;AAAA,IACzD,CAAC,eAAe,OAAO,WAAW;AAAA,EAAA;AAQ9B,QAAA,sBAAsB,YAAY,MAAM;AACxC,QAAA,OAAO,YAAY,aAAa,SAAS;AAEzC,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,cAAc,WAAW,eAAe;AAAA,UACrD,UAAU,cAAc;AAAA,UACxB,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AACO,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,SAAS,SAAS,cAAc,SAAS,CAAC;AAGpD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,SAAiC;AAAA,QACzC,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAS,SAAA,IAAI,UAAU,CAAC,OAAO,MAAM;AACpC,eAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAW,WAAA,MAAM,KAAK,oBAAoB;AAAA,UAC1C,iBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,eAAe;AAAA,cACf,UAAS;AAAA,cACT,gBACE,cAAc,WAAW,IAAI,SAAS,MAAM,QAAQ,KAAK;AAAA,cAE3D,aAAY;AAAA,cAEZ,UAAC,oBAAA,OAAA,EAAI,WAAU,SAAS,UAAM,OAAA;AAAA,YAAA;AAAA,UAAA,IAGhC;AAAA,QAEJ,EAAA,CAAA;AAAA,MAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** Inline styles to be applied to the root element. */\n style?: React.CSSProperties;\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** Whether or not the cell is part of a sorted column. */\n sorted?: boolean;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style,\n classes: classesProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sorted = false,\n resizable = false,\n resizing = false,\n ...others\n } = useDefaultProps(\"HvTableCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n\n const Component =\n component || tableContext?.components?.Td || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n role={Component === defaultComponent ? null : \"cell\"}\n style={style}\n className={cx(\n classes.root,\n classes[type],\n {\n [classes[`align${capitalize(align)}`]]
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** Inline styles to be applied to the root element. */\n style?: React.CSSProperties;\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** Whether or not the cell is part of a sorted column. */\n sorted?: boolean;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style,\n classes: classesProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sorted = false,\n resizable = false,\n resizing = false,\n ...others\n } = useDefaultProps(\"HvTableCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n\n const Component =\n component || tableContext?.components?.Td || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n role={Component === defaultComponent ? null : \"cell\"}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableCellClasses],\n {\n [classes[`align${capitalize(align)}` as keyof HvTableCellClasses]]:\n align !== \"inherit\",\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes.variantListHead]:\n tableContext.variant === \"listrow\" && type !== \"body\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableCellClasses\n ]]: variant !== \"default\",\n [classes.sorted]: sorted,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n },\n className,\n )}\n {...others}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAoDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAgC;AAAA,UACxC;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAA8B,CAAC,GAC/D,UAAU;AAAA,YACZ,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QACC,UAAU,WAAW,OAAO,CAAC,EAC/B,CAAC,GAAG,YAAY;AAAA,YAChB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContext.js","sources":["../../../src/Table/TableContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type TableContextProps = {\n components?: any;\n variant?: string;\n};\n\nconst TableContext = createContext<TableContextProps>({});\n\nexport default TableContext;\n"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TableContext.js","sources":["../../../src/Table/TableContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type TableContextProps = {\n components?: any;\n variant?: string;\n};\n\nconst TableContext = createContext<TableContextProps>({});\n\nexport default TableContext;\n"],"names":[],"mappings":";AAOM,MAAA,eAAe,cAAiC,CAAE,CAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** The scope of cells that the header element relates to. */\n scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant;\n /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is sorted */\n sorted?: boolean;\n /** Whether or not the cell is sortable */\n sortable?: boolean;\n /** Set sort direction icon and aria-sort. */\n sortDirection?: \"ascending\" | \"descending\" | false;\n /** Extra props to be passed onto the text in the header. */\n headerTextProps?: HvTypographyProps;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** The resize props injected in the resize handler */\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableHeaderClasses;\n /** Extra props to be passed onto the sort button in the header. */\n sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style: styleProp,\n classes: classesProp,\n scope: scopeProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sortDirection = \"none\",\n sorted,\n sortable,\n headerTextProps,\n resizerProps = {},\n resizable = false,\n resizing = false,\n sortButtonProps,\n ...others\n } = useDefaultProps(\"HvTableHeader\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const { colors } = useTheme();\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n const isHeadCell = type === \"head\";\n\n const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n const Sort = useMemo(\n () => getSortIcon(sorted && sortDirection),\n [sorted, sortDirection],\n );\n\n const Component =\n component || tableContext?.components?.Th || defaultComponent;\n\n const role =\n Component === defaultComponent\n ? null\n : isHeadCell\n ? \"columnheader\"\n : \"rowheader\";\n const paragraph = isParagraph(children);\n\n // Keep the header sticky\n const style = stickyColumn\n ? { ...styleProp, position: \"sticky\" }\n : styleProp;\n\n return (\n <Component\n ref={externalRef}\n role={role}\n scope={scope}\n style={style}\n className={cx(\n classes.root,\n classes[type],\n type === \"body\" &&\n css({\n [`&.${staticClasses.sorted}`]: {\n backgroundColor: alpha(\n hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n 0.4,\n ),\n },\n }),\n {\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.sortable]: sortable,\n [classes.sorted]: sorted,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n },\n className,\n )}\n aria-sort={sortable ? sortDirection : undefined}\n {...others}\n >\n <div\n className={cx(classes.headerContent, {\n [classes[`alignFlex${capitalize(align)}`]]: align !== \"inherit\",\n })}\n >\n {isHeadCell && sortable && (\n <HvButton\n className={classes.sortButton}\n icon\n overrideIconColors={false}\n aria-label=\"Sort\"\n {...sortButtonProps}\n >\n <Sort className={classes.sortIcon} />\n </HvButton>\n )}\n <HvTypography\n component=\"div\"\n className={cx({\n [classes.headerText]: !paragraph,\n [classes.headerParagraph]: paragraph,\n [classes.sortableHeaderText]: sortable,\n })}\n variant=\"label\"\n {...headerTextProps}\n >\n {children}\n </HvTypography>\n {resizable && <div {...resizerProps} className={classes.resizer} />}\n </div>\n </Component>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n component?: React.ElementType;\n /** Content to be rendered */\n children?: React.ReactNode;\n /** The scope of cells that the header element relates to. */\n scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n /** Set the text-align on the table cell content. */\n align?: HvTableCellAlign;\n /** Sets the cell's variant. */\n variant?: HvTableCellVariant;\n /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n type?: HvTableCellType;\n /** The cell is part of a sticky column. */\n stickyColumn?: boolean;\n /** The cell is part of the last sticky to the left column. */\n stickyColumnMostLeft?: boolean;\n /** The cell is part of the first sticky to the right column. */\n stickyColumnLeastRight?: boolean;\n /** The cell is part of the first column in the group. */\n groupColumnMostLeft?: boolean;\n /** The cell is part of the last column in the group. */\n groupColumnMostRight?: boolean;\n /** Whether or not the cell is sorted */\n sorted?: boolean;\n /** Whether or not the cell is sortable */\n sortable?: boolean;\n /** Set sort direction icon and aria-sort. */\n sortDirection?: \"ascending\" | \"descending\" | false;\n /** Extra props to be passed onto the text in the header. */\n headerTextProps?: HvTypographyProps;\n /** Whether or not the cell is resizable */\n resizable?: boolean;\n /** Whether or not the cell is being resized */\n resizing?: boolean;\n /** The resize props injected in the resize handler */\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableHeaderClasses;\n /** Extra props to be passed onto the sort button in the header. */\n sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style: styleProp,\n classes: classesProp,\n scope: scopeProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sortDirection = \"none\",\n sorted,\n sortable,\n headerTextProps,\n resizerProps = {},\n resizable = false,\n resizing = false,\n sortButtonProps,\n ...others\n } = useDefaultProps(\"HvTableHeader\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const { colors } = useTheme();\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp || tableSectionContext?.type || \"body\";\n const isHeadCell = type === \"head\";\n\n const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n const Sort = useMemo(\n () => getSortIcon(sorted && sortDirection),\n [sorted, sortDirection],\n );\n\n const Component =\n component || tableContext?.components?.Th || defaultComponent;\n\n const role =\n Component === defaultComponent\n ? null\n : isHeadCell\n ? \"columnheader\"\n : \"rowheader\";\n const paragraph = isParagraph(children);\n\n // Keep the header sticky\n const style = stickyColumn\n ? { ...styleProp, position: \"sticky\" }\n : styleProp;\n\n return (\n <Component\n ref={externalRef}\n role={role}\n scope={scope}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableHeaderClasses],\n type === \"body\" &&\n css({\n [`&.${staticClasses.sorted}`]: {\n backgroundColor: alpha(\n hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n 0.4,\n ),\n },\n }),\n {\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.sortable]: sortable,\n [classes.sorted]: sorted,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes[\n `align${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n ]]: variant !== \"default\",\n },\n className,\n )}\n aria-sort={sortable ? sortDirection : undefined}\n {...others}\n >\n <div\n className={cx(classes.headerContent, {\n [classes[\n `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n })}\n >\n {isHeadCell && sortable && (\n <HvButton\n className={classes.sortButton}\n icon\n overrideIconColors={false}\n aria-label=\"Sort\"\n {...sortButtonProps}\n >\n <Sort className={classes.sortIcon} />\n </HvButton>\n )}\n <HvTypography\n component=\"div\"\n className={cx({\n [classes.headerText]: !paragraph,\n [classes.headerParagraph]: paragraph,\n [classes.sortableHeaderText]: sortable,\n })}\n variant=\"label\"\n {...headerTextProps}\n >\n {children}\n </HvTypography>\n {resizable && <div {...resizerProps} className={classes.resizer} />}\n </div>\n </Component>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../../../../src/Table/TableRow/TableRow.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableRow.styles\";\n\nexport { staticClasses as tableRowClasses };\n\nexport type HvTableRowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableRowProps\n extends HvBaseProps<HTMLTableRowElement, \"children\"> {\n /** Content to be rendered */\n children: React.ReactNode;\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */\n component?: React.ElementType;\n /** Whether the table row will shade on hover. */\n hover?: boolean;\n /** Whether the table row will have the selected shading. */\n selected?: boolean;\n /** Whether the table row is expanded. */\n expanded?: boolean;\n /** Whether the table row background is striped. */\n striped?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableRowClasses;\n}\n\nconst defaultComponent = \"tr\";\n\n/**\n * `HvTableRow` acts as a `tr` element and inherits styles from its context\n */\nexport const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(\n (props, externalRef) => {\n const {\n classes: classesProp,\n className,\n component,\n hover = false,\n selected = false,\n expanded = false,\n striped = false,\n ...others\n } = useDefaultProps(\"HvTableRow\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = tableSectionContext?.type || \"body\";\n\n const isList = tableContext.variant === \"listrow\";\n\n const Component =\n component || tableContext?.components?.Tr || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n className={cx(\n tableSectionContext.filterClassName,\n classes.root,\n classes[type],\n {\n [classes.hover]: hover,\n [classes.selected]: selected,\n [classes.expanded]: expanded,\n [classes.striped]: striped,\n [classes.variantList]: isList && type === \"body\",\n [classes.variantListHead]: isList && type === \"head\",\n },\n className,\n )}\n role={Component === defaultComponent ? null : \"row\"}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;AA+BA,MAAM,mBAAmB;AAKlB,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,IACD,gBAAgB,cAAc,KAAK;AAEvC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,qBAAqB,QAAQ;AAEpC,UAAA,SAAS,aAAa,YAAY;AAExC,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT,oBAAoB;AAAA,UACpB,QAAQ;AAAA,UACR,QAAQ,
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../../../../src/Table/TableRow/TableRow.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableRow.styles\";\n\nexport { staticClasses as tableRowClasses };\n\nexport type HvTableRowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableRowProps\n extends HvBaseProps<HTMLTableRowElement, \"children\"> {\n /** Content to be rendered */\n children: React.ReactNode;\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */\n component?: React.ElementType;\n /** Whether the table row will shade on hover. */\n hover?: boolean;\n /** Whether the table row will have the selected shading. */\n selected?: boolean;\n /** Whether the table row is expanded. */\n expanded?: boolean;\n /** Whether the table row background is striped. */\n striped?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableRowClasses;\n}\n\nconst defaultComponent = \"tr\";\n\n/**\n * `HvTableRow` acts as a `tr` element and inherits styles from its context\n */\nexport const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(\n (props, externalRef) => {\n const {\n classes: classesProp,\n className,\n component,\n hover = false,\n selected = false,\n expanded = false,\n striped = false,\n ...others\n } = useDefaultProps(\"HvTableRow\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = tableSectionContext?.type || \"body\";\n\n const isList = tableContext.variant === \"listrow\";\n\n const Component =\n component || tableContext?.components?.Tr || defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n className={cx(\n tableSectionContext.filterClassName,\n classes.root,\n classes[type as keyof HvTableRowClasses],\n {\n [classes.hover]: hover,\n [classes.selected]: selected,\n [classes.expanded]: expanded,\n [classes.striped]: striped,\n [classes.variantList]: isList && type === \"body\",\n [classes.variantListHead]: isList && type === \"head\",\n },\n className,\n )}\n role={Component === defaultComponent ? null : \"row\"}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;AA+BA,MAAM,mBAAmB;AAKlB,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,IACD,gBAAgB,cAAc,KAAK;AAEvC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,qBAAqB,QAAQ;AAEpC,UAAA,SAAS,aAAa,YAAY;AAExC,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT,oBAAoB;AAAA,UACpB,QAAQ;AAAA,UACR,QAAQ,IAA+B;AAAA,UACvC;AAAA,YACE,CAAC,QAAQ,KAAK,GAAG;AAAA,YACjB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,WAAW,GAAG,UAAU,SAAS;AAAA,YAC1C,CAAC,QAAQ,eAAe,GAAG,UAAU,SAAS;AAAA,UAChD;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSectionContext.js","sources":["../../../src/Table/TableSectionContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type TableSectionContextProps = {\n type?: string;\n filterClassName?: string;\n};\n\nconst TableSectionContext = createContext<TableSectionContextProps>({});\n\nexport default TableSectionContext;\n"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TableSectionContext.js","sources":["../../../src/Table/TableSectionContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type TableSectionContextProps = {\n type?: string;\n filterClassName?: string;\n};\n\nconst TableSectionContext = createContext<TableSectionContextProps>({});\n\nexport default TableSectionContext;\n"],"names":[],"mappings":";AAOM,MAAA,sBAAsB,cAAwC,CAAE,CAAA;"}
|
|
@@ -12,8 +12,7 @@ const useInstanceHook = (instance) => {
|
|
|
12
12
|
);
|
|
13
13
|
const isPaginated = !!page;
|
|
14
14
|
const invertedToggleAllRowsSelected = useCallback(() => {
|
|
15
|
-
if (!isPaginated)
|
|
16
|
-
return toggleAllRowsSelected();
|
|
15
|
+
if (!isPaginated) return toggleAllRowsSelected();
|
|
17
16
|
const {
|
|
18
17
|
aditivePageBulkSelection: additivePageBulkSelection,
|
|
19
18
|
subtractivePageBulkDeselection,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBulkActions.js","sources":["../../../../src/Table/hooks/useBulkActions.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n ensurePluginOrder,\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\n\n// #region ##### TYPES #####\n\n// TODO: fix typo in v6\nexport interface HvTAbleBulkActionsProps extends TableCommonProps {\n numTotal: number;\n numSelected: number;\n showSelectAllPages: boolean;\n onSelectAll: () => void;\n onSelectAllPages: () => void;\n labels?: Record<string, string>;\n}\n\nexport type HvBulkActionsPropGetter<D extends object> = PropGetter<\n D,\n HvTAbleBulkActionsProps\n>;\n\nexport interface UseHvBulkActionsHooks<D extends object> {\n getHvBulkActionsProps: Array<HvBulkActionsPropGetter<D>>;\n}\n\nexport type UseHvBulkActionsTableOptions = {\n // TODO: fix typo in v6\n /** Controls whether the \"Select all\" should _select_ or _unselect_ the rows, in a partial selection state. */\n aditivePageBulkSelection?: boolean;\n /** Controls whether _only the current page_ or _all pages_ should be unselected */\n subtractivePageBulkDeselection?: boolean;\n showSelectAllPages?: boolean;\n};\n\nexport interface UseHvBulkActionsTableInstanceProps<D extends object> {\n getHvBulkActionsProps: (\n propGetter?: HvBulkActionsPropGetter<D>,\n ) => HvTAbleBulkActionsProps;\n invertedToggleAllRowsSelected: () => void;\n}\n\nexport type UseBulkActionsProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst useInstanceHook = (instance) => {\n const { plugins, page, toggleAllPageRowsSelected, toggleAllRowsSelected } =\n instance;\n\n ensurePluginOrder(plugins, [\"useHvRowSelection\"], \"useHvBulkActions\");\n\n const getInstance = useGetLatest(instance);\n\n const getHvBulkActionsProps = makePropGetter(\n instance.getHooks().getHvBulkActionsProps,\n {\n instance: getInstance(),\n },\n );\n\n const isPaginated = !!page;\n\n const invertedToggleAllRowsSelected = useCallback(() => {\n if (!isPaginated) return toggleAllRowsSelected();\n\n const {\n aditivePageBulkSelection: additivePageBulkSelection,\n subtractivePageBulkDeselection,\n isNoRowsSelected,\n isNoPageRowsSelected,\n isAllSelectablePageRowsSelected,\n isAllSelectablePageRowsUnselected,\n } = getInstance();\n\n if (additivePageBulkSelection && subtractivePageBulkDeselection) {\n return toggleAllPageRowsSelected(!isAllSelectablePageRowsSelected);\n }\n\n if (additivePageBulkSelection && !subtractivePageBulkDeselection) {\n if (!isAllSelectablePageRowsSelected) {\n return toggleAllPageRowsSelected(true);\n }\n\n return toggleAllRowsSelected(false);\n }\n\n if (!additivePageBulkSelection && !subtractivePageBulkDeselection) {\n if (isNoRowsSelected) {\n return toggleAllPageRowsSelected(true);\n }\n\n return toggleAllRowsSelected(false);\n }\n\n if (!additivePageBulkSelection && subtractivePageBulkDeselection) {\n if (isNoRowsSelected) {\n return toggleAllPageRowsSelected(true);\n }\n if (!isAllSelectablePageRowsUnselected) {\n return toggleAllPageRowsSelected(false);\n }\n if (!isNoPageRowsSelected) {\n return toggleAllPageRowsSelected(false);\n }\n\n return toggleAllRowsSelected(false);\n }\n\n return toggleAllPageRowsSelected();\n }, [\n getInstance,\n isPaginated,\n toggleAllPageRowsSelected,\n toggleAllRowsSelected,\n ]);\n\n Object.assign(instance, {\n getHvBulkActionsProps,\n invertedToggleAllRowsSelected,\n aditivePageBulkSelection: !!instance.aditivePageBulkSelection,\n subtractivePageBulkDeselection: !!instance.subtractivePageBulkDeselection,\n });\n};\n\n// TODO: fix typo in v6\nexport const defaultgetHvBulkActionsProps = (props, { instance }) => {\n const {\n rows,\n initialRows,\n selectedFlatRows,\n state: { selectedRowIds = {} } = {},\n page,\n toggleAllRowsSelected,\n invertedToggleAllRowsSelected,\n showSelectAllPages = true,\n applyToggleAllRowsSelectedToPrefilteredRows,\n } = instance;\n\n const isPaginated = !!page;\n\n const nextProps: HvTAbleBulkActionsProps = {\n numTotal: applyToggleAllRowsSelectedToPrefilteredRows\n ? initialRows.length\n : rows.length,\n numSelected: applyToggleAllRowsSelectedToPrefilteredRows\n ? Object.keys(selectedRowIds).length\n : selectedFlatRows.length,\n showSelectAllPages: showSelectAllPages && isPaginated,\n onSelectAll: invertedToggleAllRowsSelected,\n onSelectAllPages: toggleAllRowsSelected,\n };\n\n return [props, nextProps];\n};\n\nconst useBulkActions: UseBulkActionsProps = (hooks) => {\n hooks.getHvBulkActionsProps = [defaultgetHvBulkActionsProps];\n\n hooks.useInstance.push(useInstanceHook);\n};\n\nuseBulkActions.pluginName = \"useHvBulkActions\";\n\nexport default useBulkActions;\n"],"names":[],"mappings":";;AAqDA,MAAM,kBAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"useBulkActions.js","sources":["../../../../src/Table/hooks/useBulkActions.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n ensurePluginOrder,\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\n\n// #region ##### TYPES #####\n\n// TODO: fix typo in v6\nexport interface HvTAbleBulkActionsProps extends TableCommonProps {\n numTotal: number;\n numSelected: number;\n showSelectAllPages: boolean;\n onSelectAll: () => void;\n onSelectAllPages: () => void;\n labels?: Record<string, string>;\n}\n\nexport type HvBulkActionsPropGetter<D extends object> = PropGetter<\n D,\n HvTAbleBulkActionsProps\n>;\n\nexport interface UseHvBulkActionsHooks<D extends object> {\n getHvBulkActionsProps: Array<HvBulkActionsPropGetter<D>>;\n}\n\nexport type UseHvBulkActionsTableOptions = {\n // TODO: fix typo in v6\n /** Controls whether the \"Select all\" should _select_ or _unselect_ the rows, in a partial selection state. */\n aditivePageBulkSelection?: boolean;\n /** Controls whether _only the current page_ or _all pages_ should be unselected */\n subtractivePageBulkDeselection?: boolean;\n showSelectAllPages?: boolean;\n};\n\nexport interface UseHvBulkActionsTableInstanceProps<D extends object> {\n getHvBulkActionsProps: (\n propGetter?: HvBulkActionsPropGetter<D>,\n ) => HvTAbleBulkActionsProps;\n invertedToggleAllRowsSelected: () => void;\n}\n\nexport type UseBulkActionsProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst useInstanceHook = (instance: any) => {\n const { plugins, page, toggleAllPageRowsSelected, toggleAllRowsSelected } =\n instance;\n\n ensurePluginOrder(plugins, [\"useHvRowSelection\"], \"useHvBulkActions\");\n\n const getInstance = useGetLatest(instance);\n\n const getHvBulkActionsProps = makePropGetter(\n instance.getHooks().getHvBulkActionsProps,\n {\n instance: getInstance(),\n },\n );\n\n const isPaginated = !!page;\n\n const invertedToggleAllRowsSelected = useCallback(() => {\n if (!isPaginated) return toggleAllRowsSelected();\n\n const {\n aditivePageBulkSelection: additivePageBulkSelection,\n subtractivePageBulkDeselection,\n isNoRowsSelected,\n isNoPageRowsSelected,\n isAllSelectablePageRowsSelected,\n isAllSelectablePageRowsUnselected,\n } = getInstance();\n\n if (additivePageBulkSelection && subtractivePageBulkDeselection) {\n return toggleAllPageRowsSelected(!isAllSelectablePageRowsSelected);\n }\n\n if (additivePageBulkSelection && !subtractivePageBulkDeselection) {\n if (!isAllSelectablePageRowsSelected) {\n return toggleAllPageRowsSelected(true);\n }\n\n return toggleAllRowsSelected(false);\n }\n\n if (!additivePageBulkSelection && !subtractivePageBulkDeselection) {\n if (isNoRowsSelected) {\n return toggleAllPageRowsSelected(true);\n }\n\n return toggleAllRowsSelected(false);\n }\n\n if (!additivePageBulkSelection && subtractivePageBulkDeselection) {\n if (isNoRowsSelected) {\n return toggleAllPageRowsSelected(true);\n }\n if (!isAllSelectablePageRowsUnselected) {\n return toggleAllPageRowsSelected(false);\n }\n if (!isNoPageRowsSelected) {\n return toggleAllPageRowsSelected(false);\n }\n\n return toggleAllRowsSelected(false);\n }\n\n return toggleAllPageRowsSelected();\n }, [\n getInstance,\n isPaginated,\n toggleAllPageRowsSelected,\n toggleAllRowsSelected,\n ]);\n\n Object.assign(instance, {\n getHvBulkActionsProps,\n invertedToggleAllRowsSelected,\n aditivePageBulkSelection: !!instance.aditivePageBulkSelection,\n subtractivePageBulkDeselection: !!instance.subtractivePageBulkDeselection,\n });\n};\n\n// TODO: fix typo in v6\nexport const defaultgetHvBulkActionsProps = (props: any, { instance }: any) => {\n const {\n rows,\n initialRows,\n selectedFlatRows,\n state: { selectedRowIds = {} } = {},\n page,\n toggleAllRowsSelected,\n invertedToggleAllRowsSelected,\n showSelectAllPages = true,\n applyToggleAllRowsSelectedToPrefilteredRows,\n } = instance;\n\n const isPaginated = !!page;\n\n const nextProps: HvTAbleBulkActionsProps = {\n numTotal: applyToggleAllRowsSelectedToPrefilteredRows\n ? initialRows.length\n : rows.length,\n numSelected: applyToggleAllRowsSelectedToPrefilteredRows\n ? Object.keys(selectedRowIds).length\n : selectedFlatRows.length,\n showSelectAllPages: showSelectAllPages && isPaginated,\n onSelectAll: invertedToggleAllRowsSelected,\n onSelectAllPages: toggleAllRowsSelected,\n };\n\n return [props, nextProps];\n};\n\nconst useBulkActions: UseBulkActionsProps = (hooks) => {\n hooks.getHvBulkActionsProps = [defaultgetHvBulkActionsProps];\n\n hooks.useInstance.push(useInstanceHook);\n};\n\nuseBulkActions.pluginName = \"useHvBulkActions\";\n\nexport default useBulkActions;\n"],"names":[],"mappings":";;AAqDA,MAAM,kBAAkB,CAAC,aAAkB;AACzC,QAAM,EAAE,SAAS,MAAM,2BAA2B,0BAChD;AAEF,oBAAkB,SAAS,CAAC,mBAAmB,GAAG,kBAAkB;AAE9D,QAAA,cAAc,aAAa,QAAQ;AAEzC,QAAM,wBAAwB;AAAA,IAC5B,SAAS,WAAW;AAAA,IACpB;AAAA,MACE,UAAU,YAAY;AAAA,IACxB;AAAA,EAAA;AAGI,QAAA,cAAc,CAAC,CAAC;AAEhB,QAAA,gCAAgC,YAAY,MAAM;AAClD,QAAA,CAAC,YAAa,QAAO;AAEnB,UAAA;AAAA,MACJ,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,YAAY;AAEhB,QAAI,6BAA6B,gCAAgC;AACxD,aAAA,0BAA0B,CAAC,+BAA+B;AAAA,IACnE;AAEI,QAAA,6BAA6B,CAAC,gCAAgC;AAChE,UAAI,CAAC,iCAAiC;AACpC,eAAO,0BAA0B,IAAI;AAAA,MACvC;AAEA,aAAO,sBAAsB,KAAK;AAAA,IACpC;AAEI,QAAA,CAAC,6BAA6B,CAAC,gCAAgC;AACjE,UAAI,kBAAkB;AACpB,eAAO,0BAA0B,IAAI;AAAA,MACvC;AAEA,aAAO,sBAAsB,KAAK;AAAA,IACpC;AAEI,QAAA,CAAC,6BAA6B,gCAAgC;AAChE,UAAI,kBAAkB;AACpB,eAAO,0BAA0B,IAAI;AAAA,MACvC;AACA,UAAI,CAAC,mCAAmC;AACtC,eAAO,0BAA0B,KAAK;AAAA,MACxC;AACA,UAAI,CAAC,sBAAsB;AACzB,eAAO,0BAA0B,KAAK;AAAA,MACxC;AAEA,aAAO,sBAAsB,KAAK;AAAA,IACpC;AAEA,WAAO,0BAA0B;AAAA,EAAA,GAChC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,SAAO,OAAO,UAAU;AAAA,IACtB;AAAA,IACA;AAAA,IACA,0BAA0B,CAAC,CAAC,SAAS;AAAA,IACrC,gCAAgC,CAAC,CAAC,SAAS;AAAA,EAAA,CAC5C;AACH;AAGO,MAAM,+BAA+B,CAAC,OAAY,EAAE,eAAoB;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,CAAC,EAAA,IAAM,CAAC;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACE,IAAA;AAEE,QAAA,cAAc,CAAC,CAAC;AAEtB,QAAM,YAAqC;AAAA,IACzC,UAAU,8CACN,YAAY,SACZ,KAAK;AAAA,IACT,aAAa,8CACT,OAAO,KAAK,cAAc,EAAE,SAC5B,iBAAiB;AAAA,IACrB,oBAAoB,sBAAsB;AAAA,IAC1C,aAAa;AAAA,IACb,kBAAkB;AAAA,EAAA;AAGb,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEA,MAAM,iBAAsC,CAAC,UAAU;AAC/C,QAAA,wBAAwB,CAAC,4BAA4B;AAErD,QAAA,YAAY,KAAK,eAAe;AACxC;AAEA,eAAe,aAAa;AAE5B,MAAA,mBAAe;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeaderGroups.js","sources":["../../../../src/Table/hooks/useHeaderGroups.ts"],"sourcesContent":["import { Hooks } from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvHeaderGroupsInstance {\n hasGroupedColumns?: boolean;\n}\n\n// props target: <table><thead><tr><th>\nexport interface UseHvHeaderGroupsColumnProps {\n style?: React.CSSProperties;\n groupColumnMostLeft?: boolean;\n groupColumnMostRight?: boolean;\n}\n\n// props target: <table><tbody><tr><td>\nexport interface UseHvHeaderGroupsCellProps {\n groupColumnMostLeft?: boolean;\n groupColumnMostRight?: boolean;\n}\n\nexport type UseHvHeaderGroupsProps = (<\n D extends object = Record<string, unknown>,\n>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n/**\n * Moving non grouped headers to the top level,\n * by placing them in the position of their top level placeholder.\n *\n * By default the header groups are built bottom top,\n * that results in non grouped headers to be placed\n * at the bottom row in the table head.\n *\n * @param {Array.<Object>} headerGroups - table header groups\n */\nconst replaceHeaderPlaceholders = (headerGroups) => {\n const [headerGroup] = headerGroups;\n\n const hasPlaceholderHeaders = headerGroup.headers.some(\n (h) => h.placeholderOf != null,\n );\n if (!hasPlaceholderHeaders) {\n return; // no placeholder header found to replace\n }\n\n const maxDepth = headerGroups.length - 1;\n const leafGroup = headerGroups[maxDepth];\n\n headerGroup.headers.forEach((header, position) => {\n const { placeholderOf } = header;\n\n const isPlaceholderHeader = placeholderOf != null;\n if (isPlaceholderHeader) {\n // is placeholder header\n const leafIndex =\n leafGroup.headers\n .slice(position)\n .findIndex(({ id }) => id === placeholderOf.id) + position;\n\n // store leaf placeholder header\n header.variant = placeholderOf.variant;\n header.depth = maxDepth;\n leafGroup.headers[leafIndex] = header;\n\n // replace placeholder with leaf header\n placeholderOf.rowSpan = maxDepth + 1;\n headerGroup.headers[position] = placeholderOf;\n }\n });\n};\n\nconst getCellProps = (column, isHeaderCell = false) => ({\n groupColumnMostLeft: column.isGroupLeftColumn,\n groupColumnMostRight: column.isGroupRightColumn,\n rowSpan: isHeaderCell && column.rowSpan != null ? column.rowSpan : 1,\n});\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props, { instance, column }) => {\n const nextProps: UseHvHeaderGroupsColumnProps = instance.hasGroupedColumns\n ? getCellProps(column, true)\n : {};\n\n if (instance.hasGroupedColumns) {\n const isPlaceholder = column.placeholderOf != null;\n\n nextProps.style = {\n display: isPlaceholder ? \"none\" : props.style?.display,\n };\n\n if (instance.hasStickyColumns) {\n if (isPlaceholder) {\n nextProps.style.display = \"inline-flex\";\n nextProps.style.visibility = \"hidden\";\n }\n\n if (column.parent || isPlaceholder) {\n nextProps.style.marginTop = `calc(var(--cell-height) * -1)`;\n }\n\n if (column.rowSpan > 1) {\n // rowSpan doesn't work with flex, so we need to simulate it by adjusting the height value manually\n nextProps.style.height = `calc(var(--first-row-cell-height) + var(--cell-height) * ${\n column.rowSpan - 1\n })`;\n }\n }\n }\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props, { instance, cell }) => {\n const nextProps: UseHvHeaderGroupsCellProps = instance.hasGroupedColumns\n ? getCellProps(cell.column)\n : {};\n\n return [props, nextProps];\n};\n\nconst visibleColumnsHook = (visibleColumns, { instance }) => {\n const parentList = new Set();\n\n visibleColumns.forEach(({ parent }) => {\n if (parent != null && !parentList.has(parent)) {\n parentList.add(parent);\n }\n });\n\n const hasGroupedColumns = parentList.size > 0;\n if (hasGroupedColumns) {\n parentList.forEach((parent: any) => {\n parent.align = \"center\";\n parent.isGroupLeftColumn = true;\n parent.isGroupRightColumn = true;\n\n const { columns } = parent;\n columns[0].isGroupLeftColumn = true;\n columns[columns.length - 1].isGroupRightColumn = true;\n });\n }\n\n Object.assign(instance, { hasGroupedColumns });\n\n return visibleColumns;\n};\n\nconst useInstanceHook = (instance) => {\n if (instance.hasGroupedColumns) {\n replaceHeaderPlaceholders(instance.headerGroups);\n }\n};\n\nconst useHeaderGroups: UseHvHeaderGroupsProps = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.useInstance.push(useInstanceHook);\n\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseHeaderGroups.pluginName = \"useHvHeaderGroups\";\n\nexport default useHeaderGroups;\n"],"names":[],"mappings":"AAuCA,MAAM,4BAA4B,CAAC,
|
|
1
|
+
{"version":3,"file":"useHeaderGroups.js","sources":["../../../../src/Table/hooks/useHeaderGroups.ts"],"sourcesContent":["import { Hooks } from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvHeaderGroupsInstance {\n hasGroupedColumns?: boolean;\n}\n\n// props target: <table><thead><tr><th>\nexport interface UseHvHeaderGroupsColumnProps {\n style?: React.CSSProperties;\n groupColumnMostLeft?: boolean;\n groupColumnMostRight?: boolean;\n}\n\n// props target: <table><tbody><tr><td>\nexport interface UseHvHeaderGroupsCellProps {\n groupColumnMostLeft?: boolean;\n groupColumnMostRight?: boolean;\n}\n\nexport type UseHvHeaderGroupsProps = (<\n D extends object = Record<string, unknown>,\n>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n/**\n * Moving non grouped headers to the top level,\n * by placing them in the position of their top level placeholder.\n *\n * By default the header groups are built bottom top,\n * that results in non grouped headers to be placed\n * at the bottom row in the table head.\n *\n * @param {Array.<Object>} headerGroups - table header groups\n */\nconst replaceHeaderPlaceholders = (headerGroups: any) => {\n const [headerGroup] = headerGroups;\n\n const hasPlaceholderHeaders = headerGroup.headers.some(\n (h: any) => h.placeholderOf != null,\n );\n if (!hasPlaceholderHeaders) {\n return; // no placeholder header found to replace\n }\n\n const maxDepth = headerGroups.length - 1;\n const leafGroup = headerGroups[maxDepth];\n\n headerGroup.headers.forEach((header: any, position: any) => {\n const { placeholderOf } = header;\n\n const isPlaceholderHeader = placeholderOf != null;\n if (isPlaceholderHeader) {\n // is placeholder header\n const leafIndex =\n leafGroup.headers\n .slice(position)\n .findIndex(({ id }: any) => id === placeholderOf.id) + position;\n\n // store leaf placeholder header\n header.variant = placeholderOf.variant;\n header.depth = maxDepth;\n leafGroup.headers[leafIndex] = header;\n\n // replace placeholder with leaf header\n placeholderOf.rowSpan = maxDepth + 1;\n headerGroup.headers[position] = placeholderOf;\n }\n });\n};\n\nconst getCellProps = (column: any, isHeaderCell = false) => ({\n groupColumnMostLeft: column.isGroupLeftColumn,\n groupColumnMostRight: column.isGroupRightColumn,\n rowSpan: isHeaderCell && column.rowSpan != null ? column.rowSpan : 1,\n});\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props: any, { instance, column }: any) => {\n const nextProps: UseHvHeaderGroupsColumnProps = instance.hasGroupedColumns\n ? getCellProps(column, true)\n : {};\n\n if (instance.hasGroupedColumns) {\n const isPlaceholder = column.placeholderOf != null;\n\n nextProps.style = {\n display: isPlaceholder ? \"none\" : props.style?.display,\n };\n\n if (instance.hasStickyColumns) {\n if (isPlaceholder) {\n nextProps.style.display = \"inline-flex\";\n nextProps.style.visibility = \"hidden\";\n }\n\n if (column.parent || isPlaceholder) {\n nextProps.style.marginTop = `calc(var(--cell-height) * -1)`;\n }\n\n if (column.rowSpan > 1) {\n // rowSpan doesn't work with flex, so we need to simulate it by adjusting the height value manually\n nextProps.style.height = `calc(var(--first-row-cell-height) + var(--cell-height) * ${\n column.rowSpan - 1\n })`;\n }\n }\n }\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props: any, { instance, cell }: any) => {\n const nextProps: UseHvHeaderGroupsCellProps = instance.hasGroupedColumns\n ? getCellProps(cell.column)\n : {};\n\n return [props, nextProps];\n};\n\nconst visibleColumnsHook = (visibleColumns: any, { instance }: any) => {\n const parentList = new Set();\n\n visibleColumns.forEach(({ parent }: { parent: any }) => {\n if (parent != null && !parentList.has(parent)) {\n parentList.add(parent);\n }\n });\n\n const hasGroupedColumns = parentList.size > 0;\n if (hasGroupedColumns) {\n parentList.forEach((parent: any) => {\n parent.align = \"center\";\n parent.isGroupLeftColumn = true;\n parent.isGroupRightColumn = true;\n\n const { columns } = parent;\n columns[0].isGroupLeftColumn = true;\n columns[columns.length - 1].isGroupRightColumn = true;\n });\n }\n\n Object.assign(instance, { hasGroupedColumns });\n\n return visibleColumns;\n};\n\nconst useInstanceHook = (instance: any) => {\n if (instance.hasGroupedColumns) {\n replaceHeaderPlaceholders(instance.headerGroups);\n }\n};\n\nconst useHeaderGroups: UseHvHeaderGroupsProps = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.useInstance.push(useInstanceHook);\n\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseHeaderGroups.pluginName = \"useHvHeaderGroups\";\n\nexport default useHeaderGroups;\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../../../../src/Table/hooks/usePagination.ts"],"sourcesContent":["import {\n ensurePluginOrder,\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport interface HvTablePaginationProps extends TableCommonProps {\n canPrevious: boolean;\n canNext: boolean;\n pages: number;\n page: number;\n pageSize: number;\n onPageChange?: (updater: ((pageIndex: number) => number) | number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n labels?: Record<string, string>;\n}\n\nexport type HvPaginationPropGetter<D extends object> = PropGetter<\n D,\n HvTablePaginationProps\n>;\n\nexport interface UseHvPaginationHooks<D extends object> {\n getHvPaginationProps: Array<HvPaginationPropGetter<D>>;\n}\n\nexport interface UseHvPaginationTableInstance<D extends object> {\n getHvPaginationProps: (\n propGetter?: HvPaginationPropGetter<D>,\n ) => HvTablePaginationProps;\n}\n\nexport type UsePaginationProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst useInstanceHook = (instance) => {\n ensurePluginOrder(\n instance.plugins,\n [\n \"usePagination\",\n \"useHvGlobalFilter\",\n \"useHvFilters\",\n \"useGroupBy\",\n \"useHvSortBy\",\n \"useHvRowExpand\",\n ],\n \"useHvPagination\",\n );\n\n const getInstance = useGetLatest(instance);\n const getHvPaginationProps = makePropGetter(\n instance.getHooks().getHvPaginationProps,\n {\n instance: getInstance(),\n },\n );\n\n Object.assign(instance, {\n getHvPaginationProps,\n });\n};\n\nexport const defaultGetHvPaginationProps = (props, { instance }) => {\n const {\n canPreviousPage,\n canNextPage,\n pageOptions,\n gotoPage,\n setPageSize,\n state: { pageSize, pageIndex },\n labels,\n } = instance;\n\n const nextProps: HvTablePaginationProps = {\n canPrevious: canPreviousPage,\n canNext: canNextPage,\n pages: pageOptions.length,\n page: pageIndex,\n pageSize,\n onPageChange: gotoPage,\n onPageSizeChange: setPageSize,\n labels,\n };\n\n return [props, nextProps];\n};\n\nconst usePagination: UsePaginationProps = (hooks) => {\n hooks.getHvPaginationProps = [defaultGetHvPaginationProps];\n\n hooks.useInstance.push(useInstanceHook);\n};\n\nusePagination.pluginName = \"useHvPagination\";\n\nexport default usePagination;\n"],"names":[],"mappings":";AA2CA,MAAM,kBAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"usePagination.js","sources":["../../../../src/Table/hooks/usePagination.ts"],"sourcesContent":["import {\n ensurePluginOrder,\n Hooks,\n makePropGetter,\n PropGetter,\n TableCommonProps,\n useGetLatest,\n} from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport interface HvTablePaginationProps extends TableCommonProps {\n canPrevious: boolean;\n canNext: boolean;\n pages: number;\n page: number;\n pageSize: number;\n onPageChange?: (updater: ((pageIndex: number) => number) | number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n labels?: Record<string, string>;\n}\n\nexport type HvPaginationPropGetter<D extends object> = PropGetter<\n D,\n HvTablePaginationProps\n>;\n\nexport interface UseHvPaginationHooks<D extends object> {\n getHvPaginationProps: Array<HvPaginationPropGetter<D>>;\n}\n\nexport interface UseHvPaginationTableInstance<D extends object> {\n getHvPaginationProps: (\n propGetter?: HvPaginationPropGetter<D>,\n ) => HvTablePaginationProps;\n}\n\nexport type UsePaginationProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst useInstanceHook = (instance: any) => {\n ensurePluginOrder(\n instance.plugins,\n [\n \"usePagination\",\n \"useHvGlobalFilter\",\n \"useHvFilters\",\n \"useGroupBy\",\n \"useHvSortBy\",\n \"useHvRowExpand\",\n ],\n \"useHvPagination\",\n );\n\n const getInstance = useGetLatest(instance);\n const getHvPaginationProps = makePropGetter(\n instance.getHooks().getHvPaginationProps,\n {\n instance: getInstance(),\n },\n );\n\n Object.assign(instance, {\n getHvPaginationProps,\n });\n};\n\nexport const defaultGetHvPaginationProps = (props: any, { instance }: any) => {\n const {\n canPreviousPage,\n canNextPage,\n pageOptions,\n gotoPage,\n setPageSize,\n state: { pageSize, pageIndex },\n labels,\n } = instance;\n\n const nextProps: HvTablePaginationProps = {\n canPrevious: canPreviousPage,\n canNext: canNextPage,\n pages: pageOptions.length,\n page: pageIndex,\n pageSize,\n onPageChange: gotoPage,\n onPageSizeChange: setPageSize,\n labels,\n };\n\n return [props, nextProps];\n};\n\nconst usePagination: UsePaginationProps = (hooks) => {\n hooks.getHvPaginationProps = [defaultGetHvPaginationProps];\n\n hooks.useInstance.push(useInstanceHook);\n};\n\nusePagination.pluginName = \"useHvPagination\";\n\nexport default usePagination;\n"],"names":[],"mappings":";AA2CA,MAAM,kBAAkB,CAAC,aAAkB;AACzC;AAAA,IACE,SAAS;AAAA,IACT;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,cAAc,aAAa,QAAQ;AACzC,QAAM,uBAAuB;AAAA,IAC3B,SAAS,WAAW;AAAA,IACpB;AAAA,MACE,UAAU,YAAY;AAAA,IACxB;AAAA,EAAA;AAGF,SAAO,OAAO,UAAU;AAAA,IACtB;AAAA,EAAA,CACD;AACH;AAEO,MAAM,8BAA8B,CAAC,OAAY,EAAE,eAAoB;AACtE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,UAAU;AAAA,IAC7B;AAAA,EACE,IAAA;AAEJ,QAAM,YAAoC;AAAA,IACxC,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO,YAAY;AAAA,IACnB,MAAM;AAAA,IACN;AAAA,IACA,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEA,MAAM,gBAAoC,CAAC,UAAU;AAC7C,QAAA,uBAAuB,CAAC,2BAA2B;AAEnD,QAAA,YAAY,KAAK,eAAe;AACxC;AAEA,cAAc,aAAa;AAE3B,MAAA,kBAAe;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeColumns.js","sources":["../../../../src/Table/hooks/useResizeColumns.ts"],"sourcesContent":["import { ensurePluginOrder, Hooks } from \"react-table\";\n\n// #region ##### TYPES #####\n\n// getHeaderProps:\nexport interface UseHvResizeColumnProps {\n resizable?: boolean;\n resizing?: boolean;\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\n// getCellProps:\nexport interface UseHvResizeTableCellProps {\n resizable?: boolean;\n resizing?: boolean;\n}\n\nexport type UseHvResizeColumnsProps = (<\n D extends object = Record<string, unknown>,\n>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props, { column }) => {\n const resizerProps: NonNullable<UseHvResizeColumnProps[\"resizerProps\"]> =\n column.getResizerProps?.() || {};\n\n resizerProps.onClick = (e) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const nextProps = {\n resizable: column.canResize,\n resizing: column.isResizing,\n resizerProps,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props, { cell }) => {\n const nextProps: UseHvResizeTableCellProps = {\n resizable: cell.column.canResize,\n resizing: cell.column.isResizing,\n };\n\n return [props, nextProps];\n};\n\nconst useInstanceHook = (instance) => {\n ensurePluginOrder(\n instance.plugins,\n [\"useResizeColumns\"],\n \"useHvResizeColumns\",\n );\n};\n\nconst useResizeColumns: UseHvResizeColumnsProps = (hooks) => {\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n\n hooks.useInstance.push(useInstanceHook);\n};\n\nuseResizeColumns.pluginName = \"useHvResizeColumns\";\n\nexport default useResizeColumns;\n"],"names":[],"mappings":";AA0BA,MAAM,qBAAqB,CAAC,
|
|
1
|
+
{"version":3,"file":"useResizeColumns.js","sources":["../../../../src/Table/hooks/useResizeColumns.ts"],"sourcesContent":["import { ensurePluginOrder, Hooks } from \"react-table\";\n\n// #region ##### TYPES #####\n\n// getHeaderProps:\nexport interface UseHvResizeColumnProps {\n resizable?: boolean;\n resizing?: boolean;\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\n// getCellProps:\nexport interface UseHvResizeTableCellProps {\n resizable?: boolean;\n resizing?: boolean;\n}\n\nexport type UseHvResizeColumnsProps = (<\n D extends object = Record<string, unknown>,\n>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\n// props target: <table><thead><tr><th>\nconst getHeaderPropsHook = (props: any, { column }: any) => {\n const resizerProps: NonNullable<UseHvResizeColumnProps[\"resizerProps\"]> =\n column.getResizerProps?.() || {};\n\n resizerProps.onClick = (e) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const nextProps = {\n resizable: column.canResize,\n resizing: column.isResizing,\n resizerProps,\n };\n\n return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nconst getCellPropsHook = (props: any, { cell }: any) => {\n const nextProps: UseHvResizeTableCellProps = {\n resizable: cell.column.canResize,\n resizing: cell.column.isResizing,\n };\n\n return [props, nextProps];\n};\n\nconst useInstanceHook = (instance: any) => {\n ensurePluginOrder(\n instance.plugins,\n [\"useResizeColumns\"],\n \"useHvResizeColumns\",\n );\n};\n\nconst useResizeColumns: UseHvResizeColumnsProps = (hooks) => {\n // props target: <table><thead><tr><th>\n hooks.getHeaderProps.push(getHeaderPropsHook);\n // props target: <table><tbody><tr><td>\n hooks.getCellProps.push(getCellPropsHook);\n\n hooks.useInstance.push(useInstanceHook);\n};\n\nuseResizeColumns.pluginName = \"useHvResizeColumns\";\n\nexport default useResizeColumns;\n"],"names":[],"mappings":";AA0BA,MAAM,qBAAqB,CAAC,OAAY,EAAE,aAAkB;AAC1D,QAAM,eACJ,OAAO,kBAAkB,KAAK,CAAA;AAEnB,eAAA,UAAU,CAAC,MAAM;AAC5B,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAAA,EAAA;AAGpB,QAAM,YAAY;AAAA,IAChB,WAAW,OAAO;AAAA,IAClB,UAAU,OAAO;AAAA,IACjB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGA,MAAM,mBAAmB,CAAC,OAAY,EAAE,WAAgB;AACtD,QAAM,YAAuC;AAAA,IAC3C,WAAW,KAAK,OAAO;AAAA,IACvB,UAAU,KAAK,OAAO;AAAA,EAAA;AAGjB,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEA,MAAM,kBAAkB,CAAC,aAAkB;AACzC;AAAA,IACE,SAAS;AAAA,IACT,CAAC,kBAAkB;AAAA,IACnB;AAAA,EAAA;AAEJ;AAEA,MAAM,mBAA4C,CAAC,UAAU;AAErD,QAAA,eAAe,KAAK,kBAAkB;AAEtC,QAAA,aAAa,KAAK,gBAAgB;AAElC,QAAA,YAAY,KAAK,eAAe;AACxC;AAEA,iBAAiB,aAAa;AAE9B,MAAA,qBAAe;"}
|
|
@@ -7,7 +7,11 @@ const DEFAULT_LABELS = {
|
|
|
7
7
|
expandRowButtonAriaLabel: "Expand this row",
|
|
8
8
|
collapseRowButtonAriaLabel: "Collapse this row"
|
|
9
9
|
};
|
|
10
|
-
const CellWithExpandButton = ({
|
|
10
|
+
const CellWithExpandButton = ({
|
|
11
|
+
row,
|
|
12
|
+
cell,
|
|
13
|
+
labels: labelsProp
|
|
14
|
+
}) => {
|
|
11
15
|
const labels = useLabels(DEFAULT_LABELS, labelsProp);
|
|
12
16
|
const { onClick } = row.getToggleRowExpandedProps();
|
|
13
17
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {\n Hooks,\n TableExpandedToggleProps,\n UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n onClick?: React.MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n D extends object = Record<string, unknown>,\n> extends UseExpandedRowProps<D> {\n getToggleRowExpandedProps: (\n props?: Partial<TableExpandedToggleProps>,\n ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n expandRowButtonAriaLabel: \"Expand this row\",\n collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({
|
|
1
|
+
{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {\n Hooks,\n TableExpandedToggleProps,\n UseExpandedRowProps,\n} from \"react-table\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { HvTypography } from \"../../Typography\";\n\n// #region ##### TYPES #####\n\nexport interface UseHvRowExpandTableRowProps {\n expanded?: boolean;\n}\n\nexport type UseHvRowExpandTableOptions = {\n disableCreateExpandButton?: boolean;\n};\n\nexport interface UseHvRowExpandRowToggleProps extends TableExpandedToggleProps {\n onClick?: React.MouseEventHandler<unknown>;\n}\n\nexport interface UseHvRowExpandRowInstance<\n D extends object = Record<string, unknown>,\n> extends UseExpandedRowProps<D> {\n getToggleRowExpandedProps: (\n props?: Partial<TableExpandedToggleProps>,\n ) => UseHvRowExpandRowToggleProps;\n}\n\nexport type UseRowExpandProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>,\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst DEFAULT_LABELS = {\n expandRowButtonAriaLabel: \"Expand this row\",\n collapseRowButtonAriaLabel: \"Collapse this row\",\n};\n\nexport const CellWithExpandButton = ({\n row,\n cell,\n labels: labelsProp,\n}: any) => {\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const { onClick } = row.getToggleRowExpandedProps();\n\n return (\n <>\n <HvButton\n icon\n aria-label={\n row.isExpanded\n ? labels.collapseRowButtonAriaLabel\n : labels.expandRowButtonAriaLabel\n }\n aria-expanded={row.isExpanded}\n onClick={onClick}\n >\n {row.isExpanded ? <DropDownXS /> : <DropUpXS />}\n </HvButton>\n {cell?.value && (\n <HvTypography variant=\"label\" component=\"span\">\n {cell.value}\n </HvTypography>\n )}\n </>\n );\n};\n\nconst visibleColumnsHook = (columns: any, { instance }: any) => {\n if (instance.disableCreateExpandButton) {\n return columns;\n }\n\n // add a button to first data column, unless it has a custom renderer\n // if so, add an extra column instead\n const firstDataColumnIndex = columns.findIndex(\n (c: any) => c.id?.indexOf(\"_hv_\") !== 0,\n );\n\n if (firstDataColumnIndex !== -1) {\n const firstDataColumn = columns[firstDataColumnIndex];\n\n if (firstDataColumn.Cell == null) {\n firstDataColumn.Cell = CellWithExpandButton;\n firstDataColumn.variant = \"expand\";\n\n return columns;\n }\n }\n\n const expandColumn = {\n id: \"_hv_expand\",\n variant: \"none\",\n\n width: 32,\n\n // this will only work when using useHvTableSticky\n // but ensures it stays left of any sticky column\n sticky: \"left\",\n\n Cell: CellWithExpandButton,\n };\n\n const columnsCopy = [...columns];\n columnsCopy.splice(\n firstDataColumnIndex !== -1 ? firstDataColumnIndex : 0,\n 0,\n expandColumn,\n );\n\n return columnsCopy;\n};\n\nconst getRowPropsHook = (props: any, { row }: any) => {\n const nextProps: UseHvRowExpandTableRowProps = {\n expanded: row.isExpanded,\n };\n\n return [props, nextProps];\n};\n\nconst useRowExpand: UseRowExpandProps = (hooks) => {\n hooks.visibleColumns.push(visibleColumnsHook);\n hooks.getRowProps.push(getRowPropsHook);\n};\nuseRowExpand.pluginName = \"useHvRowExpand\";\n\nexport default useRowExpand;\n"],"names":[],"mappings":";;;;;AAuCA,MAAM,iBAAiB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,4BAA4B;AAC9B;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAW;AACH,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,EAAE,QAAA,IAAY,IAAI,0BAA0B;AAElD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,cACE,IAAI,aACA,OAAO,6BACP,OAAO;AAAA,QAEb,iBAAe,IAAI;AAAA,QACnB;AAAA,QAEC,cAAI,aAAa,oBAAC,YAAW,CAAA,CAAA,wBAAM,UAAS,EAAA;AAAA,MAAA;AAAA,IAC/C;AAAA,IACC,MAAM,SACJ,oBAAA,cAAA,EAAa,SAAQ,SAAQ,WAAU,QACrC,UAAA,KAAK,MACR,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,qBAAqB,CAAC,SAAc,EAAE,eAAoB;AAC9D,MAAI,SAAS,2BAA2B;AAC/B,WAAA;AAAA,EACT;AAIA,QAAM,uBAAuB,QAAQ;AAAA,IACnC,CAAC,MAAW,EAAE,IAAI,QAAQ,MAAM,MAAM;AAAA,EAAA;AAGxC,MAAI,yBAAyB,IAAI;AACzB,UAAA,kBAAkB,QAAQ,oBAAoB;AAEhD,QAAA,gBAAgB,QAAQ,MAAM;AAChC,sBAAgB,OAAO;AACvB,sBAAgB,UAAU;AAEnB,aAAA;AAAA,IACT;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,IAAI;AAAA,IACJ,SAAS;AAAA,IAET,OAAO;AAAA;AAAA;AAAA,IAIP,QAAQ;AAAA,IAER,MAAM;AAAA,EAAA;AAGF,QAAA,cAAc,CAAC,GAAG,OAAO;AACnB,cAAA;AAAA,IACV,yBAAyB,KAAK,uBAAuB;AAAA,IACrD;AAAA,IACA;AAAA,EAAA;AAGK,SAAA;AACT;AAEA,MAAM,kBAAkB,CAAC,OAAY,EAAE,UAAe;AACpD,QAAM,YAAyC;AAAA,IAC7C,UAAU,IAAI;AAAA,EAAA;AAGT,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEA,MAAM,eAAkC,CAAC,UAAU;AAC3C,QAAA,eAAe,KAAK,kBAAkB;AACtC,QAAA,YAAY,KAAK,eAAe;AACxC;AACA,aAAa,aAAa;AAE1B,MAAA,iBAAe;"}
|