npm - @hitachivantara/uikit-react-core - Versions diffs - 5.66.11 → 5.66.13 - Mend

@hitachivantara/uikit-react-core 5.66.11 → 5.66.13

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.

Files changed (260) hide show

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n DescendantProvider,\n useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n /*\n Id to be applied to the root node.\n /\n id?: string;\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 Radio button.\n /\n classes?: HvVerticalNavigationTreeViewItemClasses;\n /\n Is the node disabled.\n /\n disabled?: boolean;\n /\n Can the node be selected.\n /\n selectable?: boolean;\n /\n The id of the node.\n /\n nodeId?: string;\n /\n The icon to display next to the node's label.\n /\n icon?: React.ReactNode;\n /\n The item label.\n /\n label?: React.ReactNode;\n /\n The url for the link.\n /\n href?: string;\n /\n The behavior when opening a link.\n /\n target?: string;\n /\n The node payload.\n /\n payload?: any;\n /\n @ignore\n /\n onClick?: any;\n /\n @ignore\n /\n onMouseDown?: any;\n /\n @ignore\n /\n onFocus?: any;\n /\n The content of the component.\n /\n children?: React.ReactNode;\n /\n @ignore\n /\n onMouseEnter?: any;\n /\n Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n /\n disableTooltip?: boolean;\n}\n\nconst preventSelection = (event, disabled) => {\n if (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey \|\| disabled) {\n // Prevent text selection\n event.preventDefault();\n }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n\n disabled: disabledProp = false,\n\n selectable: selectableProp,\n\n nodeId,\n icon = null,\n label,\n href,\n target,\n payload,\n\n onClick,\n onMouseDown,\n onFocus,\n\n children,\n\n disableTooltip,\n\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const treeViewControlContext = useContext(TreeViewControlContext);\n const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n useContext(TreeViewStateContext);\n\n const {\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode,\n selectRange,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n } = treeViewControlContext;\n\n const treeviewMode = mode === \"treeview\";\n\n let id: string \| null = null;\n\n if (idProp != null) {\n id = idProp;\n } else if (treeId && nodeId) {\n id = `${treeId}-${nodeId}`;\n }\n\n const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeitemElement, ref);\n\n const descendant = useMemo(\n () => ({\n element: treeitemElement!,\n id: nodeId!,\n }),\n [nodeId, treeitemElement],\n );\n\n const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n VerticalNavigationContext,\n );\n\n const { index, parentId, level } = useDescendant(descendant);\n\n const expandable = collapsible && Array.isArray(children);\n const expanded = isExpanded ? isExpanded(nodeId) : false;\n const focused = isFocused ? isFocused(nodeId) : false;\n const selected = isSelected ? isSelected(nodeId) : false;\n const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n const selectable =\n selectableProp != null\n ? selectableProp\n : !collapsible \|\| !expandable \|\| !isOpen;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (registerNode && unregisterNode && index !== -1) {\n registerNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n selectable,\n expandable,\n disabled: disabledProp,\n onFocus,\n payload,\n });\n\n return () => {\n unregisterNode(nodeId);\n };\n }\n\n return undefined;\n }, [\n registerNode,\n unregisterNode,\n parentId,\n index,\n nodeId,\n expandable,\n disabledProp,\n id,\n selectable,\n onFocus,\n payload,\n ]);\n\n useEffect(() => {\n if (\n mapFirstChar &&\n unMapFirstChar &&\n label &&\n contentRef.current?.textContent\n ) {\n mapFirstChar(\n nodeId,\n contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n );\n\n return () => {\n unMapFirstChar(nodeId);\n };\n }\n return undefined;\n }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n let ariaSelected;\n if (multiSelect) {\n ariaSelected = selected;\n } else if (selected) {\n / single-selection trees unset aria-selected on un-selected items.\n \n If the tree does not support multiple selection, aria-selected\n * is set to true for the selected node and it is not present on any other node in the tree.\n * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n /\n ariaSelected = true;\n }\n\n const handleFocus = useCallback(\n (event) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n (event.target.ownerDocument \|\| document)\n .getElementById(treeId)\n .focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n if (\n !focused &&\n event.currentTarget === event.target &&\n !unfocusable &&\n focus\n ) {\n focus(event, nodeId);\n }\n },\n [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n );\n\n const handleExpansion = useCallback(\n (event) => {\n if (!disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n // If already expanded and trying to toggle selection don't close\n if (\n expandable &&\n isOpen &&\n !(multiple && isExpanded && isExpanded(nodeId))\n ) {\n if (toggleExpansion) toggleExpansion(event, nodeId);\n }\n }\n },\n [\n disabled,\n expandable,\n focus,\n focused,\n isExpanded,\n multiSelect,\n nodeId,\n toggleExpansion,\n treeviewMode,\n isOpen,\n ],\n );\n\n const handleSelection = useCallback(\n (event) => {\n if (selectable && !disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n if (multiple) {\n if (event.shiftKey) {\n if (selectRange) return selectRange(event, { end: nodeId });\n } else if (selectNode) return selectNode(event, nodeId, true);\n } else if (selectNode) return selectNode(event, nodeId);\n } else {\n return false;\n }\n },\n [\n disabled,\n focus,\n focused,\n multiSelect,\n nodeId,\n selectNode,\n selectRange,\n selectable,\n treeviewMode,\n ],\n );\n\n const handleMouseDown = useCallback(\n (event) => {\n preventSelection(event, disabled);\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [disabled, onMouseDown],\n );\n\n const handleClick = useCallback(\n (event) => {\n if (!disabled) {\n if (expandable && isOpen) {\n handleExpansion(event);\n }\n\n if (selectable) {\n handleSelection(event);\n }\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [\n disabled,\n expandable,\n handleExpansion,\n handleSelection,\n onClick,\n selectable,\n isOpen,\n ],\n );\n\n const handleKeyDown = useCallback(\n (event) => {\n let isEventHandled = false;\n const { key } = event;\n\n if (\n event.altKey \|\|\n event.ctrlKey \|\|\n event.metaKey \|\|\n event.currentTarget !== event.target\n ) {\n return;\n }\n if (contentRef.current === event.currentTarget) {\n if (key === \"Enter\" \|\| key === \" \") {\n if (expandable && isOpen) {\n isEventHandled = handleExpansion(event) as unknown as boolean;\n }\n\n if (selectable) {\n isEventHandled = handleSelection(event) as boolean;\n }\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n },\n [expandable, handleExpansion, handleSelection, selectable, isOpen],\n );\n\n const renderedContent = useMemo(() => {\n const buttonLinkProps = {\n href,\n target,\n };\n\n const hasChildren = !!children;\n const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n const isLink = href !== undefined && !disabled;\n\n return (\n <HvTooltip placement=\"right\" title={showTooltip && label}>\n <HvTypography\n id={setId(id, \"button\")}\n component={isLink ? \"a\" : \"div\"}\n {...(isLink ? buttonLinkProps : null)}\n ref={contentRef}\n className={cx(classes.content, {\n [classes.link]: isLink,\n [classes.minimized]: !isOpen,\n })}\n variant=\"body\"\n disabled={disabled}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (useIcons \|\| !isOpen ? 0 : 10) +\n level (collapsible ? 16 : 10),\n }}\n role={isLink ? undefined : \"button\"}\n {...(treeviewMode\n ? {\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n tabIndex: selectable \|\| expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\":\n (selectable && selected) \|\|\n (!isOpen && isChildSelected?.(nodeId))\n ? href\n ? \"page\"\n : true\n : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\":\n isOpen && expandable ? setId(id, \"group\") : undefined,\n \"aria-label\": payload?.label,\n })}\n >\n <IconWrapper\n icon={useIcons && icon}\n label={payload?.label}\n hasChildren={hasChildren}\n showAvatar={!icon && useIcons}\n isOpen={isOpen}\n hasAnyChildWithData={hasAnyChildWithData}\n style={{\n // @ts-ignore\n \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n }}\n className={classes.icon}\n />\n\n {isOpen && (\n <div\n className={cx(classes.label, {\n [classes.labelIcon]: useIcons,\n [classes.labelExpandable]: !!expandable,\n })}\n >\n <HvOverflowTooltip data={label} />\n </div>\n )}\n\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n </HvTypography>\n </HvTooltip>\n );\n }, [\n href,\n target,\n children,\n isOpen,\n disableTooltip,\n disabled,\n label,\n id,\n cx,\n classes.content,\n classes.link,\n classes.minimized,\n classes.icon,\n classes.label,\n classes.labelIcon,\n classes.labelExpandable,\n handleClick,\n handleMouseDown,\n useIcons,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n expandable,\n handleKeyDown,\n selected,\n isChildSelected,\n nodeId,\n expanded,\n payload?.label,\n icon,\n hasAnyChildWithData,\n ]);\n\n const renderedChildren = useMemo(\n () =>\n children && (\n <ul\n id={setId(id, \"group\")}\n className={classes.group}\n role={treeviewMode ? \"group\" : undefined}\n >\n {children}\n </ul>\n ),\n [children, classes?.group, id, treeviewMode],\n );\n\n return (\n <li\n ref={handleRef}\n id={id ?? undefined}\n className={cx(\n classes.node,\n {\n [classes.disabled]: disabled,\n [classes.expandable]: expandable,\n [classes.collapsed]: expandable && !expanded,\n [classes.expanded]: expandable && expanded,\n [classes.selectable]: selectable && !disabled,\n [classes.unselectable]: !disabled && !selectable,\n [classes.selected]:\n (!disabled && selectable && selected) \|\|\n (!isOpen &&\n useIcons &&\n isChildSelected &&\n isChildSelected(nodeId)),\n [classes.unselected]: !disabled && selectable && !selected,\n [classes.focused]: focused,\n [classes.hide]: !isOpen && !useIcons,\n },\n className,\n )}\n data-hasicon={icon != null ? true : undefined}\n {...(mode === \"treeview\" && {\n role: \"treeitem\",\n \"aria-selected\": ariaSelected,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-disabled\": disabled ? true : undefined,\n })}\n {...others}\n >\n {renderedContent}\n {isOpen && (\n <DescendantProvider id={nodeId} level={level + 1}>\n {renderedChildren}\n </DescendantProvider>\n )}\n </li>\n );\n },\n);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n DescendantProvider,\n useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { IconWrapper } from \"./IconWrapper\";\nimport {\n TreeViewControlContext,\n TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n /*\n Id to be applied to the root node.\n /\n id?: string;\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 Radio button.\n /\n classes?: HvVerticalNavigationTreeViewItemClasses;\n /\n Is the node disabled.\n /\n disabled?: boolean;\n /\n Can the node be selected.\n /\n selectable?: boolean;\n /\n The id of the node.\n /\n nodeId?: string;\n /\n The icon to display next to the node's label.\n /\n icon?: React.ReactNode;\n /\n The item label.\n /\n label?: React.ReactNode;\n /\n The url for the link.\n /\n href?: string;\n /\n The behavior when opening a link.\n /\n target?: string;\n /\n The node payload.\n /\n payload?: any;\n /\n @ignore\n /\n onClick?: any;\n /\n @ignore\n /\n onMouseDown?: any;\n /\n @ignore\n /\n onFocus?: any;\n /\n The content of the component.\n /\n children?: React.ReactNode;\n /\n @ignore\n /\n onMouseEnter?: any;\n /\n Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n /\n disableTooltip?: boolean;\n}\n\nconst preventSelection = (event: any, disabled: any) => {\n if (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey \|\| disabled) {\n // Prevent text selection\n event.preventDefault();\n }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n\n disabled: disabledProp = false,\n\n selectable: selectableProp,\n\n nodeId,\n icon = null,\n label,\n href,\n target,\n payload,\n\n onClick,\n onMouseDown,\n onFocus,\n\n children,\n\n disableTooltip,\n\n ...others\n } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const treeViewControlContext = useContext(TreeViewControlContext);\n const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n useContext(TreeViewStateContext);\n\n const {\n treeId,\n mode,\n collapsible,\n toggleExpansion,\n multiSelect,\n selectNode,\n selectRange,\n disabledItemsFocusable,\n registerNode,\n unregisterNode,\n mapFirstChar,\n unMapFirstChar,\n focus,\n } = treeViewControlContext;\n\n const treeviewMode = mode === \"treeview\";\n\n let id: string \| null = null;\n\n if (idProp != null) {\n id = idProp;\n } else if (treeId && nodeId) {\n id = `${treeId}-${nodeId}`;\n }\n\n const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n const contentRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(setTreeitemElement, ref);\n\n const descendant = useMemo(\n () => ({\n element: treeitemElement!,\n id: nodeId!,\n }),\n [nodeId, treeitemElement],\n );\n\n const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n VerticalNavigationContext,\n );\n\n const { index, parentId, level } = useDescendant(descendant);\n\n const expandable = collapsible && Array.isArray(children);\n const expanded = isExpanded ? isExpanded(nodeId) : false;\n const focused = isFocused ? isFocused(nodeId) : false;\n const selected = isSelected ? isSelected(nodeId) : false;\n const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n const selectable =\n selectableProp != null\n ? selectableProp\n : !collapsible \|\| !expandable \|\| !isOpen;\n\n useEffect(() => {\n // On the first render a node's index will be -1. We want to wait for the real index.\n if (registerNode && unregisterNode && index !== -1) {\n registerNode({\n id: nodeId,\n idAttribute: id,\n index,\n parentId,\n selectable,\n expandable,\n disabled: disabledProp,\n onFocus,\n payload,\n });\n\n return () => {\n unregisterNode(nodeId);\n };\n }\n\n return undefined;\n }, [\n registerNode,\n unregisterNode,\n parentId,\n index,\n nodeId,\n expandable,\n disabledProp,\n id,\n selectable,\n onFocus,\n payload,\n ]);\n\n useEffect(() => {\n if (\n mapFirstChar &&\n unMapFirstChar &&\n label &&\n contentRef.current?.textContent\n ) {\n mapFirstChar(\n nodeId,\n contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n );\n\n return () => {\n unMapFirstChar(nodeId);\n };\n }\n return undefined;\n }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n let ariaSelected;\n if (multiSelect) {\n ariaSelected = selected;\n } else if (selected) {\n / single-selection trees unset aria-selected on un-selected items.\n \n If the tree does not support multiple selection, aria-selected\n * is set to true for the selected node and it is not present on any other node in the tree.\n * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n /\n ariaSelected = true;\n }\n\n const handleFocus = useCallback(\n (event: any) => {\n // DOM focus stays on the tree which manages focus with aria-activedescendant\n if (event.target === event.currentTarget) {\n (event.target.ownerDocument \|\| document)\n .getElementById(treeId)\n .focus({ preventScroll: true });\n }\n\n const unfocusable = !disabledItemsFocusable && disabled;\n if (\n !focused &&\n event.currentTarget === event.target &&\n !unfocusable &&\n focus\n ) {\n focus(event, nodeId);\n }\n },\n [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n );\n\n const handleExpansion = useCallback(\n (event: any) => {\n if (!disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n // If already expanded and trying to toggle selection don't close\n if (\n expandable &&\n isOpen &&\n !(multiple && isExpanded && isExpanded(nodeId))\n ) {\n if (toggleExpansion) toggleExpansion(event, nodeId);\n }\n }\n },\n [\n disabled,\n expandable,\n focus,\n focused,\n isExpanded,\n multiSelect,\n nodeId,\n toggleExpansion,\n treeviewMode,\n isOpen,\n ],\n );\n\n const handleSelection = useCallback(\n (event: any) => {\n if (selectable && !disabled) {\n if (treeviewMode && !focused && focus) {\n focus(event, nodeId);\n }\n\n const multiple =\n multiSelect && (event.shiftKey \|\| event.ctrlKey \|\| event.metaKey);\n\n if (multiple) {\n if (event.shiftKey) {\n if (selectRange) return selectRange(event, { end: nodeId });\n } else if (selectNode) return selectNode(event, nodeId, true);\n } else if (selectNode) return selectNode(event, nodeId);\n } else {\n return false;\n }\n },\n [\n disabled,\n focus,\n focused,\n multiSelect,\n nodeId,\n selectNode,\n selectRange,\n selectable,\n treeviewMode,\n ],\n );\n\n const handleMouseDown = useCallback(\n (event: any) => {\n preventSelection(event, disabled);\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [disabled, onMouseDown],\n );\n\n const handleClick = useCallback(\n (event: any) => {\n if (!disabled) {\n if (expandable && isOpen) {\n handleExpansion(event);\n }\n\n if (selectable) {\n handleSelection(event);\n }\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [\n disabled,\n expandable,\n handleExpansion,\n handleSelection,\n onClick,\n selectable,\n isOpen,\n ],\n );\n\n const handleKeyDown = useCallback(\n (event: any) => {\n let isEventHandled = false;\n const { key } = event;\n\n if (\n event.altKey \|\|\n event.ctrlKey \|\|\n event.metaKey \|\|\n event.currentTarget !== event.target\n ) {\n return;\n }\n if (contentRef.current === event.currentTarget) {\n if (key === \"Enter\" \|\| key === \" \") {\n if (expandable && isOpen) {\n isEventHandled = handleExpansion(event) as unknown as boolean;\n }\n\n if (selectable) {\n isEventHandled = handleSelection(event) as boolean;\n }\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n },\n [expandable, handleExpansion, handleSelection, selectable, isOpen],\n );\n\n const renderedContent = useMemo(() => {\n const buttonLinkProps = {\n href,\n target,\n };\n\n const hasChildren = !!children;\n const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n const isLink = href !== undefined && !disabled;\n\n return (\n <HvTooltip placement=\"right\" title={showTooltip && label}>\n <HvTypography\n id={setId(id, \"button\")}\n component={isLink ? \"a\" : \"div\"}\n {...(isLink ? buttonLinkProps : null)}\n ref={contentRef}\n className={cx(classes.content, {\n [classes.link]: isLink,\n [classes.minimized]: !isOpen,\n })}\n variant=\"body\"\n disabled={disabled}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n style={{\n paddingLeft:\n (useIcons \|\| !isOpen ? 0 : 10) +\n level (collapsible ? 16 : 10),\n }}\n role={isLink ? undefined : \"button\"}\n {...(treeviewMode\n ? {\n tabIndex: -1,\n onFocus: handleFocus,\n }\n : {\n tabIndex: selectable \|\| expandable ? 0 : -1,\n onKeyDown: handleKeyDown,\n \"aria-current\":\n (selectable && selected) \|\|\n (!isOpen && isChildSelected?.(nodeId))\n ? href\n ? \"page\"\n : true\n : undefined,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-controls\":\n isOpen && expandable ? setId(id, \"group\") : undefined,\n \"aria-label\": payload?.label,\n })}\n >\n <IconWrapper\n icon={useIcons && icon}\n label={payload?.label}\n hasChildren={hasChildren}\n showAvatar={!icon && useIcons}\n isOpen={isOpen}\n hasAnyChildWithData={hasAnyChildWithData}\n style={{\n // @ts-ignore\n \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n }}\n className={classes.icon}\n />\n\n {isOpen && (\n <div\n className={cx(classes.label, {\n [classes.labelIcon]: useIcons,\n [classes.labelExpandable]: !!expandable,\n })}\n >\n <HvOverflowTooltip data={label} />\n </div>\n )}\n\n {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n </HvTypography>\n </HvTooltip>\n );\n }, [\n href,\n target,\n children,\n isOpen,\n disableTooltip,\n disabled,\n label,\n id,\n cx,\n classes.content,\n classes.link,\n classes.minimized,\n classes.icon,\n classes.label,\n classes.labelIcon,\n classes.labelExpandable,\n handleClick,\n handleMouseDown,\n useIcons,\n level,\n collapsible,\n treeviewMode,\n handleFocus,\n selectable,\n expandable,\n handleKeyDown,\n selected,\n isChildSelected,\n nodeId,\n expanded,\n payload?.label,\n icon,\n hasAnyChildWithData,\n ]);\n\n const renderedChildren = useMemo(\n () =>\n children && (\n <ul\n id={setId(id, \"group\")}\n className={classes.group}\n role={treeviewMode ? \"group\" : undefined}\n >\n {children}\n </ul>\n ),\n [children, classes?.group, id, treeviewMode],\n );\n\n return (\n <li\n ref={handleRef}\n id={id ?? undefined}\n className={cx(\n classes.node,\n {\n [classes.disabled]: disabled,\n [classes.expandable]: expandable,\n [classes.collapsed]: expandable && !expanded,\n [classes.expanded]: expandable && expanded,\n [classes.selectable]: selectable && !disabled,\n [classes.unselectable]: !disabled && !selectable,\n [classes.selected]:\n (!disabled && selectable && selected) \|\|\n (!isOpen &&\n useIcons &&\n isChildSelected &&\n isChildSelected(nodeId)),\n [classes.unselected]: !disabled && selectable && !selected,\n [classes.focused]: focused,\n [classes.hide]: !isOpen && !useIcons,\n },\n className,\n )}\n data-hasicon={icon != null ? true : undefined}\n {...(mode === \"treeview\" && {\n role: \"treeitem\",\n \"aria-selected\": ariaSelected,\n \"aria-expanded\": expandable ? expanded : undefined,\n \"aria-disabled\": disabled ? true : undefined,\n })}\n {...others}\n >\n {renderedContent}\n {isOpen && (\n <DescendantProvider id={nodeId} level={level + 1}>\n {renderedChildren}\n </DescendantProvider>\n )}\n </li>\n );\n },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/VerticalNavigation/VerticalNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigation.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\nimport {\n NavigationData,\n VerticalNavigationContext,\n} from \"./VerticalNavigationContext\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport type HvVerticalNavigationMode = \"icon\" \| \"simple\";\n\nexport type HvVerticalNavigationPosition =\n \| \"static\"\n \| \"relative\"\n \| \"fixed\"\n \| \"absolute\";\n\nexport interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivElement> {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvVerticalNavigationClasses;\n /* Current State of the Vertical Navigation Collapse /\n open?: boolean;\n /\n Collapsed Mode for the Vertical Navigation, the default value is \"simple\".\n \n @deprecated - `useIcons` property should be used instead.\n /\n collapsedMode?: HvVerticalNavigationMode;\n /* Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false. /\n slider?: boolean;\n /\n Boolean to determine if icons should be displayed in the navigation menu.\n * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n * displayed inside an Avatar component.\n * When `false` no icons will be shown, even if an icon is provided.\n /\n useIcons?: boolean;\n}\n\n/\n Navigation enables users to move through an app to complete tasks.\n \n It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n \n Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n \n The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n \n The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n \n Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n open = true,\n slider = false,\n useIcons = false,\n ...others\n } = useDefaultProps(\"HvVerticalNavigation\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string \| undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData],\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected],\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const hasAnyChildWithData = useMemo(\n () => hasChildNavigationItems(parentData),\n [parentData],\n );\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem],\n );\n\n const navigateToParentHandler = useCallback(() => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n }, [parentItem, setParentItem, withParentData]);\n\n const navigateToChildHandler = useCallback(\n (event, item) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n },\n [setParentItem, withParentData],\n );\n\n const value = useMemo(\n () => ({\n isOpen: open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n hasAnyChildWithData,\n }),\n [\n open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n hasAnyChildWithData,\n parentData,\n parentSelected,\n ],\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <div\n id={id}\n className={cx(\n classes.root,\n {\n [classes.collapsed]: !open,\n [classes.slider]: slider,\n [classes.childData]: hasAnyChildWithData,\n },\n className,\n )}\n {...others}\n >\n {children}\n </div>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n"],"names":[],"mappings":";;;;;;;;AAmEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AAErD,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAGnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,qBAAqB,UAAU;AAAA,IACrC,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,oBAAoB;AAAA,IACxB,MAAM,kBAAkB,gBAAgB,cAAc;AAAA,IACtD,CAAC,gBAAgB,cAAc;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,iBAAiB;AAE9D,QAAM,sBAAsB;AAAA,IAC1B,MAAM,wBAAwB,UAAU;AAAA,IACxC,CAAC,UAAU;AAAA,EAAA;AAGb;AAAA,IACE,MAAM,eAAe,YAAY,KAAK;AAAA,IACtC,CAAC,YAAY,aAAa;AAAA,EAAA;AAGtB,QAAA,0BAA0B,YAAY,MAAM;AAChD,kBAAc,kBAAkB,gBAAgB,WAAW,EAAE,CAAC;AAAA,EAC7D,GAAA,CAAC,YAAY,eAAe,cAAc,CAAC;AAE9C,QAAM,yBAAyB;AAAA,IAC7B,CAAC,~~OAAO~~,~~SAAS~~;~~AACf~~,oBAAc,sBAAsB,gBAAgB,KAAK,EAAE,CAAC;AAC5D,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,cAAc;AAAA,EAAA;AAGhC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,UACJ,oBAAC,0BAA0B,UAA1B,EAAmC,OAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,UACtB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,SAAS,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAGK,SAAA;AACT;"}
1	+ {"version":3,"file":"VerticalNavigation.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n fillDataWithParentId,\n getNavigationItemById,\n getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\nimport {\n NavigationData,\n VerticalNavigationContext,\n} from \"./VerticalNavigationContext\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport type HvVerticalNavigationMode = \"icon\" \| \"simple\";\n\nexport type HvVerticalNavigationPosition =\n \| \"static\"\n \| \"relative\"\n \| \"fixed\"\n \| \"absolute\";\n\nexport interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivElement> {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvVerticalNavigationClasses;\n /* Current State of the Vertical Navigation Collapse /\n open?: boolean;\n /\n Collapsed Mode for the Vertical Navigation, the default value is \"simple\".\n \n @deprecated - `useIcons` property should be used instead.\n /\n collapsedMode?: HvVerticalNavigationMode;\n /* Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false. /\n slider?: boolean;\n /\n Boolean to determine if icons should be displayed in the navigation menu.\n * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n * displayed inside an Avatar component.\n * When `false` no icons will be shown, even if an icon is provided.\n /\n useIcons?: boolean;\n}\n\n/\n Navigation enables users to move through an app to complete tasks.\n \n It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n \n Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n \n The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n \n The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n \n Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n open = true,\n slider = false,\n useIcons = false,\n ...others\n } = useDefaultProps(\"HvVerticalNavigation\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n const [parentSelected, setParentSelected] = useState();\n\n const [headerTitle, setHeaderTitle] = useState<string \| undefined>();\n\n // navigationSlider\n const withParentData = useMemo(\n () => fillDataWithParentId(parentData),\n [parentData],\n );\n\n const initialParentItem = useMemo(\n () => getParentItemById(withParentData, parentSelected),\n [withParentData, parentSelected],\n );\n\n const [parentItem, setParentItem] = useState(initialParentItem);\n\n const hasAnyChildWithData = useMemo(\n () => hasChildNavigationItems(parentData),\n [parentData],\n );\n\n useEffect(\n () => setHeaderTitle(parentItem?.label),\n [parentItem, setParentItem],\n );\n\n const navigateToParentHandler = useCallback(() => {\n setParentItem(getParentItemById(withParentData, parentItem.id));\n }, [parentItem, setParentItem, withParentData]);\n\n const navigateToChildHandler = useCallback(\n (event: any, item: any) => {\n setParentItem(getNavigationItemById(withParentData, item.id));\n event.stopPropagation();\n },\n [setParentItem, withParentData],\n );\n\n const value = useMemo(\n () => ({\n isOpen: open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n\n parentData,\n setParentData,\n parentSelected,\n setParentSelected,\n hasAnyChildWithData,\n }),\n [\n open,\n useIcons,\n slider,\n headerTitle,\n setHeaderTitle,\n parentItem,\n setParentItem,\n withParentData,\n navigateToChildHandler,\n navigateToParentHandler,\n hasAnyChildWithData,\n parentData,\n parentSelected,\n ],\n );\n\n const content = (\n <VerticalNavigationContext.Provider value={value}>\n <div\n id={id}\n className={cx(\n classes.root,\n {\n [classes.collapsed]: !open,\n [classes.slider]: slider,\n [classes.childData]: hasAnyChildWithData,\n },\n className,\n )}\n {...others}\n >\n {children}\n </div>\n </VerticalNavigationContext.Provider>\n );\n\n return content;\n};\n"],"names":[],"mappings":";;;;;;;;AAmEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AAErD,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAGnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,qBAAqB,UAAU;AAAA,IACrC,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,oBAAoB;AAAA,IACxB,MAAM,kBAAkB,gBAAgB,cAAc;AAAA,IACtD,CAAC,gBAAgB,cAAc;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,iBAAiB;AAE9D,QAAM,sBAAsB;AAAA,IAC1B,MAAM,wBAAwB,UAAU;AAAA,IACxC,CAAC,UAAU;AAAA,EAAA;AAGb;AAAA,IACE,MAAM,eAAe,YAAY,KAAK;AAAA,IACtC,CAAC,YAAY,aAAa;AAAA,EAAA;AAGtB,QAAA,0BAA0B,YAAY,MAAM;AAChD,kBAAc,kBAAkB,gBAAgB,WAAW,EAAE,CAAC;AAAA,EAC7D,GAAA,CAAC,YAAY,eAAe,cAAc,CAAC;AAE9C,QAAM,yBAAyB;AAAA,IAC7B,CAAC,OAAY,SAAc;AACzB,oBAAc,sBAAsB,gBAAgB,KAAK,EAAE,CAAC;AAC5D,YAAM,gBAAgB;AAAA,IACxB;AAAA,IACA,CAAC,eAAe,cAAc;AAAA,EAAA;AAGhC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,UACJ,oBAAC,0BAA0B,UAA1B,EAAmC,OAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,UACtB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,SAAS,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAGK,SAAA;AACT;"}

package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalNavigationContext.js","sources":["../../../src/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n React.ComponentProps<T> &\n Record<string, any> & {\n /** The id to be applied to the root element. /\n id: string;\n /* The label to be rendered on the menu item. /\n label: string;\n /* The icon to be rendered. /\n icon?: React.ReactNode;\n /* The Data children subset. /\n data?: NavigationData<T>[];\n /* Whether the item is disabled and not interactive. /\n disabled?: boolean;\n /* Whether the item has a selected state. */\n selectable?: boolean;\n };\n\ninterface VerticalNavigationContextValue {\n isOpen: boolean;\n useIcons: boolean;\n slider?: boolean;\n headerTitle?: string;\n setHeaderTitle?: React.Dispatch<React.SetStateAction<string \| undefined>>;\n\n parentItem~~?;\~~n setParentItem?: React.Dispatch<React.SetStateAction<any>>;\n withParentData~~?;\~~n navigateToChildHandler?: (event, item) => void;\n navigateToParentHandler?: () => void;\n\n parentData?: NavigationData[];\n setParentData?: React.Dispatch<React.SetStateAction<any>>;\n parentSelected~~?;\~~n setParentSelected?: React.Dispatch<React.SetStateAction<any>>;\n\n hasAnyChildWithData?: boolean;\n}\n\nconst VerticalNavigationContext = createContext<VerticalNavigationContextValue>(\n {\n isOpen: true,\n useIcons: false,\n slider: false,\n },\n);\n\nexport { VerticalNavigationContext };\n"],"names":[],"mappings":";AAwCA,MAAM,4BAA4B;AAAA,EAChC;AAAA,IACE,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;"}
1	+ {"version":3,"file":"VerticalNavigationContext.js","sources":["../../../src/VerticalNavigation/VerticalNavigationContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type NavigationData<T extends React.ElementType = \"a\"> =\n React.ComponentProps<T> &\n Record<string, any> & {\n /** The id to be applied to the root element. /\n id: string;\n /* The label to be rendered on the menu item. /\n label: string;\n /* The icon to be rendered. /\n icon?: React.ReactNode;\n /* The Data children subset. /\n data?: NavigationData<T>[];\n /* Whether the item is disabled and not interactive. /\n disabled?: boolean;\n /* Whether the item has a selected state. */\n selectable?: boolean;\n };\n\ninterface VerticalNavigationContextValue {\n isOpen: boolean;\n useIcons: boolean;\n slider?: boolean;\n headerTitle?: string;\n setHeaderTitle?: React.Dispatch<React.SetStateAction<string \| undefined>>;\n\n parentItem?: any;\n setParentItem?: React.Dispatch<React.SetStateAction<any>>;\n withParentData?: any;\n navigateToChildHandler?: (event: any, item: any) => void;\n navigateToParentHandler?: () => void;\n\n parentData?: NavigationData[];\n setParentData?: React.Dispatch<React.SetStateAction<any>>;\n parentSelected?: any;\n setParentSelected?: React.Dispatch<React.SetStateAction<any>>;\n\n hasAnyChildWithData?: boolean;\n}\n\nconst VerticalNavigationContext = createContext<VerticalNavigationContextValue>(\n {\n isOpen: true,\n useIcons: false,\n slider: false,\n },\n);\n\nexport { VerticalNavigationContext };\n"],"names":[],"mappings":";AAwCA,MAAM,4BAA4B;AAAA,EAChC;AAAA,IACE,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;"}

package/dist/esm/hocs/withTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nexport const withTooltip =\n (\n Component: React.FunctionComponent,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement: HvTooltipPlacementType,\n hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n tooltipProps?: Partial<HvTooltipProps>,\n tooltipContainerProps?: HvBaseProps,\n ) =>\n (props) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean \| undefined>(\n false,\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n const isHidden = hideTooltip?.(event);\n setIsHoverDisabled(isHidden);\n setOpen(!isHidden);\n };\n\n const handleMouseLeave = () => {\n setIsHoverDisabled(false);\n setOpen(false);\n };\n\n return (\n <HvTooltip\n style={{ ...styles.truncate }}\n disableHoverListener={isHoverDisabled}\n disableFocusListener\n disableTouchListener\n title={label}\n open={open}\n placement={placement}\n {...tooltipProps}\n >\n <div\n {...tooltipContainerProps}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Component {...props} />\n </div>\n </HvTooltip>\n );\n };\n"],"names":[],"mappings":";;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,~~UAAU~~;~~AACH~~,QAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAEzC,QAAA,mBAAmB,CAAC,UAA4C;AAC9D,UAAA,WAAW,cAAc,KAAK;AACpC,uBAAmB,QAAQ;AAC3B,YAAQ,CAAC,QAAQ;AAAA,EAAA;AAGnB,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AACxB,YAAQ,KAAK;AAAA,EAAA;AAIb,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,MAC5B,sBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACpB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAc;AAAA,UACd,cAAc;AAAA,UAEd,UAAA,oBAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"withTooltip.js","sources":["../../../src/hocs/withTooltip.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvTooltip, HvTooltipPlacementType, HvTooltipProps } from \"../Tooltip\";\nimport { HvBaseProps } from \"../types/generic\";\n\nconst styles: { truncate: React.CSSProperties } = {\n truncate: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n};\n\nexport const withTooltip =\n (\n Component: React.FunctionComponent,\n // eslint-disable-next-line @typescript-eslint/default-param-last\n label = \"\",\n placement: HvTooltipPlacementType,\n hideTooltip?: (event: React.MouseEvent<HTMLDivElement>) => boolean,\n tooltipProps?: Partial<HvTooltipProps>,\n tooltipContainerProps?: HvBaseProps,\n ) =>\n (props: any) => {\n const [isHoverDisabled, setIsHoverDisabled] = useState<boolean \| undefined>(\n false,\n );\n const [open, setOpen] = useState<boolean>(false);\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n const isHidden = hideTooltip?.(event);\n setIsHoverDisabled(isHidden);\n setOpen(!isHidden);\n };\n\n const handleMouseLeave = () => {\n setIsHoverDisabled(false);\n setOpen(false);\n };\n\n return (\n <HvTooltip\n style={{ ...styles.truncate }}\n disableHoverListener={isHoverDisabled}\n disableFocusListener\n disableTouchListener\n title={label}\n open={open}\n placement={placement}\n {...tooltipProps}\n >\n <div\n {...tooltipContainerProps}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Component {...props} />\n </div>\n </HvTooltip>\n );\n };\n"],"names":[],"mappings":";;;AAKA,MAAM,SAA4C;AAAA,EAChD,UAAU;AAAA,IACR,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACF;AAEa,MAAA,cACX,CACE,WAEA,QAAQ,IACR,WACA,aACA,cACA,0BAEF,CAAC,UAAe;AACR,QAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAEzC,QAAA,mBAAmB,CAAC,UAA4C;AAC9D,UAAA,WAAW,cAAc,KAAK;AACpC,uBAAmB,QAAQ;AAC3B,YAAQ,CAAC,QAAQ;AAAA,EAAA;AAGnB,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AACxB,YAAQ,KAAK;AAAA,EAAA;AAIb,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,MAC5B,sBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACpB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,cAAc;AAAA,UACd,cAAc;AAAA,UAEd,UAAA,oBAAC,WAAW,EAAA,GAAG,MAAO,CAAA;AAAA,QAAA;AAAA,MACxB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/hooks/useComputation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useComputation.js","sources":["../../../src/hooks/useComputation.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nexport const useComputation = (valueFn, valueFallback?) => {\n const computed = useRef<any>(null);\n const [value, setValue] = useState(valueFallback);\n\n const computeValue = () => {\n if (!computed.current) {\n setValue(valueFn?.());\n computed.current = true;\n }\n };\n\n return [value, computeValue];\n};\n"],"names":[],"mappings":";AAEa,MAAA,iBAAiB,CAAC,~~SAAS~~,~~kBAAmB~~;~~AACnD~~,QAAA,WAAW,OAAY,IAAI;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,aAAa;AAEhD,QAAM,eAAe,MAAM;AACrB,QAAA,CAAC,SAAS,SAAS;AACrB,eAAS,WAAW;AACpB,eAAS,UAAU;AAAA,IACrB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,YAAY;AAC7B;"}
1	+ {"version":3,"file":"useComputation.js","sources":["../../../src/hooks/useComputation.ts"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nexport const useComputation = (valueFn: Function, valueFallback?: Function) => {\n const computed = useRef<any>(null);\n const [value, setValue] = useState(valueFallback);\n\n const computeValue = () => {\n if (!computed.current) {\n setValue(valueFn?.());\n computed.current = true;\n }\n };\n\n return [value, computeValue];\n};\n"],"names":[],"mappings":";AAEa,MAAA,iBAAiB,CAAC,SAAmB,kBAA6B;AACvE,QAAA,WAAW,OAAY,IAAI;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,aAAa;AAEhD,QAAM,eAAe,MAAM;AACrB,QAAA,CAAC,SAAS,SAAS;AACrB,eAAS,WAAW;AACpB,eAAS,UAAU;AAAA,IACrB;AAAA,EAAA;AAGK,SAAA,CAAC,OAAO,YAAY;AAC7B;"}

package/dist/esm/hooks/useCss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCss.js","sources":["../../../src/hooks/useCss.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { EmotionCache, css as emotionCss } from \"@emotion/css\";\nimport { RegisteredCache, serializeStyles } from \"@emotion/serialize\";\nimport { getRegisteredStyles, insertStyles } from \"@emotion/utils\";\nimport clsx from \"clsx\";\n\nimport { useEmotionCache } from \"./useEmotionCache\";\n\ntype CSS = typeof emotionCss;\n\nfunction getRef(args: any[]) {\n if (args.length !== 1) {\n return { args, ref: undefined };\n }\n\n const [arg] = args;\n\n if (!(arg instanceof Object)) {\n return { args, ref: undefined };\n }\n\n if (!(\"ref\" in arg)) {\n return { args, ref: undefined };\n }\n\n const { ref, ...argCopy } = arg;\n return { args: [argCopy], ref };\n}\n\nconst cssFactory = (() => {\n function merge(registered: RegisteredCache, css: CSS, className: string) {\n const registeredStyles: string[] = [];\n\n const rawClassName = getRegisteredStyles(\n registered,\n registeredStyles,\n className,\n );\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n }\n\n function innerCssFactory(cache: EmotionCache) {\n const css: CSS = (...styles: any) => {\n const { ref, args } = getRef(styles);\n const serialized = serializeStyles(args, cache.registered);\n insertStyles(cache, serialized, false);\n return `${cache.key}-${serialized.name}${\n ref === undefined ? \"\" : ` ${ref}`\n }`;\n };\n\n const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n return { css, cx };\n }\n\n return innerCssFactory;\n})();\n\nexport function useCss() {\n const cache = useEmotionCache();\n return useMemo(() => cssFactory(cache), [cache]);\n}\n"],"names":[],"mappings":";;;;;~~AAUA~~,SAAS,OAAO,MAAa;AACvB,MAAA,KAAK,WAAW,GAAG;AACd,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEM,QAAA,CAAC,GAAG,IAAI;AAEV,MAAA,EAAE,eAAe,SAAS;AACrB,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEI,MAAA,EAAE,SAAS,MAAM;AACZ,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEA,QAAM,EAAE,KAAK,GAAG,QAAA,IAAY;AAC5B,SAAO,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI;AAChC;AAEA,MAAM,aAAoB,uBAAA;AACf,WAAA,MAAM,YAA6B,KAAU,WAAmB;AACvE,UAAM,mBAA6B,CAAA;AAEnC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGE,QAAA,iBAAiB,SAAS,GAAG;AACxB,aAAA;AAAA,IACT;AAEO,WAAA,eAAe,IAAI,gBAAgB;AAAA,EAC5C;AAEA,WAAS,gBAAgB,OAAqB;AACtC,UAAA,MAAW,IAAI,WAAgB;AACnC,YAAM,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM;AACnC,YAAM,aAAa,gBAAgB,MAAM,MAAM,UAAU;AAC5C,mBAAA,OAAO,YAAY,KAAK;AACrC,aAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI,GACpC,QAAQ,SAAY,KAAK,IAAI,GAAG,EAClC;AAAA,IAAA;AAGI,UAAA,KAAK,IAAI,SAAc,MAAM,MAAM,YAAY,KAAK,KAAK,IAAI,CAAC;AAE7D,WAAA,EAAE,KAAK;EAChB;AAEO,SAAA;AACT;AAEO,SAAS,SAAS;AACvB,QAAM,QAAQ;AACd,SAAO,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AACjD;"}
1	+ {"version":3,"file":"useCss.js","sources":["../../../src/hooks/useCss.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { EmotionCache } from \"@emotion/cache\";\nimport { css as emotionCss } from \"@emotion/css\";\nimport { RegisteredCache, serializeStyles } from \"@emotion/serialize\";\nimport { getRegisteredStyles, insertStyles } from \"@emotion/utils\";\nimport clsx from \"clsx\";\n\nimport { useEmotionCache } from \"./useEmotionCache\";\n\ntype CSS = typeof emotionCss;\n\nfunction getRef(args: any[]) {\n if (args.length !== 1) {\n return { args, ref: undefined };\n }\n\n const [arg] = args;\n\n if (!(arg instanceof Object)) {\n return { args, ref: undefined };\n }\n\n if (!(\"ref\" in arg)) {\n return { args, ref: undefined };\n }\n\n const { ref, ...argCopy } = arg;\n return { args: [argCopy], ref };\n}\n\nconst cssFactory = (() => {\n function merge(registered: RegisteredCache, css: CSS, className: string) {\n const registeredStyles: string[] = [];\n\n const rawClassName = getRegisteredStyles(\n registered,\n registeredStyles,\n className,\n );\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n }\n\n function innerCssFactory(cache: EmotionCache) {\n const css: CSS = (...styles: any) => {\n const { ref, args } = getRef(styles);\n const serialized = serializeStyles(args, cache.registered);\n insertStyles(cache, serialized, false);\n return `${cache.key}-${serialized.name}${\n ref === undefined ? \"\" : ` ${ref}`\n }`;\n };\n\n const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n return { css, cx };\n }\n\n return innerCssFactory;\n})();\n\nexport function useCss() {\n const cache = useEmotionCache();\n return useMemo(() => cssFactory(cache), [cache]);\n}\n"],"names":[],"mappings":";;;;;AAWA,SAAS,OAAO,MAAa;AACvB,MAAA,KAAK,WAAW,GAAG;AACd,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEM,QAAA,CAAC,GAAG,IAAI;AAEV,MAAA,EAAE,eAAe,SAAS;AACrB,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEI,MAAA,EAAE,SAAS,MAAM;AACZ,WAAA,EAAE,MAAM,KAAK,OAAU;AAAA,EAChC;AAEA,QAAM,EAAE,KAAK,GAAG,QAAA,IAAY;AAC5B,SAAO,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI;AAChC;AAEA,MAAM,aAAoB,uBAAA;AACf,WAAA,MAAM,YAA6B,KAAU,WAAmB;AACvE,UAAM,mBAA6B,CAAA;AAEnC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGE,QAAA,iBAAiB,SAAS,GAAG;AACxB,aAAA;AAAA,IACT;AAEO,WAAA,eAAe,IAAI,gBAAgB;AAAA,EAC5C;AAEA,WAAS,gBAAgB,OAAqB;AACtC,UAAA,MAAW,IAAI,WAAgB;AACnC,YAAM,EAAE,KAAK,KAAK,IAAI,OAAO,MAAM;AACnC,YAAM,aAAa,gBAAgB,MAAM,MAAM,UAAU;AAC5C,mBAAA,OAAO,YAAY,KAAK;AACrC,aAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI,GACpC,QAAQ,SAAY,KAAK,IAAI,GAAG,EAClC;AAAA,IAAA;AAGI,UAAA,KAAK,IAAI,SAAc,MAAM,MAAM,YAAY,KAAK,KAAK,IAAI,CAAC;AAE7D,WAAA,EAAE,KAAK;EAChB;AAEO,SAAA;AACT;AAEO,SAAS,SAAS;AACvB,QAAM,QAAQ;AACd,SAAO,QAAQ,MAAM,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AACjD;"}

package/dist/esm/hooks/useForkRef.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useForkRef.js","sources":["../../../src/hooks/useForkRef.ts"],"sourcesContent":["// copied from https://github.com/mui-org/material-ui/blob/03bd73be34424cb2cd17ac602def9ad2b9642de4/packages/material-ui-utils/src/useForkRef.js\nimport * as React from \"react\";\n\nconst setRef = (ref, value) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n};\n\nexport const useForkRef = (refA, refB) => {\n /*\n This will create a new function if the ref props change and are defined.\n * This means react will call the old forkRef with `null` and the new forkRef\n * with the ref. Cleanup naturally emerges from this behavior.\n */\n return React.useMemo(() => {\n if (refA == null && refB == null) {\n return null;\n }\n return (refValue) => {\n setRef(refA, refValue);\n setRef(refB, refValue);\n };\n }, [refA, refB]);\n};\n"],"names":[],"mappings":";AAGA,MAAM,SAAS,CAAC,~~KAAK~~,~~UAAU~~;~~AACzB~~,MAAA,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AAAA,aACA,KAAK;AACd,QAAI,UAAU;AAAA,EAChB;AACF;AAEa,MAAA,aAAa,CAAC,~~MAAM~~,~~SAAS~~;~~AAMjC~~,SAAA,MAAM,QAAQ,MAAM;AACrB,QAAA,QAAQ,QAAQ,QAAQ,MAAM;AACzB,aAAA;AAAA,IACT;AACA,WAAO,CAAC,~~aAAa~~;~~AACnB~~,aAAO,MAAM,QAAQ;AACrB,aAAO,MAAM,QAAQ;AAAA,IAAA;AAAA,EACvB,GACC,CAAC,MAAM,IAAI,CAAC;AACjB;"}
1	+ {"version":3,"file":"useForkRef.js","sources":["../../../src/hooks/useForkRef.ts"],"sourcesContent":["// copied from https://github.com/mui-org/material-ui/blob/03bd73be34424cb2cd17ac602def9ad2b9642de4/packages/material-ui-utils/src/useForkRef.js\nimport * as React from \"react\";\n\nconst setRef = (ref: any, value: any) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n};\n\nexport const useForkRef = (refA: any, refB: any) => {\n /*\n This will create a new function if the ref props change and are defined.\n * This means react will call the old forkRef with `null` and the new forkRef\n * with the ref. Cleanup naturally emerges from this behavior.\n */\n return React.useMemo(() => {\n if (refA == null && refB == null) {\n return null;\n }\n return (refValue: any) => {\n setRef(refA, refValue);\n setRef(refB, refValue);\n };\n }, [refA, refB]);\n};\n"],"names":[],"mappings":";AAGA,MAAM,SAAS,CAAC,KAAU,UAAe;AACnC,MAAA,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AAAA,aACA,KAAK;AACd,QAAI,UAAU;AAAA,EAChB;AACF;AAEa,MAAA,aAAa,CAAC,MAAW,SAAc;AAM3C,SAAA,MAAM,QAAQ,MAAM;AACrB,QAAA,QAAQ,QAAQ,QAAQ,MAAM;AACzB,aAAA;AAAA,IACT;AACA,WAAO,CAAC,aAAkB;AACxB,aAAO,MAAM,QAAQ;AACrB,aAAO,MAAM,QAAQ;AAAA,IAAA;AAAA,EACvB,GACC,CAAC,MAAM,IAAI,CAAC;AACjB;"}

package/dist/esm/hooks/useUniqueId.js CHANGED Viewed

@@ -4,8 +4,7 @@ let count = 0;
 const useUniqueId = (deterministicId, idPrefix) => {
   const [id, setId] = React.useState(useReactId());
   React.useLayoutEffect(() => {
-    if (!deterministicId)
-      setId((reactId) => reactId ?? String(count++));
+    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
   }, [deterministicId, idPrefix]);
   return deterministicId || (idPrefix ? idPrefix + id : id ?? "");
 };

package/dist/esm/hooks/useUniqueId.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useUniqueId.js","sources":["../../../src/hooks/useUniqueId.ts"],"sourcesContent":["import * as React from \"react\"; // this can be optimized when react 17 support is dropped\n\n/** Credit: https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx\n * Modified slightly to suit our purposes.\n /\n// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)[\"useId\".toString()] \|\| (() => undefined);\nlet count = 0;\n\nexport const useUniqueId = (\n deterministicId?: string,\n /\n @deprecated\n * Users should pick between a fully deterministic or fully generated id\n * @example\n * useUniqueId(setId(idPrefix, deterministicId))\n * */\n idPrefix?: string,\n): string => {\n const [id, setId] = React.useState<string \| undefined>(useReactId());\n\n React.useLayoutEffect(() => {\n // eslint-disable-next-line no-plusplus\n if (!deterministicId) setId((reactId) => reactId ?? String(count++));\n }, [deterministicId, idPrefix]);\n\n return deterministicId \|\| (idPrefix ? idPrefix + id : id ?? \"\");\n};\n"],"names":[],"mappings":";AAMA,MAAM,aAAc,MAAc,QAAQ,SAAU,CAAA,MAAM,MAAM;AAChE,IAAI,QAAQ;AAEC,MAAA,cAAc,CACzB,iBAOA,aACW;AACX,QAAM,CAAC,IAAI,KAAK,IAAI,MAAM,SAA6B,YAAY;AAEnE,QAAM,gBAAgB,MAAM;~~AAE1B~~,~~QAAI~~,CAAC~~;AAAiB~~,~~YAAM~~,CAAC,YAAY,WAAW,OAAO,OAAO,CAAC;AAAA,EAAA,GAClE,CAAC,iBAAiB,QAAQ,CAAC;AAE9B,SAAO,oBAAoB,WAAW,WAAW,~~KAAK~~,MAAM;~~AAC9D~~;"}
1	+ {"version":3,"file":"useUniqueId.js","sources":["../../../src/hooks/useUniqueId.ts"],"sourcesContent":["import * as React from \"react\"; // this can be optimized when react 17 support is dropped\n\n/** Credit: https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx\n * Modified slightly to suit our purposes.\n /\n// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)[\"useId\".toString()] \|\| (() => undefined);\nlet count = 0;\n\nexport const useUniqueId = (\n deterministicId?: string,\n /\n @deprecated\n * Users should pick between a fully deterministic or fully generated id\n * @example\n * useUniqueId(setId(idPrefix, deterministicId))\n * */\n idPrefix?: string,\n): string => {\n const [id, setId] = React.useState<string \| undefined>(useReactId());\n\n React.useLayoutEffect(() => {\n // eslint-disable-next-line no-plusplus\n if (!deterministicId) setId((reactId) => reactId ?? String(count++));\n }, [deterministicId, idPrefix]);\n\n return deterministicId \|\| (idPrefix ? idPrefix + id : (id ?? \"\"));\n};\n"],"names":[],"mappings":";AAMA,MAAM,aAAc,MAAc,QAAQ,SAAU,CAAA,MAAM,MAAM;AAChE,IAAI,QAAQ;AAEC,MAAA,cAAc,CACzB,iBAOA,aACW;AACX,QAAM,CAAC,IAAI,KAAK,IAAI,MAAM,SAA6B,YAAY;AAEnE,QAAM,gBAAgB,MAAM;AAEtB,QAAA,CAAC,gBAAuB,OAAA,CAAC,YAAY,WAAW,OAAO,OAAO,CAAC;AAAA,EAAA,GAClE,CAAC,iBAAiB,QAAQ,CAAC;AAE9B,SAAO,oBAAoB,WAAW,WAAW,KAAM,MAAM;AAC/D;"}

package/dist/esm/providers/Provider.js CHANGED Viewed

@@ -24,10 +24,8 @@ const HvProvider = ({
   const scopedRootId = `${scopedRootPrefix}-${generatedId}`;
   const themesList = processThemes(themes);
   const emotionCache = useMemo(() => {
-    if (emotionCacheProp)
-      return emotionCacheProp;
-    if (classNameKey === defaultCacheKey)
-      return defaultEmotionCache;
+    if (emotionCacheProp) return emotionCacheProp;
+    if (classNameKey === defaultCacheKey) return defaultEmotionCache;
     return createCache({ key: classNameKey, prepend: true });
   }, [classNameKey, emotionCacheProp]);
   return /* @__PURE__ */ jsxs(CacheProvider, { value: emotionCache, children: [

package/dist/esm/providers/Provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport createCache, { EmotionCache } from \"@emotion/cache\";\nimport {\n CacheProvider,\n ClassNames,\n css as cssReact,\n Global,\n} from \"@emotion/react\";\nimport {\n CssBaseline,\n CssScopedBaseline,\n getThemesVars,\n HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTheme } from \"../types/theme\";\nimport { getElementById } from \"../utils/document\";\nimport { processThemes } from \"../utils/theme\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n HvThemeProvider,\n} from \"./ThemeProvider\";\n\n// Provider props\nexport interface HvProviderProps {\n /*\n Your component tree.\n /\n children?: React.ReactNode;\n /\n Id of your root element.\n /\n rootElementId?: string;\n /\n By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.\n * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the baseline to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root`, created around your content.\n If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.\n /\n cssBaseline?: \"global\" \| \"scoped\" \| \"none\";\n /\n By default the theme styles are applied globally, `global`, to the application.\n * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the theme to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root`, created around your content.\n /\n cssTheme?: \"global\" \| \"scoped\";\n /*\n The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n * This is useful to avoid class name collisions.\n \n If `emotionCache` is passed, this is value is ignored.\n \n @default \"hv\"\n /\n classNameKey?: string;\n /\n The emotion cache instance to use. If no value is provided, the default cache is used.\n /\n emotionCache?: EmotionCache;\n /\n List of themes to be used by UI Kit.\n * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n \n If no value is provided, the `ds5` theme will be used.\n /\n themes?: (HvTheme \| HvThemeStructure)[];\n /\n The active theme. It must be one of the themes passed to `themes`.\n \n If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n /\n theme?: string;\n /\n The active color mode. It must be one of the color modes of the active theme.\n \n If no value is provided, the first color mode defined in the active theme is used.\n * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n /\n colorMode?: string;\n}\n\nconst scopedRootPrefix = \"hv-uikit-scoped-root\" as const;\n\n/\n Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n children,\n rootElementId,\n cssBaseline = \"global\",\n cssTheme = \"global\",\n themes,\n theme,\n colorMode,\n emotionCache: emotionCacheProp,\n classNameKey = defaultCacheKey,\n}: HvProviderProps) => {\n const generatedId = useUniqueId();\n const scopedRootId = `${scopedRootPrefix}-${generatedId}`;\n\n // Themes\n const themesList = processThemes(themes);\n\n // Emotion cache\n // Moves UI Kit styles to the top of the <head> so they're loaded first\n // This enables users to override the UI Kit styles if necessary\n const emotionCache = useMemo(() => {\n if (emotionCacheProp) return emotionCacheProp;\n // reuse the default shared cache if `classNameKey` is the same\n if (classNameKey === defaultCacheKey) return defaultEmotionCache;\n\n return createCache({ key: classNameKey, prepend: true });\n }, [classNameKey, emotionCacheProp]);\n\n return (\n <CacheProvider value={emotionCache}>\n <Global\n styles={cssReact`\n ${\n cssBaseline === \"global\" && {\n [`@layer hv-uikit-baseline`]: {\n ...CssBaseline,\n },\n }\n }\n ${getThemesVars(themesList)}\n `}\n />\n <HvThemeProvider\n themes={themesList}\n theme={theme \|\| themesList[0].name}\n emotionCache={emotionCache}\n colorMode={colorMode \|\| Object.keys(themesList[0].colors.modes)[0]}\n themeRootId={\n cssTheme === \"scoped\" ? rootElementId \|\| scopedRootId : undefined\n }\n >\n <ClassNames>\n {({ css }) => {\n if (cssBaseline === \"scoped\") {\n const rootElement = getElementById(rootElementId);\n\n if (rootElement) {\n rootElement.classList.add(\n css({\n [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\n }),\n );\n }\n }\n\n return (cssTheme === \"scoped\" \|\| cssBaseline === \"scoped\") &&\n !rootElementId ? (\n <div\n id={scopedRootId}\n className={\n cssBaseline === \"scoped\"\n ? css({\n [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\n })\n : undefined\n }\n >\n {children}\n </div>\n ) : (\n children\n );\n }}\n </ClassNames>\n </HvThemeProvider>\n </CacheProvider>\n );\n};\n"],"names":["cssReact","css"],"mappings":";;;;;;;;;;AAqFA,MAAM,mBAAmB;AAKlB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AACjB,MAAuB;AACrB,QAAM,cAAc;AACpB,QAAM,eAAe,GAAG,gBAAgB,IAAI,WAAW;AAGjD,QAAA,aAAa,cAAc,MAAM;AAKjC,QAAA,eAAe,QAAQ,MAAM;~~AAC7B~~,QAAA;~~AAAyB~~,~~aAAA;AAE7B~~,~~QAAI,~~iBAAiB~~;AAAwB~~,~~aAAA~~;AAE7C,WAAO,YAAY,EAAE,KAAK,cAAc,SAAS,MAAM;AAAA,EAAA,GACtD,CAAC,cAAc,gBAAgB,CAAC;AAGjC,SAAA,qBAAC,eAAc,EAAA,OAAO,cACpB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQA;AAAAA,YAEJ,gBAAgB,YAAY;AAAA,UAC1B,CAAC,0BAA0B,GAAG;AAAA,YAC5B,GAAG;AAAA,UACL;AAAA,QAAA,CAEJ;AAAA,YACE,cAAc,UAAU,CAAC;AAAA;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,SAAS,WAAW,CAAC,EAAE;AAAA,QAC9B;AAAA,QACA,WAAW,aAAa,OAAO,KAAK,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,CAAC;AAAA,QACjE,aACE,aAAa,WAAW,iBAAiB,eAAe;AAAA,QAG1D,UAAC,oBAAA,YAAA,EACE,UAAC,CAAA,EAAE,KAAAC,WAAU;AACZ,cAAI,gBAAgB,UAAU;AACtB,kBAAA,cAAc,eAAe,aAAa;AAEhD,gBAAI,aAAa;AACf,0BAAY,UAAU;AAAA,gBACpBA,KAAI;AAAA,kBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,oBACpC,GAAG;AAAA,kBACL;AAAA,gBAAA,CACD;AAAA,cAAA;AAAA,YAEL;AAAA,UACF;AAEA,kBAAQ,aAAa,YAAY,gBAAgB,aAC/C,CAAC,gBACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WACE,gBAAgB,WACZA,KAAI;AAAA,gBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,kBACpC,GAAG;AAAA,gBACL;AAAA,cACD,CAAA,IACD;AAAA,cAGL;AAAA,YAAA;AAAA,UAGH,IAAA;AAAA,QAAA,GAGN;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport createCache, { EmotionCache } from \"@emotion/cache\";\nimport {\n CacheProvider,\n ClassNames,\n css as cssReact,\n Global,\n} from \"@emotion/react\";\nimport {\n CssBaseline,\n CssScopedBaseline,\n getThemesVars,\n HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTheme } from \"../types/theme\";\nimport { getElementById } from \"../utils/document\";\nimport { processThemes } from \"../utils/theme\";\nimport {\n defaultCacheKey,\n defaultEmotionCache,\n HvThemeProvider,\n} from \"./ThemeProvider\";\n\n// Provider props\nexport interface HvProviderProps {\n /*\n Your component tree.\n /\n children?: React.ReactNode;\n /\n Id of your root element.\n /\n rootElementId?: string;\n /\n By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.\n * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the baseline to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root`, created around your content.\n If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.\n /\n cssBaseline?: \"global\" \| \"scoped\" \| \"none\";\n /\n By default the theme styles are applied globally, `global`, to the application.\n * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.\n * To scope the theme to your root, you need to add the `rootElementId` property.\n * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root`, created around your content.\n /\n cssTheme?: \"global\" \| \"scoped\";\n /*\n The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n * This is useful to avoid class name collisions.\n \n If `emotionCache` is passed, this is value is ignored.\n \n @default \"hv\"\n /\n classNameKey?: string;\n /\n The emotion cache instance to use. If no value is provided, the default cache is used.\n /\n emotionCache?: EmotionCache;\n /\n List of themes to be used by UI Kit.\n * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n \n If no value is provided, the `ds5` theme will be used.\n /\n themes?: (HvTheme \| HvThemeStructure)[];\n /\n The active theme. It must be one of the themes passed to `themes`.\n \n If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n /\n theme?: string;\n /\n The active color mode. It must be one of the color modes of the active theme.\n \n If no value is provided, the first color mode defined in the active theme is used.\n * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n /\n colorMode?: string;\n}\n\nconst scopedRootPrefix = \"hv-uikit-scoped-root\" as const;\n\n/\n Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n children,\n rootElementId,\n cssBaseline = \"global\",\n cssTheme = \"global\",\n themes,\n theme,\n colorMode,\n emotionCache: emotionCacheProp,\n classNameKey = defaultCacheKey,\n}: HvProviderProps) => {\n const generatedId = useUniqueId();\n const scopedRootId = `${scopedRootPrefix}-${generatedId}`;\n\n // Themes\n const themesList = processThemes(themes);\n\n // Emotion cache\n // Moves UI Kit styles to the top of the <head> so they're loaded first\n // This enables users to override the UI Kit styles if necessary\n const emotionCache = useMemo(() => {\n if (emotionCacheProp) return emotionCacheProp;\n // reuse the default shared cache if `classNameKey` is the same\n if (classNameKey === defaultCacheKey) return defaultEmotionCache;\n\n return createCache({ key: classNameKey, prepend: true });\n }, [classNameKey, emotionCacheProp]);\n\n return (\n <CacheProvider value={emotionCache}>\n <Global\n styles={cssReact`\n ${\n cssBaseline === \"global\" && {\n [`@layer hv-uikit-baseline`]: {\n ...CssBaseline,\n },\n }\n }\n ${getThemesVars(themesList)}\n `}\n />\n <HvThemeProvider\n themes={themesList}\n theme={theme \|\| themesList[0].name}\n emotionCache={emotionCache}\n colorMode={colorMode \|\| Object.keys(themesList[0].colors.modes)[0]}\n themeRootId={\n cssTheme === \"scoped\" ? rootElementId \|\| scopedRootId : undefined\n }\n >\n <ClassNames>\n {({ css }) => {\n if (cssBaseline === \"scoped\") {\n const rootElement = getElementById(rootElementId);\n\n if (rootElement) {\n rootElement.classList.add(\n css({\n [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\n }),\n );\n }\n }\n\n return (cssTheme === \"scoped\" \|\| cssBaseline === \"scoped\") &&\n !rootElementId ? (\n <div\n id={scopedRootId}\n className={\n cssBaseline === \"scoped\"\n ? css({\n [`@layer ${rootElementId}-baseline`]: {\n ...CssScopedBaseline,\n },\n })\n : undefined\n }\n >\n {children}\n </div>\n ) : (\n children\n );\n }}\n </ClassNames>\n </HvThemeProvider>\n </CacheProvider>\n );\n};\n"],"names":["cssReact","css"],"mappings":";;;;;;;;;;AAqFA,MAAM,mBAAmB;AAKlB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AACjB,MAAuB;AACrB,QAAM,cAAc;AACpB,QAAM,eAAe,GAAG,gBAAgB,IAAI,WAAW;AAGjD,QAAA,aAAa,cAAc,MAAM;AAKjC,QAAA,eAAe,QAAQ,MAAM;AACjC,QAAI,iBAAyB,QAAA;AAEzB,QAAA,iBAAiB,gBAAwB,QAAA;AAE7C,WAAO,YAAY,EAAE,KAAK,cAAc,SAAS,MAAM;AAAA,EAAA,GACtD,CAAC,cAAc,gBAAgB,CAAC;AAGjC,SAAA,qBAAC,eAAc,EAAA,OAAO,cACpB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQA;AAAAA,YAEJ,gBAAgB,YAAY;AAAA,UAC1B,CAAC,0BAA0B,GAAG;AAAA,YAC5B,GAAG;AAAA,UACL;AAAA,QAAA,CAEJ;AAAA,YACE,cAAc,UAAU,CAAC;AAAA;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,SAAS,WAAW,CAAC,EAAE;AAAA,QAC9B;AAAA,QACA,WAAW,aAAa,OAAO,KAAK,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,CAAC;AAAA,QACjE,aACE,aAAa,WAAW,iBAAiB,eAAe;AAAA,QAG1D,UAAC,oBAAA,YAAA,EACE,UAAC,CAAA,EAAE,KAAAC,WAAU;AACZ,cAAI,gBAAgB,UAAU;AACtB,kBAAA,cAAc,eAAe,aAAa;AAEhD,gBAAI,aAAa;AACf,0BAAY,UAAU;AAAA,gBACpBA,KAAI;AAAA,kBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,oBACpC,GAAG;AAAA,kBACL;AAAA,gBAAA,CACD;AAAA,cAAA;AAAA,YAEL;AAAA,UACF;AAEA,kBAAQ,aAAa,YAAY,gBAAgB,aAC/C,CAAC,gBACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WACE,gBAAgB,WACZA,KAAI;AAAA,gBACF,CAAC,UAAU,aAAa,WAAW,GAAG;AAAA,kBACpC,GAAG;AAAA,gBACL;AAAA,cACD,CAAA,IACD;AAAA,cAGL;AAAA,YAAA;AAAA,UAGH,IAAA;AAAA,QAAA,GAGN;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/types/generic.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n HvExtraDeepProps,\n HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n /** Custom element type to override the root component /\n component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n C extends React.ElementType,\n Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n FixComponentProps<\n Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n C extends React.ElementType,\n Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/* HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. /\nexport type HvBaseProps<\n E extends HTMLElement = HTMLDivElement,\n K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/* This type allows to do a deep partial by applying the Partial type to each key recursively /\nexport type DeepPartial<T> = T extends {}\n ? Partial<{\n [P in keyof T]: DeepPartial<T[P]>;\n }>\n : T;\n\n/* This type combines the HvExtraProps and DeepPartial types /\nexport type HvExtraDeepPartialProps<T> = Partial<{\n [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;\n}> &\n HvExtraProps;\n\nexport type Arrayable<T> = T \| T[];\n\n/* React.forwardRef with fixed type declarations /\nexport function fixedForwardRef<T, P = {}>(\n ~~// TODO: change `React.ReactElement \| null` to `React.ReactNode` in typescript@5\n~~ render: (props: P, ref: React.Ref<T>) => React.~~ReactElement \| null~~,\n): (props: P & React.RefAttributes<T>) => React.~~ReactElement~~ ~~\| null~~ {\n return forwardRef(render) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/\n Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n * type Props = {\n * name: string;\n * age: number;\n * visible: boolean;\n * };\n \n // Expect: { name?: string; age?: number; visible?: boolean; }\n * type Props = Optional<Props>;\n \n // Expect: { name: string; age?: number; visible?: boolean; }\n * type Props = Optional<Props, 'age' \| 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n T,\n K\n> &\n Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,~~gBAEd~~,~~QACkE~~;~~AAClE~~,SAAO,WAAW,MAAM;AAC1B;"}
1	+ {"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n HvExtraDeepProps,\n HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n /** Custom element type to override the root component /\n component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n C extends React.ElementType,\n Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n FixComponentProps<\n Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n C extends React.ElementType,\n Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/* HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. /\nexport type HvBaseProps<\n E extends HTMLElement = HTMLDivElement,\n K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/* This type allows to do a deep partial by applying the Partial type to each key recursively /\nexport type DeepPartial<T> = T extends {}\n ? Partial<{\n [P in keyof T]: DeepPartial<T[P]>;\n }>\n : T;\n\n/* This type combines the HvExtraProps and DeepPartial types /\nexport type HvExtraDeepPartialProps<T> = Partial<{\n [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;\n}> &\n HvExtraProps;\n\nexport type Arrayable<T> = T \| T[];\n\n/* React.forwardRef with fixed type declarations /\nexport function fixedForwardRef<T, P = {}>(\n render: (props: P, ref: React.Ref<T>) => React.ReactNode,\n): (props: P & React.RefAttributes<T>) => React.ReactNode {\n return forwardRef(render) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/\n Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n * type Props = {\n * name: string;\n * age: number;\n * visible: boolean;\n * };\n \n // Expect: { name?: string; age?: number; visible?: boolean; }\n * type Props = Optional<Props>;\n \n // Expect: { name: string; age?: number; visible?: boolean; }\n * type Props = Optional<Props, 'age' \| 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n T,\n K\n> &\n Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBACd,QACwD;AACxD,SAAO,WAAW,MAAM;AAC1B;"}

package/dist/esm/utils/classes.js CHANGED Viewed

@@ -20,8 +20,7 @@ const deepRenameKeys = (obj, mapFn) => {
 const replace$ = (stylesObj, name) => {
   return deepRenameKeys(stylesObj, (key) => {
     const matches = key.match(/\$\w+/g);
-    if (!matches?.length)
-      return key;
+    if (!matches?.length) return key;
     const newKey = matches.reduce(
       (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),
       key
@@ -34,7 +33,11 @@ function createClasses(name, stylesObject) {
   const staticClasses = getClasses(Object.keys(styles), name);
   function useClasses(classesProp = {}, addStatic = true) {
     const { cx, css } = useCss();
-    const mergeClasses = (key) => cx(addStatic && `${name}-${key}`, css(styles[key]), classesProp?.[key]);
+    const mergeClasses = (key) => cx(
+      addStatic && `${name}-${key}`,
+      css(styles[key]),
+      classesProp?.[key]
+    );
     const classes = Object.fromEntries(
       Object.keys(styles).map((key) => [key, mergeClasses(key)])
     );

package/dist/esm/utils/classes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { useCss } from \"../hooks/useCss\";\n\nexport type ExtractNames<\n T extends (...args: any) => { classes: Record<string, any>; cx: any },\n> = Partial<ReturnType<T>[\"classes\"]>;\n\nexport const getClasses = <T extends string, N extends string>(\n keys: T[],\n name: N,\n) => {\n const classesObj: Record<string, string> = {};\n keys.forEach((key: string) => {\n classesObj[key] = `${name}-${key}`;\n });\n return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n obj: T,\n mapFn: (key: string) => string,\n): T => {\n const result: any = {};\n for (const key in obj) {\n if (Object.hasOwn(obj, key)) {\n const newKey = mapFn(key);\n const value = obj[key];\n result[newKey] =\n typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n }\n }\n return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. /\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n return deepRenameKeys(stylesObj, (key) => {\n const matches = key.match(/\\$\\w+/g);\n if (!matches?.length) return key;\n const newKey = matches.reduce(\n (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n key,\n );\n return newKey ?? key;\n });\n};\n\n/* Utility function to create classes for a component. /\nexport function createClasses<Name extends string, ClassName extends string>(\n /* Component name in PascalCase (ie. `HvTableCell`). /\n name: Name,\n stylesObject: Record<ClassName, CSSInterpolation>,\n) {\n const styles = replace$(stylesObject, name);\n\n const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n /\n Hook that takes in a component's `classesProp` overrides, and returns the\n * concatenated static/internal/override `classes`, and the cached `cx` and `css` utilities.\n /\n function useClasses(\n classesProp: Partial<Record<ClassName, string>> = {},\n /* Whether to add the static classes. Disable when included by `classesProp` */\n addStatic = true,\n ) {\n const { cx, css } = useCss();\n\n const mergeClasses = (key: string) =>\n cx(addStatic && `${name}-${key}`, css(styles[key]), classesProp?.[key]);\n\n const classes = Object.fromEntries(\n Object.keys(styles).map((key) => [key, mergeClasses(key)]),\n ) as { [P in ClassName]: string };\n\n return { classes, css, cx };\n }\n\n return { useClasses, staticClasses };\n}\n"],"names":[],"mappings":";AAQa,MAAA,aAAa,CACxB,MACA,SACG;AACH,QAAM,aAAqC,CAAA;AACtC,OAAA,QAAQ,CAAC,QAAgB;AAC5B,eAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EAAA,CACjC;AACM,SAAA;AACT;AAEA,MAAM,iBAAiB,CACrB,KACA,UACM;AACN,QAAM,SAAc,CAAA;AACpB,aAAW,OAAO,KAAK;AACrB,QAAI,OAAO,OAAO,KAAK,GAAG,GAAG;AACrB,YAAA,SAAS,MAAM,GAAG;AAClB,YAAA,QAAQ,IAAI,GAAG;AACd,aAAA,MAAM,IACX,OAAO,UAAU,WAAW,eAAe,OAAc,KAAK,IAAI;AAAA,IACtE;AAAA,EACF;AACO,SAAA;AACT;AAGa,MAAA,WAAW,CAAmB,WAAc,SAAoB;AACpE,SAAA,eAAe,WAAW,CAAC,QAAQ;AAClC,UAAA,UAAU,IAAI,MAAM,QAAQ;~~AAClC~~,~~QAAI~~,CAAC,SAAS~~;AAAe~~,~~aAAA~~;AAC7B,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,KAAK,UAAU,IAAI,QAAQ,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC/D;AAAA,IAAA;AAEF,WAAO,UAAU;AAAA,EAAA,CAClB;AACH;AAGgB,SAAA,cAEd,MACA,cACA;AACM,QAAA,SAAS,SAAS,cAAc,IAAI;AAE1C,QAAM,gBAAgB,WAAW,OAAO,KAAK,MAAM,GAAkB,IAAI;AAMzE,WAAS,WACP,cAAkD,IAElD,YAAY,MACZ;AACA,UAAM,EAAE,IAAI,IAAI,IAAI,OAAO;~~AAE3B~~,~~UAAM~~,eAAe,CAAC,QACpB,~~GAAG~~,aAAa,GAAG,IAAI,IAAI,GAAG,~~IAAI~~,IAAI,OAAO,~~GAAG~~,CAAC,~~GAAG~~,cAAc,~~GAAG~~,~~CAAC~~;~~AAExE~~,UAAM,UAAU,OAAO;AAAA,MACrB,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA,IAAA;AAGpD,WAAA,EAAE,SAAS,KAAK;EACzB;AAEO,SAAA,EAAE,YAAY;AACvB;"}
1	+ {"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { useCss } from \"../hooks/useCss\";\n\nexport type ExtractNames<\n T extends (...args: any) => { classes: Record<string, any>; cx: any },\n> = Partial<ReturnType<T>[\"classes\"]>;\n\nexport const getClasses = <T extends string, N extends string>(\n keys: T[],\n name: N,\n) => {\n const classesObj: Record<string, string> = {};\n keys.forEach((key: string) => {\n classesObj[key] = `${name}-${key}`;\n });\n return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n obj: T,\n mapFn: (key: string) => string,\n): T => {\n const result: any = {};\n for (const key in obj) {\n if (Object.hasOwn(obj, key)) {\n const newKey = mapFn(key);\n const value = obj[key];\n result[newKey] =\n typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n }\n }\n return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. /\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n return deepRenameKeys(stylesObj, (key) => {\n const matches = key.match(/\\$\\w+/g);\n if (!matches?.length) return key;\n const newKey = matches.reduce(\n (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n key,\n );\n return newKey ?? key;\n });\n};\n\n/* Utility function to create classes for a component. /\nexport function createClasses<Name extends string, ClassName extends string>(\n /* Component name in PascalCase (ie. `HvTableCell`). /\n name: Name,\n stylesObject: Record<ClassName, CSSInterpolation>,\n) {\n const styles = replace$(stylesObject, name);\n\n const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n /\n Hook that takes in a component's `classesProp` overrides, and returns the\n * concatenated static/internal/override `classes`, and the cached `cx` and `css` utilities.\n /\n function useClasses(\n classesProp: Partial<Record<ClassName, string>> = {},\n /* Whether to add the static classes. Disable when included by `classesProp` */\n addStatic = true,\n ) {\n const { cx, css } = useCss();\n\n const mergeClasses = (key: string) =>\n cx(\n addStatic && `${name}-${key}`,\n css(styles[key as keyof typeof styles]),\n classesProp?.[key as keyof typeof classesProp],\n );\n\n const classes = Object.fromEntries(\n Object.keys(styles).map((key) => [key, mergeClasses(key)]),\n ) as { [P in ClassName]: string };\n\n return { classes, css, cx };\n }\n\n return { useClasses, staticClasses };\n}\n"],"names":[],"mappings":";AAQa,MAAA,aAAa,CACxB,MACA,SACG;AACH,QAAM,aAAqC,CAAA;AACtC,OAAA,QAAQ,CAAC,QAAgB;AAC5B,eAAW,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG;AAAA,EAAA,CACjC;AACM,SAAA;AACT;AAEA,MAAM,iBAAiB,CACrB,KACA,UACM;AACN,QAAM,SAAc,CAAA;AACpB,aAAW,OAAO,KAAK;AACrB,QAAI,OAAO,OAAO,KAAK,GAAG,GAAG;AACrB,YAAA,SAAS,MAAM,GAAG;AAClB,YAAA,QAAQ,IAAI,GAAG;AACd,aAAA,MAAM,IACX,OAAO,UAAU,WAAW,eAAe,OAAc,KAAK,IAAI;AAAA,IACtE;AAAA,EACF;AACO,SAAA;AACT;AAGa,MAAA,WAAW,CAAmB,WAAc,SAAoB;AACpE,SAAA,eAAe,WAAW,CAAC,QAAQ;AAClC,UAAA,UAAU,IAAI,MAAM,QAAQ;AAC9B,QAAA,CAAC,SAAS,OAAe,QAAA;AAC7B,UAAM,SAAS,QAAQ;AAAA,MACrB,CAAC,KAAK,UAAU,IAAI,QAAQ,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC/D;AAAA,IAAA;AAEF,WAAO,UAAU;AAAA,EAAA,CAClB;AACH;AAGgB,SAAA,cAEd,MACA,cACA;AACM,QAAA,SAAS,SAAS,cAAc,IAAI;AAE1C,QAAM,gBAAgB,WAAW,OAAO,KAAK,MAAM,GAAkB,IAAI;AAMzE,WAAS,WACP,cAAkD,IAElD,YAAY,MACZ;AACA,UAAM,EAAE,IAAI,IAAI,IAAI,OAAO;AAErB,UAAA,eAAe,CAAC,QACpB;AAAA,MACE,aAAa,GAAG,IAAI,IAAI,GAAG;AAAA,MAC3B,IAAI,OAAO,GAA0B,CAAC;AAAA,MACtC,cAAc,GAA+B;AAAA,IAAA;AAGjD,UAAM,UAAU,OAAO;AAAA,MACrB,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA,IAAA;AAGpD,WAAA,EAAE,SAAS,KAAK;EACzB;AAEO,SAAA,EAAE,YAAY;AACvB;"}

package/dist/esm/utils/deepMerge.js CHANGED Viewed

@@ -1,6 +1,7 @@
 const isObject = (val) => val && typeof val === "object" && !Array.isArray(val);
 function merge(target, source) {
-  Object.keys(source || {}).forEach((key) => {
+  Object.keys(source || {}).forEach((keyProp) => {
+    const key = keyProp;
     if (isObject(target[key]) && isObject(source?.[key])) {
       merge(target[key], source?.[key]);
     } else {

package/dist/esm/utils/deepMerge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"deepMerge.js","sources":["../../../src/utils/deepMerge.ts"],"sourcesContent":["import { DeepPartial } from \"../types/generic\";\n\nconst isObject = (val: any): val is Object =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\nfunction merge<T>(target: T, source?: DeepPartial<T>) {\n Object.keys(source \|\| {}).forEach((~~key~~) => {\n if (isObject(target[key]) && isObject(source?.[key])) {\n merge(target[key], source?.[key]);\n } else {\n target[key] = source?.[key];\n }\n });\n}\n\n/** Merges recursively all keys of source into target returning the resulting object. */\nexport function deepMerge<T>(target: T, source?: DeepPartial<T>): T {\n const result = structuredClone(target);\n merge(result, source);\n return result;\n}\n"],"names":[],"mappings":"AAEA,MAAM,WAAW,CAAC,QAChB,OAAO,OAAO,QAAQ,YAAY,CAAC,MAAM,QAAQ,GAAG;AAEtD,SAAS,MAAS,QAAW,QAAyB;AACpD,SAAO,KAAK,UAAU,CAAE,CAAA,EAAE,QAAQ,CAAC,~~QAAQ~~;~~AACrC~~,QAAA,SAAS,OAAO,GAAG,CAAC,KAAK,SAAS,SAAS,GAAG,CAAC,GAAG;AACpD,YAAM,OAAO,GAAG,GAAG,SAAS,GAAG,CAAC;AAAA,IAAA,OAC3B;~~AACE~~,~~aAAA~~,GAAG,IAAI,SAAS,GAAG;AAAA,~~IAC5B~~;AAAA,EAAA,CACD;AACH;AAGgB,SAAA,UAAa,QAAW,QAA4B;AAC5D,QAAA,SAAS,gBAAgB,MAAM;AACrC,QAAM,QAAQ,MAAM;AACb,SAAA;AACT;"}
1	+ {"version":3,"file":"deepMerge.js","sources":["../../../src/utils/deepMerge.ts"],"sourcesContent":["import { DeepPartial } from \"../types/generic\";\n\nconst isObject = (val: any): val is Object =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\nfunction merge<T>(target: T, source?: DeepPartial<T>) {\n Object.keys(source \|\| {}).forEach((keyProp) => {\n const key = keyProp as keyof typeof source;\n if (isObject(target[key]) && isObject(source?.[key])) {\n merge(target[key], source?.[key]);\n } else {\n (target as any)[key] = source?.[key];\n }\n });\n}\n\n/** Merges recursively all keys of source into target returning the resulting object. */\nexport function deepMerge<T>(target: T, source?: DeepPartial<T>): T {\n const result = structuredClone(target);\n merge(result, source);\n return result;\n}\n"],"names":[],"mappings":"AAEA,MAAM,WAAW,CAAC,QAChB,OAAO,OAAO,QAAQ,YAAY,CAAC,MAAM,QAAQ,GAAG;AAEtD,SAAS,MAAS,QAAW,QAAyB;AACpD,SAAO,KAAK,UAAU,CAAE,CAAA,EAAE,QAAQ,CAAC,YAAY;AAC7C,UAAM,MAAM;AACR,QAAA,SAAS,OAAO,GAAG,CAAC,KAAK,SAAS,SAAS,GAAG,CAAC,GAAG;AACpD,YAAM,OAAO,GAAG,GAAG,SAAS,GAAG,CAAC;AAAA,IAAA,OAC3B;AACJ,aAAe,GAAG,IAAI,SAAS,GAAG;AAAA,IACrC;AAAA,EAAA,CACD;AACH;AAGgB,SAAA,UAAa,QAAW,QAA4B;AAC5D,QAAA,SAAS,gBAAgB,MAAM;AACrC,QAAM,QAAQ,MAAM;AACb,SAAA;AACT;"}

package/dist/esm/utils/helpers.js CHANGED Viewed

@@ -16,8 +16,7 @@ function isEqual(obj1, obj2) {
   }
   const keys1 = Object.keys(obj1);
   const keys2 = Object.keys(obj2);
-  if (keys1.length !== keys2.length)
-    return false;
+  if (keys1.length !== keys2.length) return false;
   for (const key of keys1) {
     if (!isEqual(obj1[key], obj2[key]))
       return false;

package/dist/esm/utils/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.js","sources":["../../../src/utils/helpers.ts"],"sourcesContent":["export const uniqueId = (prefix = \"\") => {\n return `${prefix}${Math.random().toString(36).slice(2, 9)}`;\n};\n\nexport const range = (length: number, start = 0) => {\n return Array.from({ length: length - start }, (_, i) => i + start);\n};\n\nexport const capitalize = (string = \"\") => {\n return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();\n};\n\nexport const clamp = (value: number, max = 100, min = 0) => {\n return Math.min(Math.max(value, min), max);\n};\n\nexport function isEqual(obj1: unknown, obj2: unknown) {\n if (!obj1 \|\| !obj2 \|\| typeof obj1 !== \"object\" \|\| typeof obj2 !== \"object\") {\n return obj1 === obj2;\n }\n\n const keys1 = Object.keys(obj1);\n const keys2 = Object.keys(obj2);\n\n if (keys1.length !== keys2.length) return false;\n\n for (const key of keys1) {\n if (!isEqual(obj1[key], obj2[key])) return false;\n }\n\n return true;\n}\n"],"names":[],"mappings":"AAAa,MAAA,WAAW,CAAC,SAAS,OAAO;AACvC,SAAO,GAAG,MAAM,GAAG,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAC3D;AAEO,MAAM,QAAQ,CAAC,QAAgB,QAAQ,MAAM;AAC3C,SAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,SAAS,CAAC,GAAG,MAAM,IAAI,KAAK;AACnE;AAEa,MAAA,aAAa,CAAC,SAAS,OAAO;AAClC,SAAA,OAAO,OAAO,CAAC,EAAE,YAAA,IAAgB,OAAO,MAAM,CAAC,EAAE;AAC1D;AAEO,MAAM,QAAQ,CAAC,OAAe,MAAM,KAAK,MAAM,MAAM;AAC1D,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEgB,SAAA,QAAQ,MAAe,MAAe;AAChD,MAAA,CAAC,QAAQ,CAAC,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU;AAC1E,WAAO,SAAS;AAAA,EAClB;AAEM,QAAA,QAAQ,OAAO,KAAK,IAAI;AACxB,QAAA,QAAQ,OAAO,KAAK,IAAI;~~AAE1B~~,~~MAAA~~,MAAM,WAAW,MAAM~~;AAAe~~,~~WAAA~~;AAE1C,aAAW,OAAO,OAAO;AACvB,~~QAAI~~,CAAC,QAAQ,KAAK,~~GAAG~~,GAAG,KAAK,~~GAAG~~,CAAC;~~AAAU~~,aAAA;AAAA,~~EAC7C~~;AAEO,SAAA;AACT;"}
1	+ {"version":3,"file":"helpers.js","sources":["../../../src/utils/helpers.ts"],"sourcesContent":["export const uniqueId = (prefix = \"\") => {\n return `${prefix}${Math.random().toString(36).slice(2, 9)}`;\n};\n\nexport const range = (length: number, start = 0) => {\n return Array.from({ length: length - start }, (_, i) => i + start);\n};\n\nexport const capitalize = (string = \"\") => {\n return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();\n};\n\nexport const clamp = (value: number, max = 100, min = 0) => {\n return Math.min(Math.max(value, min), max);\n};\n\nexport function isEqual(obj1: unknown, obj2: unknown) {\n if (!obj1 \|\| !obj2 \|\| typeof obj1 !== \"object\" \|\| typeof obj2 !== \"object\") {\n return obj1 === obj2;\n }\n\n const keys1 = Object.keys(obj1);\n const keys2 = Object.keys(obj2);\n\n if (keys1.length !== keys2.length) return false;\n\n for (const key of keys1) {\n if (\n !isEqual(obj1[key as keyof typeof obj1], obj2[key as keyof typeof obj2])\n )\n return false;\n }\n\n return true;\n}\n"],"names":[],"mappings":"AAAa,MAAA,WAAW,CAAC,SAAS,OAAO;AACvC,SAAO,GAAG,MAAM,GAAG,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAC3D;AAEO,MAAM,QAAQ,CAAC,QAAgB,QAAQ,MAAM;AAC3C,SAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,SAAS,CAAC,GAAG,MAAM,IAAI,KAAK;AACnE;AAEa,MAAA,aAAa,CAAC,SAAS,OAAO;AAClC,SAAA,OAAO,OAAO,CAAC,EAAE,YAAA,IAAgB,OAAO,MAAM,CAAC,EAAE;AAC1D;AAEO,MAAM,QAAQ,CAAC,OAAe,MAAM,KAAK,MAAM,MAAM;AAC1D,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEgB,SAAA,QAAQ,MAAe,MAAe;AAChD,MAAA,CAAC,QAAQ,CAAC,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU;AAC1E,WAAO,SAAS;AAAA,EAClB;AAEM,QAAA,QAAQ,OAAO,KAAK,IAAI;AACxB,QAAA,QAAQ,OAAO,KAAK,IAAI;AAE9B,MAAI,MAAM,WAAW,MAAM,OAAe,QAAA;AAE1C,aAAW,OAAO,OAAO;AACvB,QACE,CAAC,QAAQ,KAAK,GAAwB,GAAG,KAAK,GAAwB,CAAC;AAEhE,aAAA;AAAA,EACX;AAEO,SAAA;AACT;"}

package/dist/esm/utils/theme.js CHANGED Viewed

@@ -77,8 +77,7 @@ const processThemes = (themesList) => {
 };
 const getVarValue = (cssVar, rootElementId) => {
   const root = getElementById(rootElementId || "hv-root");
-  if (!root)
-    return void 0;
+  if (!root) return void 0;
   return getComputedStyle(root).getPropertyValue(cssVar.replace("var(", "").replace(")", "")).trim();
 };
 export {

package/dist/esm/utils/theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["import {\n HvThemeColorModeStructure,\n HvThemeStructure,\n themes,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvCreateThemeProps, HvTheme } from \"../types/theme\";\nimport { getContainerElement, getElementById } from \"./document\";\n\n/*\n Sets the element attributes and style for a theme and color mode.\n /\nexport const setElementAttrs = (\n themeName: string,\n modeName: string,\n colorScheme: string,\n themeRootId?: string,\n) => {\n const element = getContainerElement(themeRootId);\n\n if (element) {\n element.setAttribute(`data-theme`, themeName);\n element.setAttribute(`data-color-mode`, modeName);\n\n // set default styles for child components to inherit\n element.classList.add(`uikit-root-element`);\n element.style.colorScheme = colorScheme;\n }\n};\n\n/\n Applies customizations to a theme.\n /\nconst applyThemeCustomizations = (obj: any, customizations: any) => {\n const isObject = (val: any) =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\n // Customized theme\n const customizedTheme = { ...obj };\n\n // Add new values to the theme or replace values\n Object.keys(customizations).forEach((key) => {\n if (customizedTheme[key]) {\n if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n customizedTheme[key] = applyThemeCustomizations(\n customizedTheme[key],\n customizations[key],\n );\n } else if (typeof customizedTheme[key] === typeof customizations[key]) {\n customizedTheme[key] = customizations[key];\n }\n } else {\n customizedTheme[key] = customizations[key];\n }\n });\n\n return customizedTheme;\n};\n\n/\n Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n /\nexport const createTheme = (\n props: HvCreateThemeProps,\n): HvTheme \| HvThemeStructure => {\n const {\n name,\n base = \"ds5\",\n inheritColorModes = true,\n ...customizations\n } = props;\n\n // Apply customizations to the base theme\n const customizedTheme: HvTheme \| HvThemeStructure = customizations\n ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n : { ...themes[base] };\n\n // Set theme name\n customizedTheme.name = name.trim();\n // Set theme base\n customizedTheme.base = base;\n\n // Fill new color modes with missing colors\n if (customizations) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!themes[base].colors.modes[mode]) {\n customizedTheme.colors.modes[mode] = {\n ...themes[base].colors.modes.dawn,\n ...(customizedTheme.colors.modes[mode] as Partial<\n HvThemeColorModeStructure & { [key: string]: string }\n >),\n };\n }\n });\n }\n\n // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n // we're removing any color modes that might have been inherited\n if (!inheritColorModes && customizations.colors?.modes) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!Object.keys(customizations.colors?.modes \|\| {}).includes(mode)) {\n delete customizedTheme.colors.modes[mode];\n }\n });\n }\n\n // Created theme\n return customizedTheme;\n};\n\n/\n Process the themes provided to the HvProvider:\n * - Cleans themes with the same name\n * - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n themesList?: (HvTheme \| HvThemeStructure)[],\n): (HvTheme \| HvThemeStructure)[] => {\n if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n const list: (HvTheme \| HvThemeStructure)[] = [];\n\n themesList.forEach((thm) => {\n const i: number = list.findIndex(\n (t) => t.name.trim() === thm.name.trim(),\n );\n\n if (i !== -1) {\n list.splice(i, 1);\n list.push(thm);\n } else {\n list.push(thm);\n }\n });\n\n // Cleaned themes\n return list;\n }\n // DS5\n return [themes.ds5];\n};\n\nexport const getVarValue = (cssVar: string, rootElementId?: string) => {\n const root = getElementById(rootElementId \|\| \"hv-root\");\n if (!root) return undefined;\n\n return getComputedStyle(root)\n .getPropertyValue(cssVar.replace(\"var(\", \"\").replace(\")\", \"\"))\n .trim();\n};\n"],"names":[],"mappings":";;AAYO,MAAM,kBAAkB,CAC7B,WACA,UACA,aACA,gBACG;AACG,QAAA,UAAU,oBAAoB,WAAW;AAE/C,MAAI,SAAS;AACH,YAAA,aAAa,cAAc,SAAS;AACpC,YAAA,aAAa,mBAAmB,QAAQ;AAGxC,YAAA,UAAU,IAAI,oBAAoB;AAC1C,YAAQ,MAAM,cAAc;AAAA,EAC9B;AACF;AAKA,MAAM,2BAA2B,CAAC,KAAU,mBAAwB;AAC5D,QAAA,WAAW,CAAC,QAChB,OAAO,OAAO,QAAQ,YAAY,CAAC,MAAM,QAAQ,GAAG;AAGhD,QAAA,kBAAkB,EAAE,GAAG;AAG7B,SAAO,KAAK,cAAc,EAAE,QAAQ,CAAC,QAAQ;AACvC,QAAA,gBAAgB,GAAG,GAAG;AACpB,UAAA,SAAS,gBAAgB,GAAG,CAAC,KAAK,SAAS,eAAe,GAAG,CAAC,GAAG;AACnE,wBAAgB,GAAG,IAAI;AAAA,UACrB,gBAAgB,GAAG;AAAA,UACnB,eAAe,GAAG;AAAA,QAAA;AAAA,MACpB,WACS,OAAO,gBAAgB,GAAG,MAAM,OAAO,eAAe,GAAG,GAAG;AACrD,wBAAA,GAAG,IAAI,eAAe,GAAG;AAAA,MAC3C;AAAA,IAAA,OACK;AACW,sBAAA,GAAG,IAAI,eAAe,GAAG;AAAA,IAC3C;AAAA,EAAA,CACD;AAEM,SAAA;AACT;AAMa,MAAA,cAAc,CACzB,UAC+B;AACzB,QAAA;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACD,IAAA;AAGJ,QAAM,kBAA8C,iBAC/C,yBAAyB,OAAO,IAAI,GAAG,cAAc,IACtD,EAAE,GAAG,OAAO,IAAI,EAAE;AAGN,kBAAA,OAAO,KAAK;AAE5B,kBAAgB,OAAO;AAGvB,MAAI,gBAAgB;AAClB,WAAO,KAAK,gBAAgB,OAAO,KAAK,EAAE,QAAQ,CAAC,SAAS;~~AAC1D~~,UAAI,CAAC,OAAO,IAAI,EAAE,OAAO,MAAM,IAAI,GAAG;AACpB,wBAAA,OAAO,MAAM,IAAI,IAAI;AAAA,UACnC,GAAG,OAAO,IAAI,EAAE,OAAO,MAAM;AAAA,UAC7B,GAAI,gBAAgB,OAAO,MAAM,IAAI;AAAA,QAAA;AAAA,MAIzC;AAAA,IAAA,CACD;AAAA,EACH;AAIA,MAAI,CAAC,qBAAqB,eAAe,QAAQ,OAAO;AACtD,WAAO,KAAK,gBAAgB,OAAO,KAAK,EAAE,QAAQ,CAAC,SAAS;AACtD,UAAA,CAAC,OAAO,KAAK,eAAe,QAAQ,SAAS,EAAE,EAAE,SAAS,IAAI,GAAG;AAC5D,eAAA,gBAAgB,OAAO,MAAM,IAAI;AAAA,MAC1C;AAAA,IAAA,CACD;AAAA,EACH;AAGO,SAAA;AACT;AAOa,MAAA,gBAAgB,CAC3B,eACmC;AACnC,MAAI,cAAc,MAAM,QAAQ,UAAU,KAAK,WAAW,SAAS,GAAG;AACpE,UAAM,OAAuC,CAAA;AAElC,eAAA,QAAQ,CAAC,QAAQ;AAC1B,YAAM,IAAY,KAAK;AAAA,QACrB,CAAC,MAAM,EAAE,KAAK,WAAW,IAAI,KAAK,KAAK;AAAA,MAAA;AAGzC,UAAI,MAAM,IAAI;AACP,aAAA,OAAO,GAAG,CAAC;AAChB,aAAK,KAAK,GAAG;AAAA,MAAA,OACR;AACL,aAAK,KAAK,GAAG;AAAA,MACf;AAAA,IAAA,CACD;AAGM,WAAA;AAAA,EACT;AAEO,SAAA,CAAC,OAAO,GAAG;AACpB;AAEa,MAAA,cAAc,CAAC,QAAgB,kBAA2B;AAC/D,QAAA,OAAO,eAAe,iBAAiB,SAAS;~~AACtD~~,~~MAAI~~,CAAC~~;AAAa~~,~~WAAA~~;AAElB,SAAO,iBAAiB,IAAI,EACzB,iBAAiB,OAAO,QAAQ,QAAQ,EAAE,EAAE,QAAQ,KAAK,EAAE,CAAC,EAC5D,KAAK;AACV;"}
1	+ {"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["import {\n HvThemeColorModeStructure,\n HvThemeStructure,\n themes,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvCreateThemeProps, HvTheme } from \"../types/theme\";\nimport { getContainerElement, getElementById } from \"./document\";\n\n/*\n Sets the element attributes and style for a theme and color mode.\n /\nexport const setElementAttrs = (\n themeName: string,\n modeName: string,\n colorScheme: string,\n themeRootId?: string,\n) => {\n const element = getContainerElement(themeRootId);\n\n if (element) {\n element.setAttribute(`data-theme`, themeName);\n element.setAttribute(`data-color-mode`, modeName);\n\n // set default styles for child components to inherit\n element.classList.add(`uikit-root-element`);\n element.style.colorScheme = colorScheme;\n }\n};\n\n/\n Applies customizations to a theme.\n /\nconst applyThemeCustomizations = (obj: any, customizations: any) => {\n const isObject = (val: any) =>\n val && typeof val === \"object\" && !Array.isArray(val);\n\n // Customized theme\n const customizedTheme = { ...obj };\n\n // Add new values to the theme or replace values\n Object.keys(customizations).forEach((key) => {\n if (customizedTheme[key]) {\n if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n customizedTheme[key] = applyThemeCustomizations(\n customizedTheme[key],\n customizations[key],\n );\n } else if (typeof customizedTheme[key] === typeof customizations[key]) {\n customizedTheme[key] = customizations[key];\n }\n } else {\n customizedTheme[key] = customizations[key];\n }\n });\n\n return customizedTheme;\n};\n\n/\n Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n /\nexport const createTheme = (\n props: HvCreateThemeProps,\n): HvTheme \| HvThemeStructure => {\n const {\n name,\n base = \"ds5\",\n inheritColorModes = true,\n ...customizations\n } = props;\n\n // Apply customizations to the base theme\n const customizedTheme: HvTheme \| HvThemeStructure = customizations\n ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n : { ...themes[base] };\n\n // Set theme name\n customizedTheme.name = name.trim();\n // Set theme base\n customizedTheme.base = base;\n\n // Fill new color modes with missing colors\n if (customizations) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n // @ts-ignore\n if (!themes[base].colors.modes[mode]) {\n customizedTheme.colors.modes[mode] = {\n ...themes[base].colors.modes.dawn,\n ...(customizedTheme.colors.modes[mode] as Partial<\n HvThemeColorModeStructure & { [key: string]: string }\n >),\n };\n }\n });\n }\n\n // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n // we're removing any color modes that might have been inherited\n if (!inheritColorModes && customizations.colors?.modes) {\n Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n if (!Object.keys(customizations.colors?.modes \|\| {}).includes(mode)) {\n delete customizedTheme.colors.modes[mode];\n }\n });\n }\n\n // Created theme\n return customizedTheme;\n};\n\n/\n Process the themes provided to the HvProvider:\n * - Cleans themes with the same name\n * - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n themesList?: (HvTheme \| HvThemeStructure)[],\n): (HvTheme \| HvThemeStructure)[] => {\n if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n const list: (HvTheme \| HvThemeStructure)[] = [];\n\n themesList.forEach((thm) => {\n const i: number = list.findIndex(\n (t) => t.name.trim() === thm.name.trim(),\n );\n\n if (i !== -1) {\n list.splice(i, 1);\n list.push(thm);\n } else {\n list.push(thm);\n }\n });\n\n // Cleaned themes\n return list;\n }\n // DS5\n return [themes.ds5];\n};\n\nexport const getVarValue = (cssVar: string, rootElementId?: string) => {\n const root = getElementById(rootElementId \|\| \"hv-root\");\n if (!root) return undefined;\n\n return getComputedStyle(root)\n .getPropertyValue(cssVar.replace(\"var(\", \"\").replace(\")\", \"\"))\n .trim();\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/utils/useSavedState.js CHANGED Viewed

@@ -7,8 +7,7 @@ function useSavedState(defaultState) {
   );
   const changeState = useCallback((value, save = false) => {
     setState(value);
-    if (save)
-      setSubmittedState(value);
+    if (save) setSubmittedState(value);
   }, []);
   const rollback = () => {
     setState(submittedState);

package/dist/esm/utils/useSavedState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSavedState.js","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: T) {\n const [initialState] = useState<T>(defaultState);\n\n const [state, setState] = useState<T \| undefined>(initialState);\n const [submittedState, setSubmittedState] = useState<T \| undefined>(\n initialState,\n );\n\n const changeState = useCallback((value?: T, save = false) => {\n setState(value);\n if (save) setSubmittedState(value);\n }, []);\n\n const rollback = () => {\n setState(submittedState);\n };\n\n return [state, changeState, rollback, submittedState, initialState] as const;\n}\n"],"names":[],"mappings":";AAEO,SAAS,cAAiB,cAAiB;AAChD,QAAM,CAAC,YAAY,IAAI,SAAY,YAAY;AAE/C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,YAAY;AACxD,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EAAA;AAGF,QAAM,cAAc,YAAY,CAAC,OAAW,OAAO,UAAU;AAC3D,aAAS,KAAK;AACV,QAAA~~;AAAM~~,~~wBAAkB~~,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAM,WAAW,MAAM;AACrB,aAAS,cAAc;AAAA,EAAA;AAGzB,SAAO,CAAC,OAAO,aAAa,UAAU,gBAAgB,YAAY;AACpE;"}
1	+ {"version":3,"file":"useSavedState.js","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: T) {\n const [initialState] = useState<T>(defaultState);\n\n const [state, setState] = useState<T \| undefined>(initialState);\n const [submittedState, setSubmittedState] = useState<T \| undefined>(\n initialState,\n );\n\n const changeState = useCallback((value?: T, save = false) => {\n setState(value);\n if (save) setSubmittedState(value);\n }, []);\n\n const rollback = () => {\n setState(submittedState);\n };\n\n return [state, changeState, rollback, submittedState, initialState] as const;\n}\n"],"names":[],"mappings":";AAEO,SAAS,cAAiB,cAAiB;AAChD,QAAM,CAAC,YAAY,IAAI,SAAY,YAAY;AAE/C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,YAAY;AACxD,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EAAA;AAGF,QAAM,cAAc,YAAY,CAAC,OAAW,OAAO,UAAU;AAC3D,aAAS,KAAK;AACV,QAAA,wBAAwB,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAM,WAAW,MAAM;AACrB,aAAS,cAAc;AAAA,EAAA;AAGzB,SAAO,CAAC,OAAO,aAAa,UAAU,gBAAgB,YAAY;AACpE;"}