@hitachivantara/uikit-react-core 5.58.2 → 5.59.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Accordion/Accordion.cjs.map +1 -1
- package/dist/cjs/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/Badge/Badge.styles.cjs.map +1 -1
- package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs.map +1 -1
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs +1 -2
- package/dist/cjs/BaseDropdown/BaseDropdown.cjs.map +1 -1
- package/dist/cjs/BaseInput/BaseInput.styles.cjs.map +1 -1
- package/dist/cjs/BaseInput/validations.cjs.map +1 -1
- package/dist/cjs/BaseRadio/BaseRadio.cjs.map +1 -1
- package/dist/cjs/BaseSwitch/BaseSwitch.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/BreadCrumb.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/Page/Page.cjs.map +1 -1
- package/dist/cjs/BreadCrumb/utils.cjs.map +1 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs +13 -1
- package/dist/cjs/BulkActions/BulkActions.styles.cjs.map +1 -1
- package/dist/cjs/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/Calendar/Calendar.cjs.map +1 -1
- package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs.map +1 -1
- package/dist/cjs/Card/Media/Media.cjs.map +1 -1
- package/dist/cjs/Carousel/Carousel.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselControls.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselSlide/CarouselSlide.cjs.map +1 -1
- package/dist/cjs/Carousel/CarouselThumbnails.cjs.map +1 -1
- package/dist/cjs/Controls/Controls.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs +12 -20
- package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map +1 -1
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs +4 -34
- package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs.map +1 -1
- package/dist/cjs/Dropdown/List/List.cjs.map +1 -1
- package/dist/cjs/DropdownButton/DropdownButton.cjs +57 -0
- package/dist/cjs/DropdownButton/DropdownButton.cjs.map +1 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs +65 -0
- package/dist/cjs/DropdownButton/DropdownButton.styles.cjs.map +1 -0
- package/dist/cjs/FileUploader/DropZone/DropZone.cjs.map +1 -1
- package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs.map +1 -1
- package/dist/cjs/Focus/Focus.cjs +1 -3
- package/dist/cjs/Focus/Focus.cjs.map +1 -1
- package/dist/cjs/Forms/Adornment/Adornment.cjs.map +1 -1
- package/dist/cjs/Forms/Suggestions/Suggestions.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/MenuBar/MenuBar.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/Navigation.cjs.map +1 -1
- package/dist/cjs/Header/Navigation/utils/FocusContext.cjs.map +1 -1
- package/dist/cjs/IconButton/IconButton.cjs +2 -1
- package/dist/cjs/IconButton/IconButton.cjs.map +1 -1
- package/dist/cjs/InlineEditor/InlineEditor.cjs.map +1 -1
- package/dist/cjs/Input/Input.cjs +1 -3
- package/dist/cjs/Input/Input.cjs.map +1 -1
- package/dist/cjs/ListContainer/ListContainer.cjs +3 -5
- package/dist/cjs/ListContainer/ListContainer.cjs.map +1 -1
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs +4 -6
- package/dist/cjs/ListContainer/ListItem/ListItem.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.cjs +24 -11
- package/dist/cjs/MultiButton/MultiButton.cjs.map +1 -1
- package/dist/cjs/MultiButton/MultiButton.styles.cjs +56 -326
- package/dist/cjs/MultiButton/MultiButton.styles.cjs.map +1 -1
- package/dist/cjs/Pagination/Pagination.cjs.map +1 -1
- package/dist/cjs/Pagination/Pagination.styles.cjs.map +1 -1
- package/dist/cjs/Pagination/Select.cjs.map +1 -1
- package/dist/cjs/Radio/Radio.cjs.map +1 -1
- package/dist/cjs/Select/Select.cjs +6 -2
- package/dist/cjs/Select/Select.cjs.map +1 -1
- package/dist/cjs/SelectionList/SelectionList.cjs +4 -6
- package/dist/cjs/SelectionList/SelectionList.cjs.map +1 -1
- package/dist/cjs/Slider/Slider.cjs.map +1 -1
- package/dist/cjs/Slider/Slider.styles.cjs.map +1 -1
- package/dist/cjs/Slider/utils.cjs.map +1 -1
- package/dist/cjs/Snackbar/Snackbar.cjs.map +1 -1
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs +0 -3
- package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.styles.cjs.map +1 -1
- package/dist/cjs/SnackbarProvider/SnackbarProvider.cjs.map +1 -1
- package/dist/cjs/Stack/Stack.cjs +2 -3
- package/dist/cjs/Stack/Stack.cjs.map +1 -1
- package/dist/cjs/Switch/Switch.cjs.map +1 -1
- package/dist/cjs/Tab/Tab.styles.cjs.map +1 -1
- package/dist/cjs/Table/Table.cjs.map +1 -1
- package/dist/cjs/Table/TableBody/TableBody.cjs.map +1 -1
- package/dist/cjs/Table/TableCell/TableCell.cjs.map +1 -1
- package/dist/cjs/Table/TableCell/TableCell.styles.cjs.map +1 -1
- package/dist/cjs/Table/TableHeader/TableHeader.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useHeaderGroups.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useResizeColumns.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useRowExpand.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useRowSelection.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useSticky.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useTableStyles.cjs.map +1 -1
- package/dist/cjs/Tag/Tag.cjs.map +1 -1
- package/dist/cjs/Tag/Tag.styles.cjs.map +1 -1
- package/dist/cjs/TagsInput/TagsInput.cjs.map +1 -1
- package/dist/cjs/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs.map +1 -1
- package/dist/cjs/TreeView/TreeItem/TreeItem.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/Actions/Action.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/Header/Header.cjs.map +1 -1
- package/dist/cjs/VerticalNavigation/VerticalNavigationContext.cjs.map +1 -1
- package/dist/cjs/hooks/useClickOutside.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/esm/Accordion/Accordion.js.map +1 -1
- package/dist/esm/Avatar/Avatar.js.map +1 -1
- package/dist/esm/Badge/Badge.styles.js.map +1 -1
- package/dist/esm/BaseCheckBox/BaseCheckBox.js.map +1 -1
- package/dist/esm/BaseDropdown/BaseDropdown.js +2 -2
- package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
- package/dist/esm/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/BaseInput/validations.js.map +1 -1
- package/dist/esm/BaseRadio/BaseRadio.js.map +1 -1
- package/dist/esm/BaseSwitch/BaseSwitch.js.map +1 -1
- package/dist/esm/BreadCrumb/BreadCrumb.js.map +1 -1
- package/dist/esm/BreadCrumb/Page/Page.js.map +1 -1
- package/dist/esm/BreadCrumb/utils.js.map +1 -1
- package/dist/esm/BulkActions/BulkActions.styles.js +13 -1
- package/dist/esm/BulkActions/BulkActions.styles.js.map +1 -1
- package/dist/esm/Button/Button.styles.js.map +1 -1
- package/dist/esm/Calendar/Calendar.js.map +1 -1
- package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
- package/dist/esm/Card/Media/Media.js.map +1 -1
- package/dist/esm/Carousel/Carousel.js.map +1 -1
- package/dist/esm/Carousel/CarouselControls.js.map +1 -1
- package/dist/esm/Carousel/CarouselSlide/CarouselSlide.js.map +1 -1
- package/dist/esm/Carousel/CarouselThumbnails.js.map +1 -1
- package/dist/esm/Controls/Controls.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.js +12 -20
- package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js +4 -34
- package/dist/esm/DropDownMenu/DropDownMenu.styles.js.map +1 -1
- package/dist/esm/Dropdown/List/List.js.map +1 -1
- package/dist/esm/DropdownButton/DropdownButton.js +58 -0
- package/dist/esm/DropdownButton/DropdownButton.js.map +1 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js +65 -0
- package/dist/esm/DropdownButton/DropdownButton.styles.js.map +1 -0
- package/dist/esm/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/FileUploader/DropZone/DropZone.styles.js.map +1 -1
- package/dist/esm/Focus/Focus.js +2 -2
- package/dist/esm/Focus/Focus.js.map +1 -1
- package/dist/esm/Forms/Adornment/Adornment.js.map +1 -1
- package/dist/esm/Forms/Suggestions/Suggestions.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuBar/MenuBar.js.map +1 -1
- package/dist/esm/Header/Navigation/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/Header/Navigation/Navigation.js.map +1 -1
- package/dist/esm/Header/Navigation/utils/FocusContext.js.map +1 -1
- package/dist/esm/IconButton/IconButton.js +2 -1
- package/dist/esm/IconButton/IconButton.js.map +1 -1
- package/dist/esm/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/esm/Input/Input.js +2 -2
- package/dist/esm/Input/Input.js.map +1 -1
- package/dist/esm/ListContainer/ListContainer.js +4 -4
- package/dist/esm/ListContainer/ListContainer.js.map +1 -1
- package/dist/esm/ListContainer/ListItem/ListItem.js +5 -5
- package/dist/esm/ListContainer/ListItem/ListItem.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.js +26 -11
- package/dist/esm/MultiButton/MultiButton.js.map +1 -1
- package/dist/esm/MultiButton/MultiButton.styles.js +56 -326
- package/dist/esm/MultiButton/MultiButton.styles.js.map +1 -1
- package/dist/esm/Pagination/Pagination.js.map +1 -1
- package/dist/esm/Pagination/Pagination.styles.js.map +1 -1
- package/dist/esm/Pagination/Select.js.map +1 -1
- package/dist/esm/Radio/Radio.js.map +1 -1
- package/dist/esm/Select/Select.js +6 -2
- package/dist/esm/Select/Select.js.map +1 -1
- package/dist/esm/SelectionList/SelectionList.js +5 -5
- package/dist/esm/SelectionList/SelectionList.js.map +1 -1
- package/dist/esm/Slider/Slider.js.map +1 -1
- package/dist/esm/Slider/Slider.styles.js.map +1 -1
- package/dist/esm/Slider/utils.js.map +1 -1
- package/dist/esm/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js +0 -3
- package/dist/esm/Snackbar/SnackbarContent/SnackbarContent.styles.js.map +1 -1
- package/dist/esm/SnackbarProvider/SnackbarProvider.js.map +1 -1
- package/dist/esm/Stack/Stack.js +3 -3
- package/dist/esm/Stack/Stack.js.map +1 -1
- package/dist/esm/Switch/Switch.js.map +1 -1
- package/dist/esm/Tab/Tab.styles.js.map +1 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Table/TableBody/TableBody.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
- package/dist/esm/Table/TableCell/TableCell.styles.js.map +1 -1
- package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
- package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
- package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
- package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
- package/dist/esm/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/esm/Table/hooks/useSticky.js.map +1 -1
- package/dist/esm/Table/hooks/useTableStyles.js.map +1 -1
- package/dist/esm/Tag/Tag.js.map +1 -1
- package/dist/esm/Tag/Tag.styles.js.map +1 -1
- package/dist/esm/TagsInput/TagsInput.js.map +1 -1
- package/dist/esm/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/DefaultContent.js.map +1 -1
- package/dist/esm/TreeView/TreeItem/TreeItem.js.map +1 -1
- package/dist/esm/VerticalNavigation/Actions/Action.js.map +1 -1
- package/dist/esm/VerticalNavigation/Header/Header.js.map +1 -1
- package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
- package/dist/esm/hooks/useClickOutside.js.map +1 -1
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/types/index.d.ts +247 -258
- package/package.json +5 -5
- package/dist/cjs/Select/SelectButton.cjs +0 -92
- package/dist/cjs/Select/SelectButton.cjs.map +0 -1
- package/dist/esm/Select/SelectButton.js +0 -92
- package/dist/esm/Select/SelectButton.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import {
|
|
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 SnackbarCloseReason,\n SnackbarOrigin,\n SnackbarProps as MuiSnackbarProps,\n} from \"@mui/material/Snackbar\";\n\nimport { capitalize } from \"../utils/helpers\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvSnackbarContentProps, HvSnackbarContent } from \"./SnackbarContent\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\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,mBAAmB,eAAe,WAAW,aAAa,QAAQ,CAAC,EAAE;AAAA,MAEvE;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;"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import { createClasses } from "../../utils/classes.js";
|
|
3
3
|
import { staticClasses as staticClasses$1 } from "../../ActionsGeneric/ActionsGeneric.styles.js";
|
|
4
|
-
import "@emotion/react/jsx-runtime";
|
|
5
|
-
import "react";
|
|
6
|
-
import "@hitachivantara/uikit-react-icons";
|
|
7
4
|
const { useClasses, staticClasses } = createClasses(
|
|
8
5
|
"HvSnackbar-Content",
|
|
9
6
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { actionsGenericClasses } from \"../../ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n paddingLeft: theme.space.xs,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n textWrap: \"balance\",\n overflow: \"hidden\",\n },\n action: {\n textAlign: \"right\",\n paddingLeft: theme.space.xs,\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["actionsGenericClasses"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../src/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { actionsGenericClasses } from \"../../ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvSnackbar-Content\",\n {\n root: {\n width: \"310px\",\n minHeight: \"52px\",\n maxHeight: \"92px\",\n padding: theme.space.xs,\n boxShadow: \"none\",\n },\n success: {\n backgroundColor: theme.colors.positive_20,\n },\n error: {\n backgroundColor: theme.colors.negative_20,\n },\n default: {\n backgroundColor: theme.colors.neutral_20,\n },\n warning: {\n backgroundColor: theme.colors.warning_20,\n },\n message: {\n padding: 0,\n width: \"100%\",\n },\n messageSpan: {\n display: \"flex\",\n alignItems: \"center\",\n minHeight: \"32px\",\n },\n messageText: {\n paddingLeft: theme.space.xs,\n color: theme.colors.base_dark,\n fontFamily: theme.fontFamily.body,\n maxHeight: \"72px\",\n wordBreak: \"break-word\",\n textWrap: \"balance\",\n overflow: \"hidden\",\n },\n action: {\n textAlign: \"right\",\n paddingLeft: theme.space.xs,\n marginLeft: \"auto\",\n [`& .${actionsGenericClasses.button}`]: {\n borderColor: theme.colors.base_dark,\n color: theme.colors.base_dark,\n \"&:hover\": {\n borderColor: theme.colors.base_dark,\n },\n },\n },\n iconVariant: {},\n }\n);\n"],"names":["actionsGenericClasses"],"mappings":";;;AAKa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACL,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,OAAO,MAAM,OAAO;AAAA,MACpB,YAAY,MAAM,WAAW;AAAA,MAC7B,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,MACzB,YAAY;AAAA,MACZ,CAAC,MAAMA,gBAAsB,MAAM,EAAE,GAAG;AAAA,QACtC,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,QACpB,WAAW;AAAA,UACT,aAAa,MAAM,OAAO;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA,aAAa,CAAC;AAAA,EAChB;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef,
|
|
1
|
+
{"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport {\n OptionsObject,\n SnackbarContent,\n SnackbarProvider,\n SnackbarProviderProps,\n useSnackbar,\n} from \"notistack\";\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n HvSnackbarContent,\n HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n /** Your component tree. */\n children: React.ReactNode;\n /** Max visible snackbars. */\n maxSnack?: number;\n /** How much time the snackbar remains visible in milliseconds. */\n autoHideDuration?: number;\n /** Where is the snackbar placed. */\n anchorOrigin?: SnackbarOrigin;\n /** Class object used to override notistack classes. */\n notistackClassesOverride?: SnackbarProviderProps[\"classes\"];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSnackbarProviderClasses;\n /** Class names to be applied. */\n className?: string;\n /** The container the snackbar should slide from. */\n container?: SnackbarProviderProps[\"domRoot\"];\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n /** Id to be applied to the root node. */\n id?: string;\n /** class name to apply on the root node */\n className?: string;\n /** Your component tree. */\n message?: React.ReactNode;\n /** Variant of the snackbar. */\n variant?: HvSnackbarVariant;\n /** Extra values to pass to the snackbar. */\n snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n HTMLDivElement,\n HvNotistackSnackMessageProps\n>((props, ref) => {\n const { id, message, variant = \"success\", snackbarContentProps } = props;\n\n return (\n <SnackbarContent ref={ref}>\n <HvSnackbarContent\n id={id}\n variant={variant}\n showIcon\n label={message}\n role=\"none\"\n {...snackbarContentProps}\n />\n </SnackbarContent>\n );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n const snackbarContext = useSnackbar();\n\n if (!snackbarContext) {\n throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n }\n\n const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n snackbarContext;\n\n const enqueueSnackbar = useCallback(\n (message: React.ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n const {\n id,\n variant = \"success\",\n snackbarContentProps,\n className,\n ...otherOptions\n } = options;\n\n return enqueueNotistackSnackbar(\n <HvNotistackSnackMessage\n id={id}\n message={message}\n variant={variant}\n snackbarContentProps={snackbarContentProps}\n />,\n { ...otherOptions, className }\n );\n },\n [enqueueNotistackSnackbar]\n );\n return useMemo(\n () => ({\n enqueueSnackbar,\n closeSnackbar,\n }),\n [enqueueSnackbar, closeSnackbar]\n );\n};\n\nexport const HvSnackbarProvider = ({\n children,\n notistackClassesOverride,\n maxSnack = 5,\n autoHideDuration = 5000,\n anchorOrigin = {\n vertical: \"top\",\n horizontal: \"right\",\n },\n classes: classesProp,\n className,\n container,\n ...others\n}: HvSnackbarProviderProps) => {\n const { classes, css, cx } = useClasses(classesProp);\n\n const { containerRoot, ...otherNotistackClasses } =\n notistackClassesOverride || {};\n\n const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n containerRoot: cx(\n css({\n pointerEvents: \"all\",\n \"& > div > div\": {\n // Overrides notistack extra padding\n padding: \"0 !important\",\n transition: \"all 0s ease 0s !important\",\n },\n }),\n containerRoot\n ),\n ...otherNotistackClasses,\n };\n\n return (\n <SnackbarProvider\n classes={notistackClasses}\n maxSnack={maxSnack}\n autoHideDuration={autoHideDuration}\n anchorOrigin={anchorOrigin}\n className={cx(classes.snackItemRoot, className)}\n domRoot={container}\n {...others}\n >\n {children}\n </SnackbarProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;AAsDA,MAAM,0BAA0B,WAG9B,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,qBAAyB,IAAA;AAGjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB;AAExB,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,QAAM,EAAE,iBAAiB,0BAA0B,cAAA,IACjD;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAA0B,UAAwC,OAAO;AAClE,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACD,IAAA;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAAA;AAAA,IAEjC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAAA;AAEpB,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EAAA;AAEnC;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,EAAE,eAAe,GAAG,sBAAsB,IAC9C,4BAA4B,CAAA;AAE9B,QAAM,mBAAqD;AAAA,IACzD,eAAe;AAAA,MACb,IAAI;AAAA,QACF,eAAe;AAAA,QACf,iBAAiB;AAAA;AAAA,UAEf,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA,MAAA,CACD;AAAA,MACD;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EAAA;AAIH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC9C,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
package/dist/esm/Stack/Stack.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import { useRef, useMemo, useCallback, Children } from "react";
|
|
3
3
|
import { useTheme } from "@mui/material/styles";
|
|
4
4
|
import MuiDivider from "@mui/material/Divider";
|
|
5
5
|
import { useWidth } from "../hooks/useWidth.js";
|
|
@@ -62,7 +62,7 @@ const HvStack = (props) => {
|
|
|
62
62
|
className
|
|
63
63
|
),
|
|
64
64
|
...others,
|
|
65
|
-
children:
|
|
65
|
+
children: Children.map(children, (child, i) => {
|
|
66
66
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
67
67
|
divider && i !== 0 && getDividerComponent(),
|
|
68
68
|
withNavigation ? /* @__PURE__ */ jsx(
|
|
@@ -71,7 +71,7 @@ const HvStack = (props) => {
|
|
|
71
71
|
rootRef: containerRef,
|
|
72
72
|
focusDisabled: false,
|
|
73
73
|
strategy: "grid",
|
|
74
|
-
navigationJump: processedDirection === "column" ? 1 :
|
|
74
|
+
navigationJump: processedDirection === "column" ? 1 : Children.count(children) || 0,
|
|
75
75
|
filterClass: "child",
|
|
76
76
|
children: /* @__PURE__ */ jsx("div", { className: "child", children: child })
|
|
77
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sources":["../../../src/Stack/Stack.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Stack.js","sources":["../../../src/Stack/Stack.tsx"],"sourcesContent":["import { useMemo, useRef, useCallback, Children } from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiDivider, {\n DividerProps as MuiDividerProps,\n} from \"@mui/material/Divider\";\n\nimport { HvBreakpoints } from \"@hitachivantara/uikit-styles\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvFocus } from \"../Focus\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } 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 = \"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 processedDirection = useMemo(\n () => getDirection(direction, width, breakpoints.keys),\n [direction, 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={\n processedDirection === \"column\" ? \"horizontal\" : \"vertical\"\n }\n flexItem={processedDirection === \"row\"}\n role=\"separator\"\n {...dividerProps}\n />\n );\n }\n return divider;\n }, [divider, dividerProps, processedDirection]);\n\n return (\n <div\n ref={containerRef}\n className={cx(\n classes.root,\n classes[processedDirection],\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 processedDirection === \"column\"\n ? 1\n : 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":";;;;;;;;;AAiDA,MAAM,eAAe,CAAC,WAAgB,OAAY,gBAAqB;AACrE,MAAI,OAAO,cAAc;AAAiB,WAAA;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,YAAY;AAAA,IACZ,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,qBAAqB;AAAA,IACzB,MAAM,aAAa,WAAW,OAAO,YAAY,IAAI;AAAA,IACrD,CAAC,WAAW,OAAO,WAAW;AAAA,EAAA;AAQ1B,QAAA,sBAAsB,YAAY,MAAM;AACxC,QAAA,OAAO,YAAY,aAAa,SAAS;AAEzC,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aACE,uBAAuB,WAAW,eAAe;AAAA,UAEnD,UAAU,uBAAuB;AAAA,UACjC,MAAK;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AACO,WAAA;AAAA,EACN,GAAA,CAAC,SAAS,cAAc,kBAAkB,CAAC;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,kBAAkB;AAAA,QAC1B,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,uBAAuB,WACnB,IACA,SAAS,MAAM,QAAQ,KAAK;AAAA,cAElC,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":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport {\n HvWarningText,\n HvLabelProps,\n HvFormStatus,\n HvFormElement,\n HvLabel,\n} from \"../Forms\";\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvSwitchClasses;\n /**\n * The form element name.\n */\n name?: string;\n /**\n * The value of the form element.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * The label of the form element.\n *\n * The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n */\n label?: React.ReactNode;\n /**\n * Properties passed on to the label element.\n */\n labelProps?: HvLabelProps;\n /**\n * Indicates that the form element is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the form element is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n */\n status?: HvFormStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: string;\n /**\n * Identifies the element that provides an error message for the switch.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** @ignore */\n ref?: MuiSwitchProps[\"ref\"];\n /** @ignore */\n component?: MuiSwitchProps[\"component\"];\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked)\n );\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, value]\n );\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId: string | undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.styles.js","sources":["../../../src/Tab/Tab.styles.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Tab.styles.js","sources":["../../../src/Tab/Tab.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n root: {\n marginTop: \"3px\",\n padding: \"0 16px\",\n minWidth: 70,\n minHeight: 32,\n textTransform: \"none\",\n fontFamily: theme.fontFamily.body,\n ...(theme.typography.body as React.CSSProperties),\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.base,\n \"&::after\": {\n height: \"1px\",\n backgroundColor: theme.colors.atmo4,\n },\n },\n \"&$selected\": {\n color: theme.typography.label.color,\n fontWeight: theme.typography.label.fontWeight,\n lineHeight: theme.typography.label.lineHeight,\n letterSpacing: theme.typography.label.letterSpacing,\n },\n \"&$disabled\": {\n color: theme.colors.secondary_60,\n cursor: \"not-allowed\",\n pointerEvents: \"all\",\n opacity: 1,\n \"&:hover\": {\n background: \"none\",\n },\n },\n opacity: 1,\n \"&::after\": {\n position: \"absolute\",\n left: 0,\n top: \"calc(100% - 1px)\",\n height: \"1px\",\n width: \"100%\",\n backgroundColor: theme.colors.atmo4,\n content: \"''\",\n },\n // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n \"& .MuiTab-iconWrapper\": {\n margin: 0,\n },\n },\n focusVisible: {\n ...outlineStyles,\n },\n selected: {},\n disabled: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,eAAe;AAAA,IACf,YAAY,MAAM,WAAW;AAAA,IAC7B,GAAI,MAAM,WAAW;AAAA,IACrB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,MAC1B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,WAAW,MAAM;AAAA,MAC9B,YAAY,MAAM,WAAW,MAAM;AAAA,MACnC,YAAY,MAAM,WAAW,MAAM;AAAA,MACnC,eAAe,MAAM,WAAW,MAAM;AAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,MAAM,OAAO;AAAA,MACpB,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AACb,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef,
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport TableContext from \"./TableContext\";\nimport { staticClasses, useClasses } from \"./Table.styles\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n | \"center\"\n | \"inherit\"\n | \"justify\"\n | \"left\"\n | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n | \"checkbox\"\n | \"expand\"\n | \"actions\"\n | \"default\"\n | \"none\";\n\nexport interface HvTableProps\n extends React.TableHTMLAttributes<HTMLTableElement> {\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to `table`.\n *\n * When using non-table elements, layout is up to the developer using the component.\n */\n component?: React.ElementType;\n /** Content to be rendered */\n children: React.ReactNode;\n /** Whether the `HvTable` has a sticky header row. */\n stickyHeader?: boolean;\n /** Whether the `HvTable` has sticky columns. */\n stickyColumns?: boolean;\n /** Whether the `HvTable` has the list row styles or the default. */\n variant?: HvTableVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent: React.ElementType<any>) => {\n if (rootComponent === \"table\") {\n return {\n Table: \"table\",\n THead: \"thead\",\n TBody: \"tbody\",\n Tr: \"tr\",\n Th: \"th\",\n Td: \"td\",\n };\n }\n\n return {\n Table: rootComponent,\n THead: rootComponent,\n TBody: rootComponent,\n Tr: rootComponent,\n Th: rootComponent,\n Td: rootComponent,\n };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n const {\n classes: classesProp,\n className,\n component = defaultComponent,\n stickyHeader = false,\n stickyColumns = false,\n variant = \"default\",\n ...others\n } = useDefaultProps(\"HvTable\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const containerRef = useRef(ref);\n\n const components = useMemo(\n () => computeTablePartComponents(component),\n [component]\n );\n\n const tableContext = useMemo(\n () => ({ components, variant, containerRef }),\n [components, variant, containerRef]\n );\n\n const Table = useMemo(() => components.Table, [components]);\n\n return (\n <TableContext.Provider value={tableContext}>\n <Table\n ref={ref}\n role={component === defaultComponent ? null : \"table\"}\n className={cx(\n classes.root,\n {\n [classes.stickyHeader]: stickyHeader,\n [classes.stickyColumns]: stickyColumns,\n [classes.listRow]: variant === \"listrow\",\n },\n className\n )}\n {...others}\n />\n </TableContext.Provider>\n );\n});\n"],"names":[],"mappings":";;;;;;AAgDA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAA0C;AAC5E,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAYO,MAAM,UAAU,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EAAA;AAGpC,QAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;AAE1D,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,cAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,MAC9C,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n useContext,\n useRef,\n} from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvFocus } from \"../../Focus\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /**\n * Content to be rendered\n */\n children: React.ReactNode;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to tbody.\n */\n component?: React.ElementType;\n /** Sets whether or not there should be arrow navigation between the table rows */\n withNavigation?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n type: \"body\",\n filterClassName: \"_grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n (\n {\n classes: classesProp,\n className,\n component,\n children,\n withNavigation = false,\n ...others\n },\n externalRef\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const bodyRef = useRef(null);\n\n const handleRef = useForkRef(externalRef, bodyRef);\n\n const Component =\n component || tableContext?.components?.TBody || defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(classes.root, className)}\n ref={handleRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n >\n {withNavigation\n ? Children.map(children, (element) => {\n if (isValidElement(element)) {\n return (\n <HvFocus\n id={`my-id-${element.key}`}\n rootRef={bodyRef}\n key={`row-${element.key}`}\n strategy=\"grid\"\n filterClass={tableSectionContext.filterClassName}\n navigationJump={1}\n focusDisabled={false}\n selected={element.props.selected}\n >\n {element}\n </HvFocus>\n );\n }\n })\n : children}\n </Component>\n </TableSectionContext.Provider>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAsCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,KAEL,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAAA;AAAA,UAU7B;AAAA,QACD,CAAA,IACD;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\n\nimport { capitalize } from \"../../utils/helpers\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\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)}`]]: align !== \"inherit\",\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes.variantListHead]:\n tableContext.variant === \"listrow\" && type !== \"body\",\n [classes[`variant${capitalize(variant)}`]]: 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":";;;;;;;;AAqDA,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,IAAI;AAAA,UACZ;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAAE,CAAC,GAAG,UAAU;AAAA,YAClD,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QAAQ,UAAU,WAAW,OAAO,CAAC,EAAE,CAAC,GAAG,YAAY;AAAA,YACxD,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":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst sortedColor = theme.alpha(\"primary\", 0.1);\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n /** Styles applied to the component root class. */\n root: {\n verticalAlign: \"inherit\",\n textAlign: \"left\",\n padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n theme.space.xs\n } - 3px ) ${theme.spacing(4)}`,\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's in the table head. */\n head: {\n height: 52,\n verticalAlign: \"top\",\n\n backgroundColor: theme.colors.atmo1,\n borderTop: \"1px solid transparent\",\n borderBottom: `1px solid ${theme.colors.atmo4}`,\n ...(theme.typography.label as React.CSSProperties),\n },\n /** Styles applied to the cell when it's in the table body. */\n body: {\n minHeight: 32,\n \"td&\": {\n height: 32,\n },\n backgroundColor: \"inherit\",\n ...(theme.typography.body as React.CSSProperties),\n fontFamily: theme.fontFamily.body,\n\n \"&$sorted\": {\n backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n },\n },\n /** Styles applied to the cell when it's in the table footer. */\n footer: {},\n /** Styles applied to the cell when it's part of a sorted column. */\n sorted: {},\n /** Styles applied to the component root when it is left aligned */\n alignLeft: {\n textAlign: \"left\",\n },\n /** Styles applied to the component root when it is center aligned */\n alignCenter: {\n textAlign: \"center\",\n },\n /** Styles applied to the component root when it is right aligned */\n alignRight: {\n textAlign: \"right\",\n flexDirection: \"row-reverse\",\n },\n /** Styles applied to the component root when it is justified */\n alignJustify: {\n textAlign: \"justify\",\n },\n\n /** Styles applied to the component root when its variant is none */\n variantNone: {\n padding: 0,\n },\n /** Styles applied to the component root when its variant is checkbox */\n variantCheckbox: {\n boxSizing: \"content-box\",\n padding: 0,\n width: 32,\n maxWidth: 32,\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the component root when its variant is actions */\n variantActions: {\n boxSizing: \"content-box\",\n padding: 0,\n width: 32,\n maxWidth: 32,\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the component root when its variant is expand */\n variantExpand: {\n paddingLeft: 0,\n paddingTop: 0,\n paddingBottom: 0,\n },\n /** Styles applied to the component root when its variant is list */\n variantList: {\n minHeight: 52,\n \"td&\": {\n height: 52,\n },\n padding: \"0, 0, 0, 32px\",\n border: 0,\n },\n /** Styles applied to the cell when its variant is list and the type is head. */\n variantListHead: {\n backgroundColor: \"inherit\",\n \"td&\": {\n height: 16,\n },\n },\n /** Styles applied to the cell when its variant is list and actions. */\n variantListactions: {\n verticalAlign: \"middle\",\n borderLeft: \"none\",\n paddingLeft: \"0\",\n textAlign: \"center\",\n width: 130,\n maxWidth: 130,\n },\n /** Styles applied to the cell when its variant is list and checkbox. */\n variantListcheckbox: {\n borderRight: \"none\",\n padding: 0,\n textAlign: \"center\",\n width: 34,\n maxWidth: 34,\n },\n /** Styles applied to the cell when it's part of a sticky column. */\n stickyColumn: {\n position: \"sticky\",\n zIndex: 2,\n backgroundColor: theme.colors.atmo2,\n\n \"&$groupColumnMostRight+$stickyColumn\": {\n borderLeft: 0,\n },\n },\n /** Styles applied to the cell when it's part of the last sticky to the left column. */\n stickyColumnMostLeft: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's part of the first right sticky column. */\n stickyColumnLeastRight: {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n },\n\n /** Styles applied to the cell when it's part of the first column in the group. */\n groupColumnMostLeft: {\n borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n \"&:first-of-type\": {\n borderLeft: 0,\n },\n },\n /** Styles applied to the cell when it's part of the last column in the group. */\n groupColumnMostRight: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n // due to the \":has()\" selector not being supported in browsers,\n // this need to be managed with inline styles\n // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n \"&:last-child\": {\n borderRight: 0,\n },\n\n \"&+:not($stickyColumn)\": {\n borderLeft: 0,\n },\n },\n\n /** Styles applied to the cell when it's part of a resizable column. */\n resizable: {\n borderRight: `solid 1px ${theme.colors.atmo4}`,\n },\n /** Styles applied to the cell when it's part of a resizing column. */\n resizing: {\n borderRight: `solid 2px ${theme.colors.secondary}`,\n },\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { hexToRgb, alpha } from \"@mui/material/styles\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { capitalize } from \"../../utils/helpers\";\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { getSortIcon, isParagraph } from \"./utils\";\nimport { useClasses, staticClasses } from \"./TableHeader.styles\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeaderGroups.js","sources":["../../../../src/Table/hooks/useHeaderGroups.ts"],"sourcesContent":["import {
|
|
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.visibility = \"hidden\";\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,iBAAiB;AAC5C,QAAA,CAAC,WAAW,IAAI;AAEhB,QAAA,wBAAwB,YAAY,QAAQ;AAAA,IAChD,CAAC,MAAM,EAAE,iBAAiB;AAAA,EAAA;AAE5B,MAAI,CAAC,uBAAuB;AAC1B;AAAA,EACF;AAEM,QAAA,WAAW,aAAa,SAAS;AACjC,QAAA,YAAY,aAAa,QAAQ;AAEvC,cAAY,QAAQ,QAAQ,CAAC,QAAQ,aAAa;AAC1C,UAAA,EAAE,cAAkB,IAAA;AAE1B,UAAM,sBAAsB,iBAAiB;AAC7C,QAAI,qBAAqB;AAEvB,YAAM,YACJ,UAAU,QACP,MAAM,QAAQ,EACd,UAAU,CAAC,EAAE,GAAG,MAAM,OAAO,cAAc,EAAE,IAAI;AAGtD,aAAO,UAAU,cAAc;AAC/B,aAAO,QAAQ;AACL,gBAAA,QAAQ,SAAS,IAAI;AAG/B,oBAAc,UAAU,WAAW;AACvB,kBAAA,QAAQ,QAAQ,IAAI;AAAA,IAClC;AAAA,EAAA,CACD;AACH;AAEA,MAAM,eAAe,CAAC,QAAQ,eAAe,WAAW;AAAA,EACtD,qBAAqB,OAAO;AAAA,EAC5B,sBAAsB,OAAO;AAAA,EAC7B,SAAS,gBAAgB,OAAO,WAAW,OAAO,OAAO,UAAU;AACrE;AAGA,MAAM,qBAAqB,CAAC,OAAO,EAAE,UAAU,aAAa;AAC1D,QAAM,YAA0C,SAAS,oBACrD,aAAa,QAAQ,IAAI,IACzB;AAEJ,MAAI,SAAS,mBAAmB;AACxB,UAAA,gBAAgB,OAAO,iBAAiB;AAE9C,cAAU,QAAQ;AAAA,MAChB,SAAS,gBAAgB,SAAS,MAAM,OAAO;AAAA,IAAA;AAGjD,QAAI,SAAS,kBAAkB;AAC7B,UAAI,eAAe;AACjB,kBAAU,MAAM,aAAa;AAAA,MAC/B;AAEI,UAAA,OAAO,UAAU,GAAG;AAEtB,kBAAU,MAAM,SAAS,4DACvB,OAAO,UAAU,CACnB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEO,SAAA,CAAC,OAAO,SAAS;AAC1B;AAGA,MAAM,mBAAmB,CAAC,OAAO,EAAE,UAAU,WAAW;AACtD,QAAM,YAAwC,SAAS,oBACnD,aAAa,KAAK,MAAM,IACxB;AAEG,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEA,MAAM,qBAAqB,CAAC,gBAAgB,EAAE,eAAe;AACrD,QAAA,iCAAiB;AAEvB,iBAAe,QAAQ,CAAC,EAAE,aAAa;AACrC,QAAI,UAAU,QAAQ,CAAC,WAAW,IAAI,MAAM,GAAG;AAC7C,iBAAW,IAAI,MAAM;AAAA,IACvB;AAAA,EAAA,CACD;AAEK,QAAA,oBAAoB,WAAW,OAAO;AAC5C,MAAI,mBAAmB;AACV,eAAA,QAAQ,CAAC,WAAgB;AAClC,aAAO,QAAQ;AACf,aAAO,oBAAoB;AAC3B,aAAO,qBAAqB;AAEtB,YAAA,EAAE,QAAY,IAAA;AACZ,cAAA,CAAC,EAAE,oBAAoB;AAC/B,cAAQ,QAAQ,SAAS,CAAC,EAAE,qBAAqB;AAAA,IAAA,CAClD;AAAA,EACH;AAEA,SAAO,OAAO,UAAU,EAAE,kBAAmB,CAAA;AAEtC,SAAA;AACT;AAEA,MAAM,kBAAkB,CAAC,aAAa;AACpC,MAAI,SAAS,mBAAmB;AAC9B,8BAA0B,SAAS,YAAY;AAAA,EACjD;AACF;AAEA,MAAM,kBAA0C,CAAC,UAAU;AACnD,QAAA,eAAe,KAAK,kBAAkB;AACtC,QAAA,YAAY,KAAK,eAAe;AAGhC,QAAA,eAAe,KAAK,kBAAkB;AAEtC,QAAA,aAAa,KAAK,gBAAgB;AAC1C;AAEA,gBAAgB,aAAa;AAE7B,MAAA,oBAAe;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeColumns.js","sources":["../../../../src/Table/hooks/useResizeColumns.ts"],"sourcesContent":["import {
|
|
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,OAAO,EAAE,aAAa;AAChD,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,OAAO,EAAE,WAAW;AAC5C,QAAM,YAAuC;AAAA,IAC3C,WAAW,KAAK,OAAO;AAAA,IACvB,UAAU,KAAK,OAAO;AAAA,EAAA;AAGjB,SAAA,CAAC,OAAO,SAAS;AAC1B;AAEA,MAAM,kBAAkB,CAAC,aAAa;AACpC;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;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useRowExpand.js","sources":["../../../../src/Table/hooks/useRowExpand.tsx"],"sourcesContent":["import {\n Hooks,\n TableExpandedToggleProps,\n UseExpandedRowProps,\n} from \"react-table\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { HvButton } from \"../../Button\";\n\nimport { useLabels } from \"../../hooks/useLabels\";\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 = ({ row, cell, labels: labelsProp }) => {\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, { instance }) => {\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) => 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, { row }) => {\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":";;;;;AAyCA,MAAM,iBAAiB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,4BAA4B;AAC9B;AAEO,MAAM,uBAAuB,CAAC,EAAE,KAAK,MAAM,QAAQ,iBAAiB;AACnE,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,SAAS,EAAE,eAAe;AACpD,MAAI,SAAS,2BAA2B;AAC/B,WAAA;AAAA,EACT;AAIA,QAAM,uBAAuB,QAAQ;AAAA,IACnC,CAAC,MAAM,EAAE,IAAI,QAAQ,MAAM,MAAM;AAAA,EAAA;AAGnC,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,OAAO,EAAE,UAAU;AAC1C,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;"}
|