@hitachivantara/uikit-react-core 5.0.0-next.17 → 5.0.0-next.18
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/README.md +1 -1
- package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map +1 -1
- package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs +1 -1
- package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs.map +1 -1
- package/dist/cjs/components/List/List.cjs +4 -3
- package/dist/cjs/components/List/List.cjs.map +1 -1
- package/dist/cjs/components/List/utils.cjs +0 -10
- package/dist/cjs/components/List/utils.cjs.map +1 -1
- package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs +45 -0
- package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Actions/Action.styles.cjs +51 -0
- package/dist/cjs/components/VerticalNavigation/Actions/Action.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Actions/Actions.cjs +30 -0
- package/dist/cjs/components/VerticalNavigation/Actions/Actions.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Actions/Actions.styles.cjs +26 -0
- package/dist/cjs/components/VerticalNavigation/Actions/Actions.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Actions/actionClasses.cjs +8 -0
- package/dist/cjs/components/VerticalNavigation/Actions/actionClasses.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Actions/actionsClasses.cjs +8 -0
- package/dist/cjs/components/VerticalNavigation/Actions/actionsClasses.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Header/Header.cjs +45 -0
- package/dist/cjs/components/VerticalNavigation/Header/Header.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Header/Header.styles.cjs +23 -0
- package/dist/cjs/components/VerticalNavigation/Header/Header.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Header/headerClasses.cjs +8 -0
- package/dist/cjs/components/VerticalNavigation/Header/headerClasses.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs +134 -0
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.styles.cjs +22 -0
- package/dist/cjs/components/VerticalNavigation/Navigation/Navigation.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/Navigation/navigationClasses.cjs +8 -0
- package/dist/cjs/components/VerticalNavigation/Navigation/navigationClasses.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeView.cjs +643 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeView.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeView.styles.cjs +21 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeView.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewContext.cjs +10 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewContext.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.cjs +282 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs +132 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs +134 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/descendants.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/treeViewClasses.cjs +8 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/treeViewClasses.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/treeViewItemClasses.cjs +8 -0
- package/dist/cjs/components/VerticalNavigation/TreeView/treeViewItemClasses.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs +40 -0
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs +43 -0
- package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs.map +1 -0
- package/dist/cjs/components/VerticalNavigation/verticalNavigationClasses.cjs +8 -0
- package/dist/cjs/components/VerticalNavigation/verticalNavigationClasses.cjs.map +1 -0
- package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
- package/dist/cjs/hooks/useEnhancedEffect.cjs +6 -0
- package/dist/cjs/hooks/useEnhancedEffect.cjs.map +1 -0
- package/dist/cjs/index.cjs +37 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/utils/wrapperTooltip.cjs +13 -0
- package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -0
- package/dist/esm/components/BaseDropdown/BaseDropdown.js +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.js +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/components/FileUploader/DropZone/DropZone.js +1 -1
- package/dist/esm/components/FileUploader/DropZone/DropZone.js.map +1 -1
- package/dist/esm/components/List/List.js +2 -1
- package/dist/esm/components/List/List.js.map +1 -1
- package/dist/esm/components/List/utils.js +1 -11
- package/dist/esm/components/List/utils.js.map +1 -1
- package/dist/esm/components/VerticalNavigation/Actions/Action.js +43 -0
- package/dist/esm/components/VerticalNavigation/Actions/Action.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Actions/Action.styles.js +49 -0
- package/dist/esm/components/VerticalNavigation/Actions/Action.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Actions/Actions.js +28 -0
- package/dist/esm/components/VerticalNavigation/Actions/Actions.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Actions/Actions.styles.js +24 -0
- package/dist/esm/components/VerticalNavigation/Actions/Actions.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Actions/actionClasses.js +8 -0
- package/dist/esm/components/VerticalNavigation/Actions/actionClasses.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Actions/actionsClasses.js +8 -0
- package/dist/esm/components/VerticalNavigation/Actions/actionsClasses.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Header/Header.js +43 -0
- package/dist/esm/components/VerticalNavigation/Header/Header.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Header/Header.styles.js +21 -0
- package/dist/esm/components/VerticalNavigation/Header/Header.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Header/headerClasses.js +8 -0
- package/dist/esm/components/VerticalNavigation/Header/headerClasses.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js +132 -0
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.styles.js +20 -0
- package/dist/esm/components/VerticalNavigation/Navigation/Navigation.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/Navigation/navigationClasses.js +8 -0
- package/dist/esm/components/VerticalNavigation/Navigation/navigationClasses.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeView.js +641 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeView.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeView.styles.js +19 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeView.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewContext.js +10 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewContext.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js +280 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.styles.js +130 -0
- package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/descendants.js +134 -0
- package/dist/esm/components/VerticalNavigation/TreeView/descendants.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/treeViewClasses.js +8 -0
- package/dist/esm/components/VerticalNavigation/TreeView/treeViewClasses.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/TreeView/treeViewItemClasses.js +8 -0
- package/dist/esm/components/VerticalNavigation/TreeView/treeViewItemClasses.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.js +38 -0
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.styles.js +41 -0
- package/dist/esm/components/VerticalNavigation/VerticalNavigation.styles.js.map +1 -0
- package/dist/esm/components/VerticalNavigation/verticalNavigationClasses.js +8 -0
- package/dist/esm/components/VerticalNavigation/verticalNavigationClasses.js.map +1 -0
- package/dist/esm/hocs/withTooltip.js.map +1 -1
- package/dist/esm/hooks/useEnhancedEffect.js +6 -0
- package/dist/esm/hooks/useEnhancedEffect.js.map +1 -0
- package/dist/esm/index.js +55 -18
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/wrapperTooltip.js +13 -0
- package/dist/esm/utils/wrapperTooltip.js.map +1 -0
- package/dist/types/index.d.ts +502 -0
- package/package.json +3 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wrapperTooltip.cjs","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"hocs\";\n\nconst hideTooltip = (evt) => {\n const isOverFlow =\n evt.target.children.length > 1\n ? Array.of(...evt.target.children).some(\n (child) => child.scrollWidth > child.clientWidth\n )\n : evt.target.scrollWidth > evt.target.clientWidth;\n\n return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n const ComponentFunction = () => Component;\n return hasTooltips\n ? withTooltip(ComponentFunction, label, \"top\", hideTooltip, {}, {})\n : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";;;AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAElDV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AACzBD,SAAAA,cACHI,oBAAYD,mBAAmBD,OAAO,OAAOf,aAAa,CAAC,GAAG,EAAE,IAChEgB;AACN;;"}
|
|
@@ -8,10 +8,10 @@ import { usePopper } from "react-popper";
|
|
|
8
8
|
import { detectOverflow } from "@popperjs/core";
|
|
9
9
|
import baseDropdownClasses from "./baseDropdownClasses.js";
|
|
10
10
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
11
|
-
import { useTheme } from "../../hooks/useTheme.js";
|
|
12
11
|
import useForkRef from "../../hooks/useForkRef.js";
|
|
13
12
|
import useUniqueId from "../../hooks/useUniqueId.js";
|
|
14
13
|
import BaseDropdownContext from "./BaseDropdownContext/BaseDropdownContext.js";
|
|
14
|
+
import { useTheme } from "../../hooks/useTheme.js";
|
|
15
15
|
import { useControlled } from "../../hooks/useControlled.js";
|
|
16
16
|
import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
|
|
17
17
|
import { setId } from "../../utils/setId.js";
|
|
@@ -5,9 +5,9 @@ import { getPrevNextFocus } from "../../utils/focusableElementFinder.js";
|
|
|
5
5
|
import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
|
|
6
6
|
import { useMemo } from "react";
|
|
7
7
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
8
|
+
import withId from "../../hocs/withId.js";
|
|
8
9
|
import { ClassNames } from "@emotion/react";
|
|
9
10
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
10
|
-
import withId from "../../hocs/withId.js";
|
|
11
11
|
import { HvList } from "../List/List.js";
|
|
12
12
|
import { useControlled } from "../../hooks/useControlled.js";
|
|
13
13
|
import { setId } from "../../utils/setId.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useControlled } from \"hooks\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n StyledBaseDropDown,\n StyledButton,\n StyledPanel,\n} from \"./DropDownMenu.styles\";\nimport dropDownMenuClasses, {\n HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\nimport { isKeypress, keyboardCodes, outlineStyles, setId } from \"utils\";\nimport getPrevNextFocus from \"utils/focusableElementFinder\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButtonVariant, HvList, HvListValue } from \"components\";\nimport { useMemo } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport
|
|
1
|
+
{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useControlled } from \"hooks\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n StyledBaseDropDown,\n StyledButton,\n StyledPanel,\n} from \"./DropDownMenu.styles\";\nimport dropDownMenuClasses, {\n HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\nimport { isKeypress, keyboardCodes, outlineStyles, setId } from \"utils\";\nimport getPrevNextFocus from \"utils/focusableElementFinder\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButtonVariant, HvList, HvListValue } from \"components\";\nimport { useMemo } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport withId from \"../../hocs/withId\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvDropDownMenuProps = HvBaseProps<HTMLDivElement, { onClick }> & {\n /** Icon. */\n icon?: React.ReactElement;\n /**\n * A list containing the elements to be rendered.\n *\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n */\n dataList: HvListValue[];\n /** Placement of the dropdown. */\n placement?: \"left\" | \"right\";\n /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n disablePortal?: boolean;\n /** Function executed on toggle of the dropdown. Should receive the open status. */\n onToggle?: (event: Event, open: boolean) => void;\n /** Function executed in each onClick. Should received the clicked element. */\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /** Keep the Dropdown Menu opened after clicking one option */\n keepOpened?: boolean;\n /** Defines if the component is disabled. */\n disabled?: boolean;\n /** If true it should be displayed open. */\n expanded?: boolean;\n /** When uncontrolled, defines the initial expanded state. */\n defaultExpanded?: boolean;\n /** The variant to be used in the header. */\n category?: HvButtonVariant;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDropDownMenuClasses;\n};\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nconst HvDropDownMenu = ({\n id,\n classes,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\",\n ...others\n}: HvDropDownMenuProps) => {\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown = (event) => {\n if (isKeypress(event, keyboardCodes.Tab)) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const setFocusToContent = (containerRef) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const headerComponent = (\n <StyledButton\n icon\n variant={category}\n id={setId(id, \"icon-button\")}\n className={clsx(\n dropDownMenuClasses.icon,\n classes?.icon,\n open && clsx(dropDownMenuClasses.iconSelected, classes?.iconSelected)\n )}\n aria-expanded={open}\n disabled={disabled}\n aria-label=\"Dropdown menu\"\n $open={open}\n >\n {icon || <MoreOptionsVertical color={disabled ? \"atmo5\" : undefined} />}\n </StyledButton>\n );\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n const popperStyle = {\n style: {\n zIndex: theme.zIndices.tooltip,\n width: \"auto\",\n position: \"relative\",\n },\n };\n\n return (\n <ClassNames>\n {({ css }) => (\n <StyledBaseDropDown\n id={id}\n className={clsx(\n className,\n dropDownMenuClasses.container,\n classes?.container\n )}\n classes={{\n root: clsx(\n dropDownMenuClasses.root,\n classes?.root,\n css({\n display: \"inline-block\",\n width: \"auto\",\n \"&.focus-visible $icon\": {\n ...outlineStyles,\n },\n })\n ),\n container: clsx(\n dropDownMenuClasses.baseContainer,\n classes?.baseContainer\n ),\n }}\n expanded={open && !disabled}\n component={headerComponent}\n aria-haspopup=\"menu\"\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n popperProps={popperStyle}\n {...others}\n >\n <StyledPanel>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: clsx(dropDownMenuClasses.menuList, classes?.menuList),\n }}\n />\n </StyledPanel>\n </StyledBaseDropDown>\n )}\n </ClassNames>\n );\n};\n\nexport default withId(HvDropDownMenu);\n"],"names":["HvDropDownMenu","id","classes","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","open","setOpen","useControlled","Boolean","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","keyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","headerComponent","StyledButton","variant","clsx","dropDownMenuClasses","iconSelected","$open","children","_jsx","MoreOptionsVertical","color","undefined","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","ClassNames","css","StyledBaseDropDown","container","root","display","outlineStyles","baseContainer","component","variableWidth","e","s","onContainerCreation","popperProps","StyledPanel","HvList","values","selectable","item","onKeyDown","menuList","withId"],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ import accept from "attr-accept";
|
|
|
5
5
|
import { StyledDropZoneLabelsGroup, StyledLabel, StyledInfoMessage, StyledDropZoneContainer, StyledInput, StyledDropArea, StyledDropAreaLabel, StyledDragText, StyledDropAreaIcon, StyledDropAreaLabels, StyledSelectedFilesText } from "./DropZone.styles.js";
|
|
6
6
|
import clsx from "clsx";
|
|
7
7
|
import { convertUnits } from "../utils.js";
|
|
8
|
-
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
9
8
|
import withId from "../../../hocs/withId.js";
|
|
9
|
+
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
10
10
|
import { setId } from "../../../utils/setId.js";
|
|
11
11
|
import { isKeypress } from "../../../utils/keyboardUtils/keyCheck.js";
|
|
12
12
|
import { keyboardCodes } from "../../../utils/keyboardUtils/keyboardCodes.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropZone.js","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport dropZoneClasses, { HvDropZoneClasses } from \"./dropZoneClasses\";\nimport React, { useRef, useState } from \"react\";\nimport { uniqueId } from \"lodash\";\nimport accept from \"attr-accept\";\nimport {\n StyledDragText,\n StyledDropArea,\n StyledDropAreaIcon,\n StyledDropAreaLabel,\n StyledDropAreaLabels,\n StyledDropZoneContainer,\n StyledDropZoneLabelsGroup,\n StyledInfoMessage,\n StyledInput,\n StyledLabel,\n StyledSelectedFilesText,\n} from \"./DropZone.styles\";\nimport clsx from \"clsx\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { convertUnits } from \"../utils\";\nimport { withId } from \"hocs\";\n\nexport type HvDropZoneLabels = {\n /**\n * Extensions of the accepted file types\n */\n acceptedFiles?: string;\n /**\n * Dropzone area label.\n */\n dropzone?: string;\n /**\n * Size file warning label.\n */\n sizeWarning?: string;\n /**\n * Size file warning label.\n */\n drag?: string;\n /**\n * Size file warning label.\n */\n selectFiles?: string;\n /**\n * Theming sheet used to style components\n * */\n dropFiles?: string;\n /**\n * Message to display when file size is greater than allowed\n * */\n fileSizeError?: string;\n /**\n * Message to display when file type is greater than allowed\n * */\n fileTypeError?: string;\n};\n\nexport type HvDropZoneProps = {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Labels to present in FileUploader.\n */\n labels?: HvDropZoneLabels;\n /**\n * Whether the Dropzone should accept multiple files at once.\n */\n multiple?: boolean;\n /**\n * If the input is disabled or not\n */\n disabled?: boolean;\n /**\n * Files extensions accepted for upload.\n */\n acceptedFiles: string[];\n /**\n * Max upload size\n * */\n maxFileSize: number;\n /**\n * Function responsible for processing files added to the drop zone.\n */\n onFilesAdded?: HvFilesAddedEvent;\n /**\n * Whether the DropZone should hide labels or not.\n */\n hideLabels?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvDropZoneClasses;\n};\n\nexport const HvDropZone = withId(\n ({\n id,\n classes,\n labels,\n acceptedFiles,\n maxFileSize,\n inputProps,\n hideLabels,\n multiple = true,\n disabled = false,\n onFilesAdded,\n }: HvDropZoneProps) => {\n const [dragState, setDrag] = useState<boolean>(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const leaveDropArea = () => {\n setDrag(false);\n };\n\n const enterDropArea = () => {\n setDrag(true);\n };\n\n const onChangeHandler = (filesList: FileList) => {\n const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n const newFiles: HvFileData[] = [];\n\n filesToProcess.forEach((file: File) => {\n const newFile: HvFileData = file;\n\n const isSizeAllowed = file.size <= maxFileSize;\n const isFileAccepted =\n !acceptedFiles.length ||\n acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n acceptedFiles.some((acceptExtension) =>\n accept({ name: file.name, type: file.type }, acceptExtension)\n );\n\n if (!isFileAccepted) {\n newFile.errorMessage = labels?.fileTypeError;\n newFile.status = \"fail\";\n } else if (!isSizeAllowed) {\n newFile.errorMessage = labels?.fileSizeError;\n newFile.status = \"fail\";\n }\n\n newFile.id = uniqueId(\"uploaded-file-data-\");\n newFiles.push(newFile);\n });\n\n onFilesAdded?.(newFiles);\n };\n\n return (\n <>\n {!hideLabels && (\n <StyledDropZoneLabelsGroup\n id={id}\n className={clsx(\n classes?.dropZoneLabelsGroup,\n dropZoneClasses.dropZoneLabelsGroup\n )}\n aria-label=\"File Dropzone\"\n >\n <StyledLabel\n id={setId(id, \"input-file-label\")}\n htmlFor={setId(id, \"input-file\")}\n label={labels?.dropzone}\n className={clsx(\n classes?.dropZoneLabel,\n dropZoneClasses.dropZoneLabel\n )}\n $disabled={disabled}\n />\n <StyledInfoMessage\n $disabled={disabled}\n id={setId(id, \"description\")}\n >\n {Number.isInteger(maxFileSize) &&\n `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n {labels?.acceptedFiles && labels.acceptedFiles}\n {!labels?.acceptedFiles &&\n acceptedFiles.length > 0 &&\n `\\u00A0(${acceptedFiles.join(\", \")})`}\n </StyledInfoMessage>\n </StyledDropZoneLabelsGroup>\n )}\n <StyledDropZoneContainer\n id={setId(id, \"button\")}\n className={clsx(\n classes?.dropZoneContainer,\n dropZoneClasses.dropZoneContainer,\n dragState && clsx(classes?.dragAction, dropZoneClasses.dragAction),\n disabled &&\n clsx(\n classes?.dropZoneContainerDisabled,\n dropZoneClasses.dropZoneContainerDisabled\n )\n )}\n $drag={dragState}\n $disabled={disabled}\n role=\"button\"\n tabIndex={0}\n onDragEnter={(event) => {\n if (!disabled) {\n enterDropArea();\n event.stopPropagation();\n event.preventDefault();\n }\n }}\n onDragLeave={leaveDropArea}\n onDropCapture={leaveDropArea}\n onDragOver={(event) => {\n if (!disabled) {\n enterDropArea();\n event.stopPropagation();\n event.preventDefault();\n }\n }}\n onDrop={(event) => {\n if (!disabled) {\n const { files } = event.dataTransfer;\n if (multiple === true || files.length === 1) {\n event.stopPropagation();\n event.preventDefault();\n onChangeHandler(files);\n }\n }\n }}\n onKeyDown={(e) => {\n if (isKeypress(e, keyboardCodes.Enter) || isKeypress(e, 32)) {\n inputRef.current?.click();\n }\n }}\n >\n <StyledInput\n id={setId(id, \"input-file\")}\n tabIndex={-1}\n className={clsx(classes?.inputArea, dropZoneClasses.inputArea)}\n type=\"file\"\n multiple={multiple}\n disabled={disabled}\n title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n onClick={() => {\n if (inputRef.current) {\n inputRef.current.value = \"\";\n }\n }}\n onChange={() => {\n if (!disabled && inputRef.current?.files) {\n onChangeHandler(inputRef.current.files);\n }\n }}\n ref={inputRef}\n accept={acceptedFiles.join(\",\")}\n {...inputProps}\n />\n <StyledDropArea\n className={clsx(classes?.dropArea, dropZoneClasses.dropArea)}\n >\n {dragState ? (\n <StyledDropAreaLabel\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(classes?.dragText, dropZoneClasses.dragText)}\n >\n {labels?.dropFiles}\n </StyledDragText>\n </StyledDropAreaLabel>\n ) : (\n <>\n <StyledDropAreaIcon\n iconSize=\"M\"\n className={clsx(\n classes?.dropZoneAreaIcon,\n dropZoneClasses.dropZoneAreaIcon\n )}\n color={disabled ? \"atmo5\" : \"acce1\"}\n />\n <StyledDropAreaLabels\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(\n classes?.dragText,\n dropZoneClasses.dragText\n )}\n >\n {labels?.drag}\n <StyledSelectedFilesText\n className={clsx(\n classes?.selectFilesText,\n dropZoneClasses.selectFilesText\n )}\n >{`\\xa0${labels?.selectFiles}`}</StyledSelectedFilesText>\n </StyledDragText>\n </StyledDropAreaLabels>\n </>\n )}\n </StyledDropArea>\n </StyledDropZoneContainer>\n </>\n );\n }\n);\n"],"names":["HvDropZone","withId","id","classes","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","_Fragment","children","StyledDropZoneLabelsGroup","className","clsx","dropZoneLabelsGroup","dropZoneClasses","_jsx","StyledLabel","setId","htmlFor","label","dropzone","dropZoneLabel","$disabled","_jsxs","StyledInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","StyledDropZoneContainer","dropZoneContainer","dragAction","dropZoneContainerDisabled","$drag","role","tabIndex","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","files","dataTransfer","onKeyDown","isKeypress","keyboardCodes","Enter","current","click","StyledInput","inputArea","title","drag","selectFiles","onClick","value","onChange","ref","StyledDropArea","dropArea","StyledDropAreaLabel","dropZoneAreaLabels","StyledDragText","dragText","dropFiles","StyledDropAreaIcon","iconSize","dropZoneAreaIcon","color","StyledDropAreaLabels","StyledSelectedFilesText","selectFilesText"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DropZone.js","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport dropZoneClasses, { HvDropZoneClasses } from \"./dropZoneClasses\";\nimport React, { useRef, useState } from \"react\";\nimport { uniqueId } from \"lodash\";\nimport accept from \"attr-accept\";\nimport {\n StyledDragText,\n StyledDropArea,\n StyledDropAreaIcon,\n StyledDropAreaLabel,\n StyledDropAreaLabels,\n StyledDropZoneContainer,\n StyledDropZoneLabelsGroup,\n StyledInfoMessage,\n StyledInput,\n StyledLabel,\n StyledSelectedFilesText,\n} from \"./DropZone.styles\";\nimport clsx from \"clsx\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { convertUnits } from \"../utils\";\nimport withId from \"../../../hocs/withId\";\n\nexport type HvDropZoneLabels = {\n /**\n * Extensions of the accepted file types\n */\n acceptedFiles?: string;\n /**\n * Dropzone area label.\n */\n dropzone?: string;\n /**\n * Size file warning label.\n */\n sizeWarning?: string;\n /**\n * Size file warning label.\n */\n drag?: string;\n /**\n * Size file warning label.\n */\n selectFiles?: string;\n /**\n * Theming sheet used to style components\n * */\n dropFiles?: string;\n /**\n * Message to display when file size is greater than allowed\n * */\n fileSizeError?: string;\n /**\n * Message to display when file type is greater than allowed\n * */\n fileTypeError?: string;\n};\n\nexport type HvDropZoneProps = {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Labels to present in FileUploader.\n */\n labels?: HvDropZoneLabels;\n /**\n * Whether the Dropzone should accept multiple files at once.\n */\n multiple?: boolean;\n /**\n * If the input is disabled or not\n */\n disabled?: boolean;\n /**\n * Files extensions accepted for upload.\n */\n acceptedFiles: string[];\n /**\n * Max upload size\n * */\n maxFileSize: number;\n /**\n * Function responsible for processing files added to the drop zone.\n */\n onFilesAdded?: HvFilesAddedEvent;\n /**\n * Whether the DropZone should hide labels or not.\n */\n hideLabels?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvDropZoneClasses;\n};\n\nexport const HvDropZone = withId(\n ({\n id,\n classes,\n labels,\n acceptedFiles,\n maxFileSize,\n inputProps,\n hideLabels,\n multiple = true,\n disabled = false,\n onFilesAdded,\n }: HvDropZoneProps) => {\n const [dragState, setDrag] = useState<boolean>(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const leaveDropArea = () => {\n setDrag(false);\n };\n\n const enterDropArea = () => {\n setDrag(true);\n };\n\n const onChangeHandler = (filesList: FileList) => {\n const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n const newFiles: HvFileData[] = [];\n\n filesToProcess.forEach((file: File) => {\n const newFile: HvFileData = file;\n\n const isSizeAllowed = file.size <= maxFileSize;\n const isFileAccepted =\n !acceptedFiles.length ||\n acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n acceptedFiles.some((acceptExtension) =>\n accept({ name: file.name, type: file.type }, acceptExtension)\n );\n\n if (!isFileAccepted) {\n newFile.errorMessage = labels?.fileTypeError;\n newFile.status = \"fail\";\n } else if (!isSizeAllowed) {\n newFile.errorMessage = labels?.fileSizeError;\n newFile.status = \"fail\";\n }\n\n newFile.id = uniqueId(\"uploaded-file-data-\");\n newFiles.push(newFile);\n });\n\n onFilesAdded?.(newFiles);\n };\n\n return (\n <>\n {!hideLabels && (\n <StyledDropZoneLabelsGroup\n id={id}\n className={clsx(\n classes?.dropZoneLabelsGroup,\n dropZoneClasses.dropZoneLabelsGroup\n )}\n aria-label=\"File Dropzone\"\n >\n <StyledLabel\n id={setId(id, \"input-file-label\")}\n htmlFor={setId(id, \"input-file\")}\n label={labels?.dropzone}\n className={clsx(\n classes?.dropZoneLabel,\n dropZoneClasses.dropZoneLabel\n )}\n $disabled={disabled}\n />\n <StyledInfoMessage\n $disabled={disabled}\n id={setId(id, \"description\")}\n >\n {Number.isInteger(maxFileSize) &&\n `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n {labels?.acceptedFiles && labels.acceptedFiles}\n {!labels?.acceptedFiles &&\n acceptedFiles.length > 0 &&\n `\\u00A0(${acceptedFiles.join(\", \")})`}\n </StyledInfoMessage>\n </StyledDropZoneLabelsGroup>\n )}\n <StyledDropZoneContainer\n id={setId(id, \"button\")}\n className={clsx(\n classes?.dropZoneContainer,\n dropZoneClasses.dropZoneContainer,\n dragState && clsx(classes?.dragAction, dropZoneClasses.dragAction),\n disabled &&\n clsx(\n classes?.dropZoneContainerDisabled,\n dropZoneClasses.dropZoneContainerDisabled\n )\n )}\n $drag={dragState}\n $disabled={disabled}\n role=\"button\"\n tabIndex={0}\n onDragEnter={(event) => {\n if (!disabled) {\n enterDropArea();\n event.stopPropagation();\n event.preventDefault();\n }\n }}\n onDragLeave={leaveDropArea}\n onDropCapture={leaveDropArea}\n onDragOver={(event) => {\n if (!disabled) {\n enterDropArea();\n event.stopPropagation();\n event.preventDefault();\n }\n }}\n onDrop={(event) => {\n if (!disabled) {\n const { files } = event.dataTransfer;\n if (multiple === true || files.length === 1) {\n event.stopPropagation();\n event.preventDefault();\n onChangeHandler(files);\n }\n }\n }}\n onKeyDown={(e) => {\n if (isKeypress(e, keyboardCodes.Enter) || isKeypress(e, 32)) {\n inputRef.current?.click();\n }\n }}\n >\n <StyledInput\n id={setId(id, \"input-file\")}\n tabIndex={-1}\n className={clsx(classes?.inputArea, dropZoneClasses.inputArea)}\n type=\"file\"\n multiple={multiple}\n disabled={disabled}\n title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n onClick={() => {\n if (inputRef.current) {\n inputRef.current.value = \"\";\n }\n }}\n onChange={() => {\n if (!disabled && inputRef.current?.files) {\n onChangeHandler(inputRef.current.files);\n }\n }}\n ref={inputRef}\n accept={acceptedFiles.join(\",\")}\n {...inputProps}\n />\n <StyledDropArea\n className={clsx(classes?.dropArea, dropZoneClasses.dropArea)}\n >\n {dragState ? (\n <StyledDropAreaLabel\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(classes?.dragText, dropZoneClasses.dragText)}\n >\n {labels?.dropFiles}\n </StyledDragText>\n </StyledDropAreaLabel>\n ) : (\n <>\n <StyledDropAreaIcon\n iconSize=\"M\"\n className={clsx(\n classes?.dropZoneAreaIcon,\n dropZoneClasses.dropZoneAreaIcon\n )}\n color={disabled ? \"atmo5\" : \"acce1\"}\n />\n <StyledDropAreaLabels\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(\n classes?.dragText,\n dropZoneClasses.dragText\n )}\n >\n {labels?.drag}\n <StyledSelectedFilesText\n className={clsx(\n classes?.selectFilesText,\n dropZoneClasses.selectFilesText\n )}\n >{`\\xa0${labels?.selectFiles}`}</StyledSelectedFilesText>\n </StyledDragText>\n </StyledDropAreaLabels>\n </>\n )}\n </StyledDropArea>\n </StyledDropZoneContainer>\n </>\n );\n }\n);\n"],"names":["HvDropZone","withId","id","classes","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","_Fragment","children","StyledDropZoneLabelsGroup","className","clsx","dropZoneLabelsGroup","dropZoneClasses","_jsx","StyledLabel","setId","htmlFor","label","dropzone","dropZoneLabel","$disabled","_jsxs","StyledInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","StyledDropZoneContainer","dropZoneContainer","dragAction","dropZoneContainerDisabled","$drag","role","tabIndex","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","files","dataTransfer","onKeyDown","isKeypress","keyboardCodes","Enter","current","click","StyledInput","inputArea","title","drag","selectFiles","onClick","value","onChange","ref","StyledDropArea","dropArea","StyledDropAreaLabel","dropZoneAreaLabels","StyledDragText","dragText","dropFiles","StyledDropAreaIcon","iconSize","dropZoneAreaIcon","color","StyledDropAreaLabels","StyledSelectedFilesText","selectFilesText"],"mappings":"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"}
|
|
@@ -3,8 +3,9 @@ import clsx from "clsx";
|
|
|
3
3
|
import { StyledFixedSizeList, StyledSelectAllCheckBox, StyledListItem, StyledDropRightXS, StyledMultiSelectCheckBox, StyledSingleSelectRadio, StyledLink } from "./List.styles.js";
|
|
4
4
|
import listClasses from "./listClasses.js";
|
|
5
5
|
import useSelectableList from "./useSelectableList.js";
|
|
6
|
-
import { parseList
|
|
6
|
+
import { parseList } from "./utils.js";
|
|
7
7
|
import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
|
|
8
|
+
import { wrapperTooltip } from "../../utils/wrapperTooltip.js";
|
|
8
9
|
import { HvListContainer } from "../ListContainer/ListContainer.js";
|
|
9
10
|
import { HvTypography } from "../Typography/Typography.js";
|
|
10
11
|
import { setId } from "../../utils/setId.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { forwardRef, isValidElement, useEffect, useMemo, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"../../types\";\nimport {\n StyledFixedSizeList,\n StyledSelectAllCheckBox,\n StyledLink,\n StyledMultiSelectCheckBox,\n StyledSingleSelectRadio,\n StyledListItem,\n StyledDropRightXS,\n} from \"./List.styles\";\nimport listClasses, { HvListClasses } from \"./listClasses\";\nimport useSelectableList from \"./useSelectableList\";\nimport { parseList, wrapperTooltip } from \"./utils\";\nimport { HvListContainer, HvTypography } from \"components\";\nimport { setId } from \"utils\";\n\nexport type HvListValue = {\n id?: string | number;\n label: React.ReactNode;\n searchValue?: string;\n selected?: boolean;\n disabled?: boolean;\n isHidden?: boolean;\n icon?:\n | React.ReactNode\n | ((params: {\n isDisabled?: boolean;\n isSelected?: boolean;\n }) => React.ReactNode);\n showNavIcon?: boolean;\n path?: string;\n params?: object;\n tabIndex?: number;\n} & HvExtraProps;\n\nexport type HvListLabels = {\n /** The label used for the All checkbox action. */\n selectAll?: string;\n /** The label used in the middle of the multi-selection count. */\n selectionConjunction?: string;\n};\n\nexport type HvListProps = HvBaseProps<\n HTMLUListElement,\n { onChange; onClick }\n> & {\n /**\n * A list containing the elements to be rendered.\n *\n * - id: The id of the item.\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - isHidden: Is item visible.\n * - icon: The icon.\n * - showNavIcon: If true renders the navigation icon on the right.\n * - path: The path to navigate to.\n */\n values: HvListValue[];\n /** If true renders a multi select list. */\n multiSelect?: boolean;\n /**\n * If true renders select all option for multi selection lists with selectors.\n * note: It will only be rendered if multiSelect and useSelector props are set to true.\n */\n showSelectAll?: boolean;\n /** An object containing all the labels for the dropdown. */\n labels?: HvListLabels;\n /** If true renders list items with radio or checkbox selectors. */\n useSelector?: boolean;\n /** Call back fired when list item is selected. Returns selection state. */\n onChange?: (value: HvListValue[]) => void;\n /** Call back fired when list item is selected. Returns selected item. */\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /** If `true` the list items will show the selection state. */\n selectable?: boolean;\n /** If `true`, selection can be toggled when single selection. */\n singleSelectionToggle?: boolean;\n /** If `true` the list will be rendered without vertical spacing. */\n condensed?: boolean;\n /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n hasTooltips?: boolean;\n /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n height?: number;\n /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n virtualized?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvListClasses;\n};\n\nconst DEFAULT_LABELS = {\n selectAll: \"Select All\",\n selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = ({\n id,\n classes,\n className,\n multiSelect = false,\n hasTooltips = false,\n showSelectAll = false,\n labels = DEFAULT_LABELS,\n useSelector = false,\n selectable = true,\n singleSelectionToggle = true,\n condensed = false,\n onChange,\n onClick,\n values: valuesProp = [],\n height,\n virtualized = false,\n ...others\n}: HvListProps) => {\n const [list, setList, selection] = useSelectableList(valuesProp);\n const listRef = useRef<any>(null);\n\n useEffect(() => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList: HvListValue[] = parseList(\n undefined,\n passedProps,\n undefined,\n valuesProp\n );\n\n setList(parsedList);\n }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n const handleSelect = (evt, item) => {\n if (!item.path) evt.preventDefault();\n if (item.disabled) return;\n\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList = parseList(item, passedProps, undefined, list);\n setList(parsedList);\n\n onClick?.(evt, item);\n onChange?.(parsedList);\n };\n\n const handleSelectAll = () => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const anySelectableSelected = list.some(\n (elem) => elem.selected || elem.disabled\n );\n const parsedList = parseList(\n undefined,\n passedProps,\n !anySelectableSelected,\n list\n );\n setList(parsedList);\n\n onChange?.(parsedList);\n };\n\n const renderLeftIcon = (item) => {\n return isValidElement(item.icon)\n ? item.icon\n : item.icon?.({\n isSelected: item.selected,\n isDisabled: item.disabled,\n });\n };\n\n const renderSelectAll = () => {\n const { selectAll, selectionConjunction } = labels;\n\n const anySelected = !!selection?.length;\n const allSelected = selection.length === list.length;\n\n const selectionLabel = (\n <HvTypography component=\"span\">\n {!anySelected ? (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n ) : (\n <>\n <b>{selection.length}</b>\n {`\\xa0${selectionConjunction}\\xa0`}\n {list.length}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <StyledSelectAllCheckBox\n id={setId(id, \"select-all\")}\n label={selectionLabel}\n onChange={handleSelectAll}\n className={clsx(\n listClasses.selectAllSelector,\n classes?.selectAllSelector\n )}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n );\n };\n\n const renderItemText = (item) => {\n const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n return !multiSelect && item.path ? (\n <StyledLink\n key={item.label}\n route={item.path}\n classes={{ a: clsx(listClasses.link, classes?.link) }}\n >\n <ItemText />\n </StyledLink>\n ) : (\n <ItemText />\n );\n };\n\n const renderMultiSelectItem = (item, itemId) => {\n if (useSelector) {\n const Selection = wrapperTooltip(\n hasTooltips,\n <StyledMultiSelectCheckBox\n id={setId(itemId, \"selector\")}\n label={item.label}\n checked={item.selected}\n disabled={item.disabled}\n onChange={(evt) => handleSelect(evt, item)}\n classes={{\n root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n container: clsx(\n listClasses.selectorContainer,\n classes?.selectorContainer\n ),\n label: clsx(listClasses.truncate, classes?.truncate),\n }}\n />,\n item.label\n );\n return <Selection />;\n }\n\n return renderItemText(item);\n };\n\n const renderSingleSelectItem = (item, itemId) => {\n if (useSelector) {\n const Selection = wrapperTooltip(\n hasTooltips,\n <StyledSingleSelectRadio\n id={setId(itemId, \"selector\")}\n label={item.label}\n checked={item.selected}\n disabled={item.disabled}\n classes={{\n root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n container: clsx(\n listClasses.selectorContainer,\n classes?.selectorContainer\n ),\n label: clsx(listClasses.truncate, classes?.truncate),\n }}\n />,\n item.label\n );\n return <Selection />;\n }\n return renderItemText(item);\n };\n\n const renderListItem = (item, i, otherProps = {}) => {\n const itemId = setId(id, \"item\", i);\n const selected = item.selected || false;\n\n let startAdornment = null;\n if (!useSelector && item.icon) {\n startAdornment = renderLeftIcon(item);\n }\n\n return (\n <StyledListItem\n key={i}\n id={itemId}\n role={selectable ? \"option\" : \"menuitem\"}\n disabled={item.disabled || undefined}\n className={clsx(listClasses.item, classes?.item)}\n classes={{\n selected:\n useSelector || multiSelect\n ? clsx(listClasses.itemSelector, classes?.itemSelector)\n : undefined,\n }}\n selected={multiSelect || selected ? selected : undefined}\n onClick={(evt) => handleSelect(evt, item)}\n startAdornment={startAdornment}\n endAdornment={\n item.showNavIcon && (\n <StyledDropRightXS\n className={clsx(listClasses.box, classes?.box)}\n iconSize=\"XS\"\n />\n )\n }\n $applySelected={useSelector || multiSelect}\n {...otherProps}\n >\n {multiSelect\n ? renderMultiSelectItem(item, itemId)\n : renderSingleSelectItem(item, itemId)}\n </StyledListItem>\n );\n };\n\n const filteredList = list.filter((it) => !it.isHidden);\n const anySelected = list\n .map((item) => item.selected && !item.disabled)\n .reduce((result, selected) => result || selected, false);\n\n const selectedItemIndex = list.findIndex((item) => item.selected);\n useEffect(() => {\n if (selectedItemIndex >= 0 && listRef.current !== null) {\n listRef.current.scrollToItem(selectedItemIndex);\n }\n }, [listRef, selectedItemIndex]);\n\n const ListItem = ({ index, style }) => {\n const item = filteredList[index];\n const tabIndex =\n item.tabIndex ||\n (!anySelected && index === 0) ||\n (item.selected && !item.disabled)\n ? 0\n : -1;\n\n return renderListItem(item, index, {\n style: {\n ...style,\n top: `${parseFloat(style.top) + 5}px`,\n left: `${parseFloat(style.left) + 5}px`,\n width: `calc(${parseFloat(style.width)}% - 10px)`,\n },\n tabIndex,\n interactive: true,\n condensed,\n disableGutters: useSelector,\n });\n };\n\n const renderFixedList = useMemo(() => {\n return forwardRef(({ ...rest }, ref) => (\n <HvListContainer\n id={id}\n className={clsx(className, listClasses.root, classes?.root)}\n role={selectable ? \"listbox\" : \"menu\"}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={(selectable && multiSelect) || undefined}\n ref={ref}\n {...rest}\n />\n ));\n }, [id, useSelector, className, classes, condensed, selectable, multiSelect]);\n\n return (\n <>\n {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n {filteredList.length > 0 && !virtualized && (\n <HvListContainer\n id={id}\n className={clsx(className, listClasses.root, classes?.root)}\n role={selectable ? \"listbox\" : \"menu\"}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={(selectable && multiSelect) || undefined}\n {...others}\n >\n {filteredList.map((item, i) => renderListItem(item, i))}\n </HvListContainer>\n )}\n {filteredList.length > 0 && virtualized && (\n <StyledFixedSizeList\n ref={listRef}\n className={clsx(\n listClasses.virtualizedRoot,\n classes?.virtualizedRoot\n )}\n height={(height || 0) + 5}\n width=\"100%\"\n itemCount={filteredList.length}\n itemSize={condensed ? 32 : 40}\n innerElementType={renderFixedList}\n {...others}\n >\n {ListItem}\n </StyledFixedSizeList>\n )}\n </>\n );\n};\n"],"names":["DEFAULT_LABELS","selectAll","selectionConjunction","HvList","id","classes","className","multiSelect","hasTooltips","showSelectAll","labels","useSelector","selectable","singleSelectionToggle","condensed","onChange","onClick","values","valuesProp","height","virtualized","others","list","setList","selection","useSelectableList","listRef","useRef","useEffect","passedProps","parsedList","parseList","undefined","handleSelect","evt","item","path","preventDefault","disabled","handleSelectAll","anySelectableSelected","some","elem","selected","renderLeftIcon","isValidElement","icon","isSelected","isDisabled","renderSelectAll","anySelected","length","allSelected","selectionLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","StyledSelectAllCheckBox","setId","label","clsx","listClasses","selectAllSelector","indeterminate","checked","renderItemText","ItemText","wrapperTooltip","StyledLink","route","a","link","renderMultiSelectItem","itemId","Selection","StyledMultiSelectCheckBox","root","selectorRoot","container","selectorContainer","truncate","renderSingleSelectItem","StyledSingleSelectRadio","renderListItem","i","otherProps","startAdornment","StyledListItem","role","itemSelector","endAdornment","showNavIcon","StyledDropRightXS","box","iconSize","$applySelected","filteredList","filter","it","isHidden","map","reduce","result","selectedItemIndex","findIndex","current","scrollToItem","ListItem","index","style","tabIndex","top","parseFloat","left","width","interactive","disableGutters","renderFixedList","useMemo","forwardRef","rest","ref","HvListContainer","StyledFixedSizeList","virtualizedRoot","itemCount","itemSize","innerElementType"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { forwardRef, isValidElement, useEffect, useMemo, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"../../types\";\nimport {\n StyledFixedSizeList,\n StyledSelectAllCheckBox,\n StyledLink,\n StyledMultiSelectCheckBox,\n StyledSingleSelectRadio,\n StyledListItem,\n StyledDropRightXS,\n} from \"./List.styles\";\nimport listClasses, { HvListClasses } from \"./listClasses\";\nimport useSelectableList from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\nimport { HvListContainer, HvTypography } from \"components\";\nimport { setId, wrapperTooltip } from \"utils\";\n\nexport type HvListValue = {\n id?: string | number;\n label: React.ReactNode;\n searchValue?: string;\n selected?: boolean;\n disabled?: boolean;\n isHidden?: boolean;\n icon?:\n | React.ReactNode\n | ((params: {\n isDisabled?: boolean;\n isSelected?: boolean;\n }) => React.ReactNode);\n showNavIcon?: boolean;\n path?: string;\n params?: object;\n tabIndex?: number;\n} & HvExtraProps;\n\nexport type HvListLabels = {\n /** The label used for the All checkbox action. */\n selectAll?: string;\n /** The label used in the middle of the multi-selection count. */\n selectionConjunction?: string;\n};\n\nexport type HvListProps = HvBaseProps<\n HTMLUListElement,\n { onChange; onClick }\n> & {\n /**\n * A list containing the elements to be rendered.\n *\n * - id: The id of the item.\n * - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - isHidden: Is item visible.\n * - icon: The icon.\n * - showNavIcon: If true renders the navigation icon on the right.\n * - path: The path to navigate to.\n */\n values: HvListValue[];\n /** If true renders a multi select list. */\n multiSelect?: boolean;\n /**\n * If true renders select all option for multi selection lists with selectors.\n * note: It will only be rendered if multiSelect and useSelector props are set to true.\n */\n showSelectAll?: boolean;\n /** An object containing all the labels for the dropdown. */\n labels?: HvListLabels;\n /** If true renders list items with radio or checkbox selectors. */\n useSelector?: boolean;\n /** Call back fired when list item is selected. Returns selection state. */\n onChange?: (value: HvListValue[]) => void;\n /** Call back fired when list item is selected. Returns selected item. */\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /** If `true` the list items will show the selection state. */\n selectable?: boolean;\n /** If `true`, selection can be toggled when single selection. */\n singleSelectionToggle?: boolean;\n /** If `true` the list will be rendered without vertical spacing. */\n condensed?: boolean;\n /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n hasTooltips?: boolean;\n /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n height?: number;\n /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n virtualized?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvListClasses;\n};\n\nconst DEFAULT_LABELS = {\n selectAll: \"Select All\",\n selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = ({\n id,\n classes,\n className,\n multiSelect = false,\n hasTooltips = false,\n showSelectAll = false,\n labels = DEFAULT_LABELS,\n useSelector = false,\n selectable = true,\n singleSelectionToggle = true,\n condensed = false,\n onChange,\n onClick,\n values: valuesProp = [],\n height,\n virtualized = false,\n ...others\n}: HvListProps) => {\n const [list, setList, selection] = useSelectableList(valuesProp);\n const listRef = useRef<any>(null);\n\n useEffect(() => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList: HvListValue[] = parseList(\n undefined,\n passedProps,\n undefined,\n valuesProp\n );\n\n setList(parsedList);\n }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n const handleSelect = (evt, item) => {\n if (!item.path) evt.preventDefault();\n if (item.disabled) return;\n\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList = parseList(item, passedProps, undefined, list);\n setList(parsedList);\n\n onClick?.(evt, item);\n onChange?.(parsedList);\n };\n\n const handleSelectAll = () => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const anySelectableSelected = list.some(\n (elem) => elem.selected || elem.disabled\n );\n const parsedList = parseList(\n undefined,\n passedProps,\n !anySelectableSelected,\n list\n );\n setList(parsedList);\n\n onChange?.(parsedList);\n };\n\n const renderLeftIcon = (item) => {\n return isValidElement(item.icon)\n ? item.icon\n : item.icon?.({\n isSelected: item.selected,\n isDisabled: item.disabled,\n });\n };\n\n const renderSelectAll = () => {\n const { selectAll, selectionConjunction } = labels;\n\n const anySelected = !!selection?.length;\n const allSelected = selection.length === list.length;\n\n const selectionLabel = (\n <HvTypography component=\"span\">\n {!anySelected ? (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n ) : (\n <>\n <b>{selection.length}</b>\n {`\\xa0${selectionConjunction}\\xa0`}\n {list.length}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <StyledSelectAllCheckBox\n id={setId(id, \"select-all\")}\n label={selectionLabel}\n onChange={handleSelectAll}\n className={clsx(\n listClasses.selectAllSelector,\n classes?.selectAllSelector\n )}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n );\n };\n\n const renderItemText = (item) => {\n const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n return !multiSelect && item.path ? (\n <StyledLink\n key={item.label}\n route={item.path}\n classes={{ a: clsx(listClasses.link, classes?.link) }}\n >\n <ItemText />\n </StyledLink>\n ) : (\n <ItemText />\n );\n };\n\n const renderMultiSelectItem = (item, itemId) => {\n if (useSelector) {\n const Selection = wrapperTooltip(\n hasTooltips,\n <StyledMultiSelectCheckBox\n id={setId(itemId, \"selector\")}\n label={item.label}\n checked={item.selected}\n disabled={item.disabled}\n onChange={(evt) => handleSelect(evt, item)}\n classes={{\n root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n container: clsx(\n listClasses.selectorContainer,\n classes?.selectorContainer\n ),\n label: clsx(listClasses.truncate, classes?.truncate),\n }}\n />,\n item.label\n );\n return <Selection />;\n }\n\n return renderItemText(item);\n };\n\n const renderSingleSelectItem = (item, itemId) => {\n if (useSelector) {\n const Selection = wrapperTooltip(\n hasTooltips,\n <StyledSingleSelectRadio\n id={setId(itemId, \"selector\")}\n label={item.label}\n checked={item.selected}\n disabled={item.disabled}\n classes={{\n root: clsx(listClasses.selectorRoot, classes?.selectorRoot),\n container: clsx(\n listClasses.selectorContainer,\n classes?.selectorContainer\n ),\n label: clsx(listClasses.truncate, classes?.truncate),\n }}\n />,\n item.label\n );\n return <Selection />;\n }\n return renderItemText(item);\n };\n\n const renderListItem = (item, i, otherProps = {}) => {\n const itemId = setId(id, \"item\", i);\n const selected = item.selected || false;\n\n let startAdornment = null;\n if (!useSelector && item.icon) {\n startAdornment = renderLeftIcon(item);\n }\n\n return (\n <StyledListItem\n key={i}\n id={itemId}\n role={selectable ? \"option\" : \"menuitem\"}\n disabled={item.disabled || undefined}\n className={clsx(listClasses.item, classes?.item)}\n classes={{\n selected:\n useSelector || multiSelect\n ? clsx(listClasses.itemSelector, classes?.itemSelector)\n : undefined,\n }}\n selected={multiSelect || selected ? selected : undefined}\n onClick={(evt) => handleSelect(evt, item)}\n startAdornment={startAdornment}\n endAdornment={\n item.showNavIcon && (\n <StyledDropRightXS\n className={clsx(listClasses.box, classes?.box)}\n iconSize=\"XS\"\n />\n )\n }\n $applySelected={useSelector || multiSelect}\n {...otherProps}\n >\n {multiSelect\n ? renderMultiSelectItem(item, itemId)\n : renderSingleSelectItem(item, itemId)}\n </StyledListItem>\n );\n };\n\n const filteredList = list.filter((it) => !it.isHidden);\n const anySelected = list\n .map((item) => item.selected && !item.disabled)\n .reduce((result, selected) => result || selected, false);\n\n const selectedItemIndex = list.findIndex((item) => item.selected);\n useEffect(() => {\n if (selectedItemIndex >= 0 && listRef.current !== null) {\n listRef.current.scrollToItem(selectedItemIndex);\n }\n }, [listRef, selectedItemIndex]);\n\n const ListItem = ({ index, style }) => {\n const item = filteredList[index];\n const tabIndex =\n item.tabIndex ||\n (!anySelected && index === 0) ||\n (item.selected && !item.disabled)\n ? 0\n : -1;\n\n return renderListItem(item, index, {\n style: {\n ...style,\n top: `${parseFloat(style.top) + 5}px`,\n left: `${parseFloat(style.left) + 5}px`,\n width: `calc(${parseFloat(style.width)}% - 10px)`,\n },\n tabIndex,\n interactive: true,\n condensed,\n disableGutters: useSelector,\n });\n };\n\n const renderFixedList = useMemo(() => {\n return forwardRef(({ ...rest }, ref) => (\n <HvListContainer\n id={id}\n className={clsx(className, listClasses.root, classes?.root)}\n role={selectable ? \"listbox\" : \"menu\"}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={(selectable && multiSelect) || undefined}\n ref={ref}\n {...rest}\n />\n ));\n }, [id, useSelector, className, classes, condensed, selectable, multiSelect]);\n\n return (\n <>\n {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n {filteredList.length > 0 && !virtualized && (\n <HvListContainer\n id={id}\n className={clsx(className, listClasses.root, classes?.root)}\n role={selectable ? \"listbox\" : \"menu\"}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={(selectable && multiSelect) || undefined}\n {...others}\n >\n {filteredList.map((item, i) => renderListItem(item, i))}\n </HvListContainer>\n )}\n {filteredList.length > 0 && virtualized && (\n <StyledFixedSizeList\n ref={listRef}\n className={clsx(\n listClasses.virtualizedRoot,\n classes?.virtualizedRoot\n )}\n height={(height || 0) + 5}\n width=\"100%\"\n itemCount={filteredList.length}\n itemSize={condensed ? 32 : 40}\n innerElementType={renderFixedList}\n {...others}\n >\n {ListItem}\n </StyledFixedSizeList>\n )}\n </>\n );\n};\n"],"names":["DEFAULT_LABELS","selectAll","selectionConjunction","HvList","id","classes","className","multiSelect","hasTooltips","showSelectAll","labels","useSelector","selectable","singleSelectionToggle","condensed","onChange","onClick","values","valuesProp","height","virtualized","others","list","setList","selection","useSelectableList","listRef","useRef","useEffect","passedProps","parsedList","parseList","undefined","handleSelect","evt","item","path","preventDefault","disabled","handleSelectAll","anySelectableSelected","some","elem","selected","renderLeftIcon","isValidElement","icon","isSelected","isDisabled","renderSelectAll","anySelected","length","allSelected","selectionLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","StyledSelectAllCheckBox","setId","label","clsx","listClasses","selectAllSelector","indeterminate","checked","renderItemText","ItemText","wrapperTooltip","StyledLink","route","a","link","renderMultiSelectItem","itemId","Selection","StyledMultiSelectCheckBox","root","selectorRoot","container","selectorContainer","truncate","renderSingleSelectItem","StyledSingleSelectRadio","renderListItem","i","otherProps","startAdornment","StyledListItem","role","itemSelector","endAdornment","showNavIcon","StyledDropRightXS","box","iconSize","$applySelected","filteredList","filter","it","isHidden","map","reduce","result","selectedItemIndex","findIndex","current","scrollToItem","ListItem","index","style","tabIndex","top","parseFloat","left","width","interactive","disableGutters","renderFixedList","useMemo","forwardRef","rest","ref","HvListContainer","StyledFixedSizeList","virtualizedRoot","itemCount","itemSize","innerElementType"],"mappings":";;;;;;;;;;;AA+FA,MAAMA,iBAAiB;AAAA,EACrBC,WAAW;AAAA,EACXC,sBAAsB;AACxB;AAKO,MAAMC,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,gBAAgB;AAAA,EAChBC,SAASV;AAAAA,EACTW,cAAc;AAAA,EACdC,aAAa;AAAA,EACbC,wBAAwB;AAAA,EACxBC,YAAY;AAAA,EACZC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa,CAAE;AAAA,EACvBC;AAAAA,EACAC,cAAc;AAAA,EACd,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,MAAMC,SAASC,SAAS,IAAIC,kBAAkBP,UAAU;AACzDQ,QAAAA,UAAUC,OAAY,IAAI;AAEhCC,YAAU,MAAM;AACd,UAAMC,cAAc;AAAA,MAAEtB;AAAAA,MAAaK;AAAAA,MAAYC;AAAAA,IAAAA;AAC/C,UAAMiB,aAA4BC,UAChCC,QACAH,aACAG,QACAd,UAAU;AAGZK,YAAQO,UAAU;AAAA,EAAA,GACjB,CAACZ,YAAYX,aAAaK,YAAYC,uBAAuBU,OAAO,CAAC;AAElEU,QAAAA,eAAeA,CAACC,KAAKC,SAAS;AAClC,QAAI,CAACA,KAAKC;AAAMF,UAAIG,eAAgB;AACpC,QAAIF,KAAKG;AAAU;AAEnB,UAAMT,cAAc;AAAA,MAAEtB;AAAAA,MAAaK;AAAAA,MAAYC;AAAAA,IAAAA;AAC/C,UAAMiB,aAAaC,UAAUI,MAAMN,aAAaG,QAAWV,IAAI;AAC/DC,YAAQO,UAAU;AAElBd,uCAAUkB,KAAKC;AACfpB,yCAAWe;AAAAA,EAAU;AAGvB,QAAMS,kBAAkBA,MAAM;AAC5B,UAAMV,cAAc;AAAA,MAAEtB;AAAAA,MAAaK;AAAAA,MAAYC;AAAAA,IAAAA;AAC/C,UAAM2B,wBAAwBlB,KAAKmB,KAChCC,UAASA,KAAKC,YAAYD,KAAKJ,QAAQ;AAE1C,UAAMR,aAAaC,UACjBC,QACAH,aACA,CAACW,uBACDlB,IAAI;AAENC,YAAQO,UAAU;AAElBf,yCAAWe;AAAAA,EAAU;AAGvB,QAAMc,iBAAkBT,CAAS,SAAA;;AAC/B,WAAOU,eAAeV,KAAKW,IAAI,IAC3BX,KAAKW,QACLX,UAAKW,SAALX,8BAAY;AAAA,MACVY,YAAYZ,KAAKQ;AAAAA,MACjBK,YAAYb,KAAKG;AAAAA,IAAAA;AAAAA,EAClB;AAGP,QAAMW,kBAAkBA,MAAM;AACtB,UAAA;AAAA,MAAEhD;AAAAA,MAAWC;AAAAA,IAAyBQ,IAAAA;AAEtCwC,UAAAA,eAAc,CAAC,EAAC1B,uCAAW2B;AAC3BC,UAAAA,cAAc5B,UAAU2B,WAAW7B,KAAK6B;AAExCE,UAAAA,qCACHC,cAAY;AAAA,MAACC,WAAU;AAAA,MAAMC,UAC3B,CAACN,eACAO,qBAAAC,UAAA;AAAA,QAAAF,WACEG,oBAAA,KAAA;AAAA,UAAAH,UAAIvD;AAAAA,QAAS,CAAA,GACX,KAAIqB,KAAK6B,SAAS;AAAA,MAAA,CACnB,IAEHM,qBAAAC,UAAA;AAAA,QAAAF,WACEG,oBAAA,KAAA;AAAA,UAAAH,UAAIhC,UAAU2B;AAAAA,QAAAA,CAAM,GAClB,IAAMjD,yBACPoB,KAAK6B,MAAM;AAAA,MAAA,CAAA;AAAA,IAAA,CAInB;AAED,+BACGS,yBAAuB;AAAA,MACtBxD,IAAIyD,MAAMzD,IAAI,YAAY;AAAA,MAC1B0D,OAAOT;AAAAA,MACPtC,UAAUwB;AAAAA,MACVjC,WAAWyD,KACTC,YAAYC,mBACZ5D,mCAAS4D,iBAAiB;AAAA,MAE5BC,eAAehB,gBAAe,CAACE;AAAAA,MAC/Be,SAASf;AAAAA,IAAAA,CACT;AAAA,EAAA;AAIN,QAAMgB,iBAAkBjC,CAAS,SAAA;AAC/B,UAAMkC,WAAWC,eAAe9D,aAAa2B,KAAK2B,OAAO3B,KAAK2B,KAAK;AAEnE,WAAO,CAACvD,eAAe4B,KAAKC,2BACzBmC,YAAU;AAAA,MAETC,OAAOrC,KAAKC;AAAAA,MACZ/B,SAAS;AAAA,QAAEoE,GAAGV,KAAKC,YAAYU,MAAMrE,mCAASqE,IAAI;AAAA,MAAE;AAAA,MAAElB,UAEtDG,oBAACU,UAAQ,EAAA;AAAA,IAAA,GAJJlC,KAAK2B,KAAK,IAOhBO,oBAAAA,UACF,CAAA,CAAA;AAAA,EAAA;AAGGM,QAAAA,wBAAwBA,CAACxC,MAAMyC,WAAW;AAC9C,QAAIjE,aAAa;AACf,YAAMkE,YAAYP,eAChB9D,aACAmD,oBAACmB,2BAAyB;AAAA,QACxB1E,IAAIyD,MAAMe,QAAQ,UAAU;AAAA,QAC5Bd,OAAO3B,KAAK2B;AAAAA,QACZK,SAAShC,KAAKQ;AAAAA,QACdL,UAAUH,KAAKG;AAAAA,QACfvB,UAAWmB,CAAAA,QAAQD,aAAaC,KAAKC,IAAI;AAAA,QACzC9B,SAAS;AAAA,UACP0E,MAAMhB,KAAKC,YAAYgB,cAAc3E,mCAAS2E,YAAY;AAAA,UAC1DC,WAAWlB,KACTC,YAAYkB,mBACZ7E,mCAAS6E,iBAAiB;AAAA,UAE5BpB,OAAOC,KAAKC,YAAYmB,UAAU9E,mCAAS8E,QAAQ;AAAA,QACrD;AAAA,MAAA,CAAE,GAEJhD,KAAK2B,KAAK;AAELH,aAAAA,oBAACkB,WAAY,CAAA,CAAA;AAAA,IACtB;AAEA,WAAOT,eAAejC,IAAI;AAAA,EAAA;AAGtBiD,QAAAA,yBAAyBA,CAACjD,MAAMyC,WAAW;AAC/C,QAAIjE,aAAa;AACf,YAAMkE,YAAYP,eAChB9D,aACAmD,oBAAC0B,yBAAuB;AAAA,QACtBjF,IAAIyD,MAAMe,QAAQ,UAAU;AAAA,QAC5Bd,OAAO3B,KAAK2B;AAAAA,QACZK,SAAShC,KAAKQ;AAAAA,QACdL,UAAUH,KAAKG;AAAAA,QACfjC,SAAS;AAAA,UACP0E,MAAMhB,KAAKC,YAAYgB,cAAc3E,mCAAS2E,YAAY;AAAA,UAC1DC,WAAWlB,KACTC,YAAYkB,mBACZ7E,mCAAS6E,iBAAiB;AAAA,UAE5BpB,OAAOC,KAAKC,YAAYmB,UAAU9E,mCAAS8E,QAAQ;AAAA,QACrD;AAAA,MAAA,CAAE,GAEJhD,KAAK2B,KAAK;AAELH,aAAAA,oBAACkB,WAAY,CAAA,CAAA;AAAA,IACtB;AACA,WAAOT,eAAejC,IAAI;AAAA,EAAA;AAG5B,QAAMmD,iBAAiBA,CAACnD,MAAMoD,GAAGC,aAAa,CAAA,MAAO;AACnD,UAAMZ,SAASf,MAAMzD,IAAI,QAAQmF,CAAC;AAC5B5C,UAAAA,WAAWR,KAAKQ,YAAY;AAElC,QAAI8C,iBAAiB;AACjB,QAAA,CAAC9E,eAAewB,KAAKW,MAAM;AAC7B2C,uBAAiB7C,eAAeT,IAAI;AAAA,IACtC;AAEA,+BACGuD,gBAAc;AAAA,MAEbtF,IAAIwE;AAAAA,MACJe,MAAM/E,aAAa,WAAW;AAAA,MAC9B0B,UAAUH,KAAKG,YAAYN;AAAAA,MAC3B1B,WAAWyD,KAAKC,YAAY7B,MAAM9B,mCAAS8B,IAAI;AAAA,MAC/C9B,SAAS;AAAA,QACPsC,UACEhC,eAAeJ,cACXwD,KAAKC,YAAY4B,cAAcvF,mCAASuF,YAAY,IACpD5D;AAAAA,MACR;AAAA,MACAW,UAAUpC,eAAeoC,WAAWA,WAAWX;AAAAA,MAC/ChB,SAAUkB,CAAAA,QAAQD,aAAaC,KAAKC,IAAI;AAAA,MACxCsD;AAAAA,MACAI,cACE1D,KAAK2D,eACHnC,oBAACoC,mBAAiB;AAAA,QAChBzF,WAAWyD,KAAKC,YAAYgC,KAAK3F,mCAAS2F,GAAG;AAAA,QAC7CC,UAAS;AAAA,MAAA,CAGd;AAAA,MACDC,gBAAgBvF,eAAeJ;AAAAA,MAAY,GACvCiF;AAAAA,MAAUhC,UAEbjD,cACGoE,sBAAsBxC,MAAMyC,MAAM,IAClCQ,uBAAuBjD,MAAMyC,MAAM;AAAA,OA3BlCW,CAAC;AAAA,EAAA;AAgCZ,QAAMY,eAAe7E,KAAK8E,OAAQC,CAAO,OAAA,CAACA,GAAGC,QAAQ;AACrD,QAAMpD,cAAc5B,KACjBiF,IAAKpE,CAASA,SAAAA,KAAKQ,YAAY,CAACR,KAAKG,QAAQ,EAC7CkE,OAAO,CAACC,QAAQ9D,aAAa8D,UAAU9D,UAAU,KAAK;AAEzD,QAAM+D,oBAAoBpF,KAAKqF,UAAWxE,CAAAA,SAASA,KAAKQ,QAAQ;AAChEf,YAAU,MAAM;AACd,QAAI8E,qBAAqB,KAAKhF,QAAQkF,YAAY,MAAM;AAC9CA,cAAAA,QAAQC,aAAaH,iBAAiB;AAAA,IAChD;AAAA,EAAA,GACC,CAAChF,SAASgF,iBAAiB,CAAC;AAE/B,QAAMI,WAAWA,CAAC;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,MAAY;AAC/B7E,UAAAA,OAAOgE,aAAaY,KAAK;AAC/B,UAAME,WACJ9E,KAAK8E,YACJ,CAAC/D,eAAe6D,UAAU,KAC1B5E,KAAKQ,YAAY,CAACR,KAAKG,WACpB,IACA;AAECgD,WAAAA,eAAenD,MAAM4E,OAAO;AAAA,MACjCC,OAAO;AAAA,QACL,GAAGA;AAAAA,QACHE,KAAM,GAAEC,WAAWH,MAAME,GAAG,IAAI;AAAA,QAChCE,MAAO,GAAED,WAAWH,MAAMI,IAAI,IAAI;AAAA,QAClCC,OAAQ,QAAOF,WAAWH,MAAMK,KAAK;AAAA,MACvC;AAAA,MACAJ;AAAAA,MACAK,aAAa;AAAA,MACbxG;AAAAA,MACAyG,gBAAgB5G;AAAAA,IAAAA,CACjB;AAAA,EAAA;AAGG6G,QAAAA,kBAAkBC,QAAQ,MAAM;AACpC,WAAOC,WAAW,CAAC;AAAA,MAAE,GAAGC;AAAAA,IAAAA,GAAQC,QAC9BjE,oBAACkE,iBAAe;AAAA,MACdzH;AAAAA,MACAE,WAAWyD,KAAKzD,WAAW0D,YAAYe,MAAM1E,mCAAS0E,IAAI;AAAA,MAC1DY,MAAM/E,aAAa,YAAY;AAAA,MAC/B0G,aAAW;AAAA,MACXxG;AAAAA,MACAyG,gBAAgB5G;AAAAA,MAChB,wBAAuBC,cAAcL,eAAgByB;AAAAA,MACrD4F;AAAAA,MAAS,GACLD;AAAAA,IAAI,CAAA,CAEX;AAAA,EAAA,GACA,CAACvH,IAAIO,aAAaL,WAAWD,SAASS,WAAWF,YAAYL,WAAW,CAAC;AAE5E,8BACEmD,UAAA;AAAA,IAAAF,UAAA,CACGjD,eAAeI,eAAeF,iBAAiBwC,gBAE/CkD,GAAAA,aAAahD,SAAS,KAAK,CAAC/B,mCAC1ByG,iBAAe;AAAA,MACdzH;AAAAA,MACAE,WAAWyD,KAAKzD,WAAW0D,YAAYe,MAAM1E,mCAAS0E,IAAI;AAAA,MAC1DY,MAAM/E,aAAa,YAAY;AAAA,MAC/B0G,aAAW;AAAA,MACXxG;AAAAA,MACAyG,gBAAgB5G;AAAAA,MAChB,wBAAuBC,cAAcL,eAAgByB;AAAAA,MAAU,GAC3DX;AAAAA,MAAMmC,UAET2C,aAAaI,IAAI,CAACpE,MAAMoD,MAAMD,eAAenD,MAAMoD,CAAC,CAAC;AAAA,IAAA,CAEzD,GACAY,aAAahD,SAAS,KAAK/B,mCACzB0G,qBAAmB;AAAA,MAClBF,KAAKlG;AAAAA,MACLpB,WAAWyD,KACTC,YAAY+D,iBACZ1H,mCAAS0H,eAAe;AAAA,MAE1B5G,SAASA,UAAU,KAAK;AAAA,MACxBkG,OAAM;AAAA,MACNW,WAAW7B,aAAahD;AAAAA,MACxB8E,UAAUnH,YAAY,KAAK;AAAA,MAC3BoH,kBAAkBV;AAAAA,MAAgB,GAC9BnG;AAAAA,MAAMmC,UAETsD;AAAAA,IAAAA,CAEJ,CAAA;AAAA,EAAA,CACA;AAEP;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import withTooltip from "../../hocs/withTooltip.js";
|
|
2
1
|
const isItemSelected = (item, newItem) => {
|
|
3
2
|
const selectionKey = (item == null ? void 0 : item.id) ? "id" : "label";
|
|
4
3
|
const selectionElement = item && item[selectionKey];
|
|
@@ -37,17 +36,8 @@ const parseList = (item, props, selectAll, list = []) => {
|
|
|
37
36
|
});
|
|
38
37
|
return newList;
|
|
39
38
|
};
|
|
40
|
-
const hideTooltip = (evt) => {
|
|
41
|
-
const isOverFlow = evt.target.children.length > 1 ? Array.of(...evt.target.children).some((child) => child.scrollWidth > child.clientWidth) : evt.target.scrollWidth > evt.target.clientWidth;
|
|
42
|
-
return !isOverFlow;
|
|
43
|
-
};
|
|
44
|
-
const wrapperTooltip = (hasTooltips, Component, label) => {
|
|
45
|
-
const ComponentFunction = () => Component;
|
|
46
|
-
return hasTooltips ? withTooltip(ComponentFunction, label, "top", hideTooltip, {}, {}) : ComponentFunction;
|
|
47
|
-
};
|
|
48
39
|
export {
|
|
49
40
|
isItemSelected,
|
|
50
|
-
parseList
|
|
51
|
-
wrapperTooltip
|
|
41
|
+
parseList
|
|
52
42
|
};
|
|
53
43
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/components/List/utils.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./List\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n const selectionKey = item?.id ? \"id\" : \"label\";\n const selectionElement = item && item[selectionKey];\n return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n const hasLeftIcons = checkIcons(list);\n const selection = list.filter((elem: any) => elem?.selected);\n const anySelected = !!selection.length;\n const allSelected = selection.length === list.length;\n const anySelectableSelected = list.some(\n (elem: any) => elem?.selected || elem?.disabled\n );\n const allSelectableSelected = list.every(\n (elem: any) => elem?.selected || elem?.disabled\n );\n\n return {\n list,\n hasLeftIcons,\n anySelected,\n allSelected,\n anySelectableSelected,\n allSelectableSelected,\n selection,\n };\n};\n\nconst parseList = (\n item: HvListValue | undefined,\n props: {\n multiSelect?: boolean;\n selectable?: boolean;\n singleSelectionToggle?: boolean;\n },\n selectAll: boolean | undefined,\n list: HvListValue[] = []\n): HvListValue[] => {\n const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n let anySelected = false;\n const newList = list.map((elem: any) => {\n const newItem = { ...elem };\n\n // reset elem item\n if (!multiSelect) {\n newItem.selected = false;\n }\n\n const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n if (selectItem && selectable) {\n let selectionState;\n\n if (multiSelect) {\n selectionState = item ? !elem?.selected : true;\n } else {\n selectionState =\n !anySelected &&\n (item && singleSelectionToggle ? !elem?.selected : true);\n }\n\n newItem.selected = selectionState;\n anySelected = true;\n }\n\n if (typeof selectAll === \"boolean\" && !elem?.disabled)\n newItem.selected = selectAll;\n\n // normalize item selected prop if not provided\n if (!newItem?.selected) newItem.selected = false;\n\n return newItem;\n });\n\n return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":["isItemSelected","item","newItem","selectionKey","id","selectionElement","parseList","props","selectAll","list","multiSelect","selectable","singleSelectionToggle","anySelected","newList","map","elem","selected","selectItem","selectionState","disabled"],"mappings":"AAEMA,MAAAA,iBAAiBA,CAACC,MAAmBC,YAAyB;AAC5DC,QAAAA,gBAAeF,6BAAMG,MAAK,OAAO;AACjCC,QAAAA,mBAAmBJ,QAAQA,KAAKE,YAAY;AAC3CD,SAAAA,QAAQC,YAAY,MAAME;AACnC;AA2BA,MAAMC,YAAYA,CAChBL,MACAM,OAKAC,WACAC,OAAsB,CAAA,MACJ;AACZ,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAYC;AAAAA,EAAAA,IAA0BL,SAAS,CAAA;AAEpE,MAAIM,cAAc;AAClB,QAAMC,UAAUL,KAAKM,IAAI,CAACC,SAAc;AACtC,UAAMd,UAAU;AAAA,MAAE,GAAGc;AAAAA,IAAAA;AAGrB,QAAI,CAACN,aAAa;AAChBR,cAAQe,WAAW;AAAA,IACrB;AAEA,UAAMC,aAAajB,OAAOD,eAAeC,MAAMC,OAAO,IAAIc,6BAAMC;AAEhE,QAAIC,cAAcP,YAAY;AACxBQ,UAAAA;AAEJ,UAAIT,aAAa;AACET,yBAAAA,OAAO,EAACe,6BAAMC,YAAW;AAAA,MAAA,OACrC;AACLE,yBACE,CAACN,gBACAZ,QAAQW,wBAAwB,EAACI,6BAAMC,YAAW;AAAA,MACvD;AAEAf,cAAQe,WAAWE;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAOX,cAAc,aAAa,EAACQ,6BAAMI;AAC3ClB,cAAQe,WAAWT;AAGrB,QAAI,EAACN,mCAASe;AAAUf,cAAQe,WAAW;AAEpCf,WAAAA;AAAAA,EAAAA,CACR;AAEMY,SAAAA;AACT;"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
import { useContext, useCallback } from "react";
|
|
3
|
+
import { VerticalNavigationContext } from "../VerticalNavigation.js";
|
|
4
|
+
import { StyledAction } from "./Action.styles.js";
|
|
5
|
+
import actionClasses from "./actionClasses.js";
|
|
6
|
+
import { jsxs } from "@emotion/react/jsx-runtime";
|
|
7
|
+
import { isKeypress } from "../../../utils/keyboardUtils/keyCheck.js";
|
|
8
|
+
import { keyboardCodes } from "../../../utils/keyboardUtils/keyboardCodes.js";
|
|
9
|
+
import { setId } from "../../../utils/setId.js";
|
|
10
|
+
const HvVerticalNavigationAction = ({
|
|
11
|
+
className,
|
|
12
|
+
classes,
|
|
13
|
+
id,
|
|
14
|
+
label = "",
|
|
15
|
+
icon,
|
|
16
|
+
onClick,
|
|
17
|
+
...others
|
|
18
|
+
}) => {
|
|
19
|
+
const {
|
|
20
|
+
isOpen
|
|
21
|
+
} = useContext(VerticalNavigationContext);
|
|
22
|
+
const handleKeyDown = useCallback((event) => {
|
|
23
|
+
if (onClick == null || !isKeypress(event, keyboardCodes.Enter) && !isKeypress(event, keyboardCodes.SpaceBar)) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
onClick(event);
|
|
27
|
+
}, [onClick]);
|
|
28
|
+
return /* @__PURE__ */ jsxs(StyledAction, {
|
|
29
|
+
id: setId(id, "button"),
|
|
30
|
+
component: "div",
|
|
31
|
+
role: "button",
|
|
32
|
+
className: clsx(className, actionClasses.action, classes == null ? void 0 : classes.action, !icon && clsx(actionClasses.noIcon, classes == null ? void 0 : classes.noIcon), !isOpen && clsx(actionClasses.minimized, classes == null ? void 0 : classes.action)),
|
|
33
|
+
tabIndex: 0,
|
|
34
|
+
onKeyDown: handleKeyDown,
|
|
35
|
+
onClick,
|
|
36
|
+
...others,
|
|
37
|
+
children: [icon, isOpen && label]
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
export {
|
|
41
|
+
HvVerticalNavigationAction
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=Action.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Action.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { MouseEventHandler, useCallback, useContext } from \"react\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { VerticalNavigationContext } from \"../VerticalNavigation\";\nimport { StyledAction } from \"./Action.styles\";\nimport actionClasses, {\n HvVerticalNavigationActionClasses,\n} from \"./actionClasses\";\n\nexport const HvVerticalNavigationAction = ({\n className,\n classes,\n id,\n label = \"\",\n icon,\n onClick,\n ...others\n}: HvVerticalNavigationActionProps) => {\n const { isOpen } = useContext(VerticalNavigationContext);\n\n const handleKeyDown = useCallback(\n (event) => {\n if (\n onClick == null ||\n (!isKeypress(event, keyboardCodes.Enter) &&\n !isKeypress(event, keyboardCodes.SpaceBar))\n ) {\n return;\n }\n\n onClick(event);\n },\n [onClick]\n );\n\n return (\n <StyledAction\n id={setId(id, \"button\")}\n component=\"div\"\n role=\"button\"\n className={clsx(\n className,\n actionClasses.action,\n classes?.action,\n !icon && clsx(actionClasses.noIcon, classes?.noIcon),\n !isOpen && clsx(actionClasses.minimized, classes?.action)\n )}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n onClick={onClick}\n {...others}\n >\n {icon}\n {isOpen && label}\n </StyledAction>\n );\n};\n\nexport type HvVerticalNavigationActionProps = {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvVerticalNavigationActionClasses;\n /**\n * Id to be applied to the action.\n */\n id?: string;\n /**\n * Visual label.\n */\n label?: string;\n /**\n * Icon.\n */\n icon?: React.ReactNode;\n /**\n * Callback called when clicked.\n */\n onClick?: MouseEventHandler<HTMLElement>;\n};\n"],"names":["HvVerticalNavigationAction","className","classes","id","label","icon","onClick","others","isOpen","useContext","VerticalNavigationContext","handleKeyDown","useCallback","event","isKeypress","keyboardCodes","Enter","SpaceBar","StyledAction","setId","component","role","clsx","actionClasses","action","noIcon","minimized","tabIndex","onKeyDown","children"],"mappings":";;;;;;;;;AASO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC4B,MAAM;AAC/B,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,WAAWC,yBAAyB;AAEjDC,QAAAA,gBAAgBC,YACnBC,CAAU,UAAA;AACT,QACEP,WAAW,QACV,CAACQ,WAAWD,OAAOE,cAAcC,KAAK,KACrC,CAACF,WAAWD,OAAOE,cAAcE,QAAQ,GAC3C;AACA;AAAA,IACF;AAEAX,YAAQO,KAAK;AAAA,EAAA,GAEf,CAACP,OAAO,CAAC;AAGX,8BACGY,cAAY;AAAA,IACXf,IAAIgB,MAAMhB,IAAI,QAAQ;AAAA,IACtBiB,WAAU;AAAA,IACVC,MAAK;AAAA,IACLpB,WAAWqB,KACTrB,WACAsB,cAAcC,QACdtB,mCAASsB,QACT,CAACnB,QAAQiB,KAAKC,cAAcE,QAAQvB,mCAASuB,MAAM,GACnD,CAACjB,UAAUc,KAAKC,cAAcG,WAAWxB,mCAASsB,MAAM,CAAC;AAAA,IAE3DG,UAAU;AAAA,IACVC,WAAWjB;AAAAA,IACXL;AAAAA,IAAiB,GACbC;AAAAA,IAAMsB,UAETxB,CAAAA,MACAG,UAAUJ,KAAK;AAAA,EAAA,CACH;AAEnB;"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
|
+
import actionClasses from "./actionClasses.js";
|
|
4
|
+
import { HvTypography } from "../../Typography/Typography.js";
|
|
5
|
+
import { outlineStyles } from "../../../utils/focusUtils.js";
|
|
6
|
+
const hover = () => ({
|
|
7
|
+
background: theme.verticalNavigation.hoverColor,
|
|
8
|
+
"& *": {
|
|
9
|
+
background: theme.verticalNavigation.hoverColor
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
const StyledAction = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? {
|
|
13
|
+
target: "e13j4on70"
|
|
14
|
+
} : {
|
|
15
|
+
target: "e13j4on70",
|
|
16
|
+
label: "StyledAction"
|
|
17
|
+
})({
|
|
18
|
+
width: "100%",
|
|
19
|
+
display: "flex",
|
|
20
|
+
justifyContent: "flex-start",
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
height: "32px",
|
|
23
|
+
color: theme.colors.acce1,
|
|
24
|
+
// hover
|
|
25
|
+
"&:hover": hover(),
|
|
26
|
+
"&:focus": {
|
|
27
|
+
outline: "none",
|
|
28
|
+
...hover()
|
|
29
|
+
},
|
|
30
|
+
"&:focus-visible": {
|
|
31
|
+
...outlineStyles
|
|
32
|
+
},
|
|
33
|
+
// cursor
|
|
34
|
+
cursor: "pointer",
|
|
35
|
+
"& *": {
|
|
36
|
+
cursor: "pointer"
|
|
37
|
+
},
|
|
38
|
+
[`& .${actionClasses.noIcon}`]: {
|
|
39
|
+
paddingLeft: theme.space.xs
|
|
40
|
+
},
|
|
41
|
+
[`&.${actionClasses.minimized}`]: {
|
|
42
|
+
justifyContent: "center",
|
|
43
|
+
paddingRight: 0
|
|
44
|
+
}
|
|
45
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYTRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9uLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2VHlwb2dyYXBoeSB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgYWN0aW9uQ2xhc3NlcyBmcm9tIFwiLi9hY3Rpb25DbGFzc2VzXCI7XG5cbmNvbnN0IGhvdmVyID0gKCkgPT4gKHtcbiAgYmFja2dyb3VuZDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmhvdmVyQ29sb3IsXG4gIFwiJiAqXCI6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uaG92ZXJDb2xvcixcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQWN0aW9uID0gc3R5bGVkKEh2VHlwb2dyYXBoeSkoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJmbGV4LXN0YXJ0XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCIzMnB4XCIsXG4gIGNvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTEsXG5cbiAgLy8gaG92ZXJcbiAgXCImOmhvdmVyXCI6IGhvdmVyKCksXG5cbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICAuLi5ob3ZlcigpLFxuICB9LFxuXG4gIFwiJjpmb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuXG4gIC8vIGN1cnNvclxuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICBcIiYgKlwiOiB7XG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgfSxcblxuICBbYCYgLiR7YWN0aW9uQ2xhc3Nlcy5ub0ljb259YF06IHtcbiAgICBwYWRkaW5nTGVmdDogdGhlbWUuc3BhY2UueHMsXG4gIH0sXG5cbiAgW2AmLiR7YWN0aW9uQ2xhc3Nlcy5taW5pbWl6ZWR9YF06IHtcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwYWRkaW5nUmlnaHQ6IDAsXG4gIH0sXG59KTtcbiJdfQ== */");
|
|
46
|
+
export {
|
|
47
|
+
StyledAction
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=Action.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Action.styles.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Action.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvTypography } from \"components\";\nimport { outlineStyles } from \"utils\";\nimport actionClasses from \"./actionClasses\";\n\nconst hover = () => ({\n background: theme.verticalNavigation.hoverColor,\n \"& *\": {\n background: theme.verticalNavigation.hoverColor,\n },\n});\n\nexport const StyledAction = styled(HvTypography)({\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n height: \"32px\",\n color: theme.colors.acce1,\n\n // hover\n \"&:hover\": hover(),\n\n \"&:focus\": {\n outline: \"none\",\n ...hover(),\n },\n\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n\n // cursor\n cursor: \"pointer\",\n \"& *\": {\n cursor: \"pointer\",\n },\n\n [`& .${actionClasses.noIcon}`]: {\n paddingLeft: theme.space.xs,\n },\n\n [`&.${actionClasses.minimized}`]: {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n});\n"],"names":["hover","background","theme","verticalNavigation","hoverColor","StyledAction","HvTypography","process","env","NODE_ENV","target","label","width","display","justifyContent","alignItems","height","color","colors","acce1","outline","outlineStyles","cursor","actionClasses","noIcon","paddingLeft","space","xs","minimized","paddingRight"],"mappings":";;;;;AAMA,MAAMA,QAAQA,OAAO;AAAA,EACnBC,YAAYC,MAAMC,mBAAmBC;AAAAA,EACrC,OAAO;AAAA,IACLH,YAAYC,MAAMC,mBAAmBC;AAAAA,EACvC;AACF;AAEO,MAAMC,eAAsBC,wBAAAA,cAAYC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC/CC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,gBAAgB;AAAA,EAChBC,YAAY;AAAA,EACZC,QAAQ;AAAA,EACRC,OAAOf,MAAMgB,OAAOC;AAAAA;AAAAA,EAGpB,WAAWnB,MAAO;AAAA,EAElB,WAAW;AAAA,IACToB,SAAS;AAAA,IACT,GAAGpB,MAAK;AAAA,EACV;AAAA,EAEA,mBAAmB;AAAA,IACjB,GAAGqB;AAAAA,EACL;AAAA;AAAA,EAGAC,QAAQ;AAAA,EACR,OAAO;AAAA,IACLA,QAAQ;AAAA,EACV;AAAA,EAEA,CAAE,MAAKC,cAAcC,QAAQ,GAAG;AAAA,IAC9BC,aAAavB,MAAMwB,MAAMC;AAAAA,EAC3B;AAAA,EAEA,CAAE,KAAIJ,cAAcK,WAAW,GAAG;AAAA,IAChCd,gBAAgB;AAAA,IAChBe,cAAc;AAAA,EAChB;AACF,GAACtB,QAAAC,IAAAC,aAAC,eAAA,KAAA,q2DAAA;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { VerticalNavigationContext } from "../VerticalNavigation.js";
|
|
4
|
+
import { StyledRoot } from "./Actions.styles.js";
|
|
5
|
+
import actionsClasses from "./actionsClasses.js";
|
|
6
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
7
|
+
const HvVerticalNavigationActions = ({
|
|
8
|
+
className,
|
|
9
|
+
classes,
|
|
10
|
+
id,
|
|
11
|
+
children,
|
|
12
|
+
...others
|
|
13
|
+
}) => {
|
|
14
|
+
const {
|
|
15
|
+
isOpen,
|
|
16
|
+
collapsedMode
|
|
17
|
+
} = useContext(VerticalNavigationContext);
|
|
18
|
+
return /* @__PURE__ */ jsx(StyledRoot, {
|
|
19
|
+
id,
|
|
20
|
+
className: clsx(className, actionsClasses.root, classes == null ? void 0 : classes.root, !isOpen && collapsedMode == "simple" && clsx(actionsClasses.hide, classes == null ? void 0 : classes.hide)),
|
|
21
|
+
...others,
|
|
22
|
+
children
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
HvVerticalNavigationActions
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Actions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { VerticalNavigationContext } from \"../VerticalNavigation\";\nimport { StyledRoot } from \"./Actions.styles\";\nimport actionsClasses, {\n HvVerticalNavigationActionsClasses,\n} from \"./actionsClasses\";\n\nexport const HvVerticalNavigationActions = ({\n className,\n classes,\n id,\n children,\n ...others\n}: HvVerticalNavigationActionsProps) => {\n const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);\n\n return (\n <StyledRoot\n id={id}\n className={clsx(\n className,\n actionsClasses.root,\n classes?.root,\n !isOpen &&\n collapsedMode == \"simple\" &&\n clsx(actionsClasses.hide, classes?.hide)\n )}\n {...others}\n >\n {children}\n </StyledRoot>\n );\n};\n\nexport type HvVerticalNavigationActionsProps = {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvVerticalNavigationActionsClasses;\n /**\n * Id to be applied to the actions container.\n */\n id?: string;\n /**\n * Node to be rendered\n */\n children?: React.ReactNode;\n};\n"],"names":["HvVerticalNavigationActions","className","classes","id","children","others","isOpen","collapsedMode","useContext","VerticalNavigationContext","StyledRoot","clsx","actionsClasses","root","hide"],"mappings":";;;;;;AAQO,MAAMA,8BAA8BA,CAAC;AAAA,EAC1CC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC6B,MAAM;AAChC,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,EAAAA,IAAkBC,WAAWC,yBAAyB;AAEtE,6BACGC,YAAU;AAAA,IACTP;AAAAA,IACAF,WAAWU,KACTV,WACAW,eAAeC,MACfX,mCAASW,MACT,CAACP,UACCC,iBAAiB,YACjBI,KAAKC,eAAeE,MAAMZ,mCAASY,IAAI,CAAC;AAAA,IAC1C,GACET;AAAAA,IAAMD;AAAAA,EAAAA,CAGC;AAEjB;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
|
+
import actionsClasses from "./actionsClasses.js";
|
|
4
|
+
const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
|
|
5
|
+
target: "e11q2fjk0"
|
|
6
|
+
} : {
|
|
7
|
+
target: "e11q2fjk0",
|
|
8
|
+
label: "StyledRoot"
|
|
9
|
+
})({
|
|
10
|
+
display: "block",
|
|
11
|
+
background: theme.colors.atmo1,
|
|
12
|
+
marginTop: theme.verticalNavigation.actionsMarginTop,
|
|
13
|
+
"& :not(:last-child)": {
|
|
14
|
+
// theme.verticalNavigation.actionsMarginTop,
|
|
15
|
+
marginBottom: "8px"
|
|
16
|
+
},
|
|
17
|
+
[`&.${actionsClasses.hide}`]: {
|
|
18
|
+
display: "none"
|
|
19
|
+
}
|
|
20
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL0FjdGlvbnMvQWN0aW9ucy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9BY3Rpb25zL0FjdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IGFjdGlvbnNDbGFzc2VzIGZyb20gXCIuL2FjdGlvbnNDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJibG9ja1wiLFxuICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gIG1hcmdpblRvcDogdGhlbWUudmVydGljYWxOYXZpZ2F0aW9uLmFjdGlvbnNNYXJnaW5Ub3AsXG5cbiAgXCImIDpub3QoOmxhc3QtY2hpbGQpXCI6IHtcbiAgICAvLyB0aGVtZS52ZXJ0aWNhbE5hdmlnYXRpb24uYWN0aW9uc01hcmdpblRvcCxcbiAgICBtYXJnaW5Cb3R0b206IFwiOHB4XCIsXG4gIH0sXG5cbiAgW2AmLiR7YWN0aW9uc0NsYXNzZXMuaGlkZX1gXToge1xuICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICB9LFxufSk7XG4iXX0= */");
|
|
21
|
+
export {
|
|
22
|
+
StyledRoot
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=Actions.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Actions.styles.js","sources":["../../../../../src/components/VerticalNavigation/Actions/Actions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport actionsClasses from \"./actionsClasses\";\n\nexport const StyledRoot = styled(\"div\")({\n display: \"block\",\n background: theme.colors.atmo1,\n marginTop: theme.verticalNavigation.actionsMarginTop,\n\n \"& :not(:last-child)\": {\n // theme.verticalNavigation.actionsMarginTop,\n marginBottom: \"8px\",\n },\n\n [`&.${actionsClasses.hide}`]: {\n display: \"none\",\n },\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","display","background","theme","colors","atmo1","marginTop","verticalNavigation","actionsMarginTop","marginBottom","actionsClasses","hide"],"mappings":";;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCC,SAAS;AAAA,EACTC,YAAYC,MAAMC,OAAOC;AAAAA,EACzBC,WAAWH,MAAMI,mBAAmBC;AAAAA,EAEpC,uBAAuB;AAAA;AAAA,IAErBC,cAAc;AAAA,EAChB;AAAA,EAEA,CAAE,KAAIC,eAAeC,MAAM,GAAG;AAAA,IAC5BV,SAAS;AAAA,EACX;AACF,GAACL,QAAAC,IAAAC,aAAC,eAAA,KAAA,6pCAAA;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["action", "noIcon", "minimized"];
|
|
3
|
+
const actionClasses = getClasses(classKeys, "HvVerticalNavigationAction");
|
|
4
|
+
const actionClasses$1 = actionClasses;
|
|
5
|
+
export {
|
|
6
|
+
actionClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=actionClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"actionClasses.js","sources":["../../../../../src/components/VerticalNavigation/Actions/actionClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationActionClasses = {\n action?: string;\n noIcon?: string;\n minimized?: string;\n};\n\nconst classKeys: string[] = [\"action\", \"noIcon\", \"minimized\"];\n\nconst actionClasses = getClasses<HvVerticalNavigationActionClasses>(\n classKeys,\n \"HvVerticalNavigationAction\"\n);\n\nexport default actionClasses;\n"],"names":["classKeys","actionClasses","getClasses"],"mappings":";AAQA,MAAMA,YAAsB,CAAC,UAAU,UAAU,WAAW;AAE5D,MAAMC,gBAAgBC,WACpBF,WACA,4BAA4B;AAG9B,MAAA,kBAAeC;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["root", "hide"];
|
|
3
|
+
const actionsClasses = getClasses(classKeys, "HvVerticalNavigationActions");
|
|
4
|
+
const actionsClasses$1 = actionsClasses;
|
|
5
|
+
export {
|
|
6
|
+
actionsClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=actionsClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"actionsClasses.js","sources":["../../../../../src/components/VerticalNavigation/Actions/actionsClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvVerticalNavigationActionsClasses = {\n root?: string;\n hide?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"hide\"];\n\nconst actionsClasses = getClasses<HvVerticalNavigationActionsClasses>(\n classKeys,\n \"HvVerticalNavigationActions\"\n);\n\nexport default actionsClasses;\n"],"names":["classKeys","actionsClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAsB,CAAC,QAAQ,MAAM;AAE3C,MAAMC,iBAAiBC,WACrBF,WACA,6BAA6B;AAG/B,MAAA,mBAAeC;"}
|