npm - @neo4j-ndl/react - Versions diffs - 4.25.8 → 5.0.0-alpha.0.3d763f7 - Mend

@neo4j-ndl/react 4.25.8 → 5.0.0-alpha.0.3d763f7

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 (1176) hide show

package/lib/esm/side-navigation/SideNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../../../src/side-navigation/SideNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport {\n autoUpdate,\n Composite,\n CompositeItem,\n flip,\n FloatingFocusManager,\n FloatingList,\n FloatingPortal,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useListItem,\n useListNavigation,\n useMergeRefs,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport { IconIndicatorWrapper } from '../_common/IconIndicatorWrapper';\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { Divider } from '../divider';\nimport PinIcon from '../icons/generated/custom/Pin';\nimport { ChevronRightIconOutline } from '../icons/generated/heroIcons/ChevronRightIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport {\n SideNavCategoryContext,\n SideNavContext,\n useSideNavCategoryContext,\n useSideNavContext,\n} from './side-navigation-context';\nimport {\n type CategoryHeaderProps,\n type CategoryItemProps,\n type ItemBadgeProps,\n type NavItemProps,\n type SideNavListItemProps,\n type SideNavProps,\n} from './side-navigation-types';\n\n/\n SideNav\n /\nconst SideNavComponent = ({\n children,\n className,\n style,\n htmlAttributes,\n isExpanded = false,\n shouldOverlayOnInteraction = true,\n ariaLabel,\n onPinButtonClick,\n expandedWidth,\n ref,\n ...restProps\n}: CommonProps<'div', SideNavProps>) => {\n const [isHovered, setIsHovered] = useState(false);\n const [hasFocusVisible, setHasFocusVisible] = useState(false);\n const [isCollapseTransitioning, setIsCollapseTransitioning] = useState(false);\n const collapseTransitionTimeoutRef = useRef<ReturnType<\n typeof setTimeout\n > \| null>(null);\n\n const rootRef = useRef<HTMLDivElement>(null);\n\n const isFloatingExpanded =\n shouldOverlayOnInteraction && (!isHovered ? hasFocusVisible : true);\n\n const classes = classNames('ndl-side-nav', 'ndl-side-nav-root', className, {\n 'ndl-side-nav-collapsed':\n isExpanded !== true && shouldOverlayOnInteraction !== true,\n 'ndl-side-nav-expanded': isExpanded,\n });\n\n const innerClasses = classNames('ndl-side-nav-inner', {\n 'ndl-side-nav-collapsing': isCollapseTransitioning,\n 'ndl-side-nav-hover': isFloatingExpanded === true && isExpanded !== true,\n });\n\n const customStyle = {\n ...style,\n ...(Boolean(expandedWidth) && {\n '--side-nav-width-expanded':\n typeof expandedWidth === 'string'\n ? expandedWidth\n : `${expandedWidth}px`,\n }),\n };\n\n const mergedRef = useMergeRefs([ref, rootRef]);\n\n const collapseTransitionDuration = Number.parseInt(\n tokens.motion.duration.quick,\n 10,\n );\n\n useEffect(() => {\n return () => {\n if (collapseTransitionTimeoutRef.current !== null) {\n clearTimeout(collapseTransitionTimeoutRef.current);\n collapseTransitionTimeoutRef.current = null;\n }\n };\n }, []);\n\n return (\n <SideNavContext.Provider\n value={{\n isExpanded,\n isHovered: isFloatingExpanded, // needs refactoring\n onPinButtonClick,\n shouldOverlayOnInteraction,\n }}\n >\n <div\n className={classes}\n ref={mergedRef}\n style={customStyle}\n onMouseEnter={() => {\n if (collapseTransitionTimeoutRef.current !== null) {\n clearTimeout(collapseTransitionTimeoutRef.current);\n collapseTransitionTimeoutRef.current = null;\n }\n setIsCollapseTransitioning(false);\n setIsHovered(true);\n }}\n onMouseLeave={() => {\n const shouldDelayZIndexRemoval =\n shouldOverlayOnInteraction &&\n !isExpanded &&\n (isHovered \|\| hasFocusVisible);\n setIsHovered(false);\n if (shouldDelayZIndexRemoval) {\n if (collapseTransitionTimeoutRef.current !== null) {\n clearTimeout(collapseTransitionTimeoutRef.current);\n }\n setIsCollapseTransitioning(true);\n collapseTransitionTimeoutRef.current = setTimeout(() => {\n collapseTransitionTimeoutRef.current = null;\n setIsCollapseTransitioning(false);\n }, collapseTransitionDuration);\n }\n }}\n onFocusCapture={() => {\n // Delay slightly to let Composite's focus management settle\n requestAnimationFrame(() => {\n const activeElement = document.activeElement;\n // Check if focus is inside and visible (using :focus-visible on the active element)\n if (\n activeElement instanceof HTMLElement &&\n rootRef.current !== null &&\n rootRef.current.contains(activeElement) &&\n activeElement.matches(':focus-visible')\n ) {\n // Update state after another frame to let focus fully settle\n // This updates the context for consumers without disrupting focus\n requestAnimationFrame(() => {\n setHasFocusVisible(true);\n });\n }\n });\n }}\n onBlurCapture={() => {\n // Small delay to check if focus moved to another element inside\n requestAnimationFrame(() => {\n const activeElement = document.activeElement;\n const isInsideNav =\n activeElement instanceof HTMLElement &&\n rootRef.current !== null &&\n rootRef.current.contains(activeElement);\n // Check if focus is in a portaled floating menu\n const isInsideFloatingMenu =\n activeElement instanceof HTMLElement &&\n activeElement.closest('.ndl-side-nav-popover') !== null;\n\n if (\n (isInsideNav \|\| isInsideFloatingMenu) &&\n activeElement instanceof HTMLElement &&\n activeElement.matches(':focus-visible')\n ) {\n // Focus stayed inside with focus-visible\n setHasFocusVisible(true);\n } else {\n // Focus left - collapse\n setHasFocusVisible(false);\n }\n });\n }}\n {...restProps}\n {...htmlAttributes}\n >\n <div className={innerClasses}>\n {/* TODO v5: should the nav be the one that gets all the stuff spread on it? /}\n <nav className=\"ndl-side-nav-nav\" aria-label={ariaLabel}>\n <Composite\n as=\"ul\"\n aria-label={ariaLabel}\n role=\"menubar\"\n orientation=\"vertical\"\n aria-orientation=\"vertical\"\n className=\"ndl-side-nav-list\"\n loop={true}\n >\n {children}\n </Composite>\n </nav>\n {shouldOverlayOnInteraction === true && (\n <div className=\"ndl-side-nav-footer\">\n <PinButton />\n </div>\n )}\n </div>\n </div>\n </SideNavContext.Provider>\n );\n};\n\n/\n SideNavListItem\n /\nconst SideNavListItem = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'li', SideNavListItemProps>) => {\n const classes = classNames('ndl-side-nav-list-item', className, {});\n\n return (\n <li\n role=\"none\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n <SelectedIndicator />\n {children}\n </li>\n );\n};\n\n/\n NavItem\n /\nconst NavItem = <T extends React.ElementType = 'button'>({\n icon,\n label,\n trailingElement,\n isActive,\n className,\n style,\n htmlAttributes,\n as,\n badge,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, NavItemProps>) => {\n const { isExpanded, isHovered, shouldOverlayOnInteraction } =\n useSideNavContext();\n const categoryContext = useSideNavCategoryContext();\n const isInCategory = categoryContext !== null;\n\n const item = useListItem();\n const mergedRef = useMergeRefs([item.ref, ref]);\n\n const isActiveIndex = item.index === categoryContext?.activeIndex;\n\n const Component: React.ElementType = as ?? 'button';\n const classes = classNames('ndl-side-nav-nav-item', className, {\n 'ndl-active': isActive === true,\n });\n\n const Wrapper = isInCategory ? Component : CompositeItem;\n const componentProps = {\n className: classes,\n ref: mergedRef,\n role: 'menuitem',\n style: style,\n ...(isInCategory && {\n ...categoryContext?.getItemProps(),\n tabIndex: isActiveIndex ? 0 : -1,\n }),\n ...restProps,\n ...htmlAttributes,\n };\n const wrapperProps = isInCategory\n ? componentProps\n : {\n render: <Component {...componentProps} />,\n };\n\n return (\n <ConditionalWrap\n shouldWrap={\n isExpanded === false &&\n !shouldOverlayOnInteraction &&\n !isInCategory &&\n Boolean(label)\n }\n wrap={(children) => (\n <Tooltip\n type=\"simple\"\n placement=\"right\"\n hoverDelay={{ close: 0, open: shouldOverlayOnInteraction ? 100 : 0 }}\n >\n <Tooltip.Trigger hasButtonWrapper={true}>{children}</Tooltip.Trigger>\n <Tooltip.Content>{label}</Tooltip.Content>\n </Tooltip>\n )}\n >\n <Wrapper {...wrapperProps}>\n <div className=\"ndl-side-nav-item-inner\">\n {Boolean(icon) && (\n <div className=\"ndl-side-nav-item-leading-element\">\n <ConditionalWrap\n shouldWrap={Boolean(badge) && !isHovered && !isExpanded}\n wrap={(children) => (\n <IconIndicatorWrapper type={badge?.type ?? 'info'}>\n {children}\n </IconIndicatorWrapper>\n )}\n >\n {icon}\n </ConditionalWrap>\n </div>\n )}\n {Boolean(label) && (\n <Typography\n variant=\"body-medium\"\n as=\"div\"\n className=\"ndl-side-nav-item-label\"\n >\n {label}\n </Typography>\n )}\n {(Boolean(trailingElement) \|\| Boolean(badge)) && (\n <div className=\"ndl-side-nav-item-trailing-element\">\n {trailingElement}\n {badge !== undefined && (\n <ItemBadge type={badge.type} number={badge.number} />\n )}\n </div>\n )}\n </div>\n </Wrapper>\n </ConditionalWrap>\n );\n};\n\n/\n CategoryItem\n /\nconst CategoryItem = ({\n children,\n icon,\n label,\n isActive,\n className,\n style,\n htmlAttributes,\n badge,\n isMenuOpen = false,\n ref,\n ...restProps\n}: CommonProps<'button', CategoryItemProps>) => {\n const floatingId = useId();\n const { isExpanded, isHovered, shouldOverlayOnInteraction } =\n useSideNavContext();\n const anchorRef = useRef<HTMLLIElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n const elementsRef = useRef<\n Array<HTMLButtonElement \| HTMLAnchorElement \| null>\n >([]);\n\n const classes = classNames('ndl-side-nav-category-item', className, {\n 'ndl-active': isActive === true,\n });\n\n // Floating UI setup\n const { refs, context } = useFloating({\n elements: {\n reference: anchorRef.current,\n },\n middleware: [\n offset(5),\n flip({ crossAxis: true, fallbackAxisSideDirection: 'end', padding: 5 }),\n shift({ padding: 5 }),\n ],\n onOpenChange: setIsOpen,\n open: isOpen \|\| isMenuOpen,\n placement: 'right-start',\n strategy: 'fixed',\n whileElementsMounted: autoUpdate,\n });\n\n const dismiss = useDismiss(context, {\n referencePress: false,\n });\n const hover = useHover(context, {\n delay: { close: 130, open: 130 },\n handleClose: safePolygon({\n blockPointerEvents: false,\n requireIntent: false,\n }),\n });\n const focus = useFocus(context);\n const listNavigation = useListNavigation(context, {\n activeIndex: activeIndex,\n focusItemOnHover: false,\n focusItemOnOpen: false,\n listRef: elementsRef,\n loop: true,\n nested: true,\n onNavigate: setActiveIndex,\n openOnArrowKeyDown: false,\n });\n\n // Separate interactions: reference (no listNavigation), floating (with listNavigation)\n const refInteractions = useInteractions([dismiss, hover, focus]);\n const floatInteractions = useInteractions([dismiss, hover, listNavigation]);\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n // Reset activeIndex when menu closes\n useEffect(() => {\n if (!context.open) {\n setActiveIndex(null);\n }\n }, [context.open]);\n\n const mergedRef = useMergeRefs([refs.setReference, ref]);\n\n return (\n <SideNavCategoryContext.Provider\n value={{\n activeIndex,\n getItemProps: floatInteractions.getItemProps,\n }}\n >\n <ConditionalWrap\n shouldWrap={\n isExpanded === false && !shouldOverlayOnInteraction && Boolean(label)\n }\n wrap={(children) => (\n <Tooltip\n type=\"simple\"\n placement=\"top\"\n hoverDelay={{\n close: 0,\n open: shouldOverlayOnInteraction ? 100 : 0,\n }}\n isOpen={isTooltipOpen}\n onOpenChange={setIsTooltipOpen}\n >\n <Tooltip.Trigger hasButtonWrapper={true}>\n {children}\n </Tooltip.Trigger>\n <Tooltip.Content className=\"ndl-side-nav ndl-side-nav-category-menu-tooltip-content\">\n {label}\n </Tooltip.Content>\n </Tooltip>\n )}\n >\n <CompositeItem\n render={\n <button\n type=\"button\"\n {...refInteractions.getReferenceProps({\n className: classes,\n ref: mergedRef,\n style,\n ...restProps,\n ...htmlAttributes,\n })}\n // {...restProps}\n // {...htmlAttributes}\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n aria-expanded={context.open}\n aria-controls={floatingId}\n onFocus={(event) => {\n // Only show tooltip on focus-visible (keyboard navigation)\n if (\n event.target instanceof HTMLElement &&\n event.target.matches(':focus-visible')\n ) {\n setIsTooltipOpen(true);\n }\n // Call original handler if exists\n const originalOnFocus = refInteractions.getReferenceProps({})\n .onFocus as\n \| ((event: React.FocusEvent<HTMLButtonElement>) => void)\n \| undefined;\n originalOnFocus?.(event);\n }}\n onBlur={(event) => {\n setIsTooltipOpen(false);\n // Call original handler if exists\n const originalOnBlur = refInteractions.getReferenceProps({})\n .onBlur as\n \| ((event: React.FocusEvent<HTMLButtonElement>) => void)\n \| undefined;\n originalOnBlur?.(event);\n }}\n onKeyDown={(event) => {\n if (event.key === 'ArrowRight') {\n // open and move focus into submenu\n setIsOpen(true);\n setActiveIndex(0);\n // Defer focusing first item (if needed) to next tick\n requestAnimationFrame(() => {\n const el = elementsRef.current[0];\n el?.focus();\n });\n event.preventDefault();\n }\n // ArrowDown/ArrowUp: let Composite handle top-level roving focus.\n }}\n />\n }\n >\n <div className=\"ndl-side-nav-item-inner\">\n {Boolean(icon) && (\n <div className=\"ndl-side-nav-item-leading-element\">\n <ConditionalWrap\n shouldWrap={Boolean(badge) && !isHovered && !isExpanded}\n wrap={(children) => (\n <IconIndicatorWrapper type={badge?.type ?? 'info'}>\n {children}\n </IconIndicatorWrapper>\n )}\n >\n {icon}\n </ConditionalWrap>\n </div>\n )}\n {Boolean(label) && (\n <Typography\n variant=\"body-medium\"\n as=\"div\"\n className=\"ndl-side-nav-item-label\"\n >\n {label}\n </Typography>\n )}\n <div className=\"ndl-side-nav-item-trailing-element\">\n {badge && <ItemBadge type={badge.type} number={badge.number} />}\n <ChevronRightIconOutline className=\"ndl-side-nav-item-chevron\" />\n </div>\n </div>\n {context.open && (\n <FloatingList elementsRef={elementsRef}>\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n returnFocus={true}\n closeOnFocusOut={true}\n guards={true}\n >\n <ul\n id={floatingId}\n ref={refs.setFloating}\n className=\"ndl-side-nav ndl-side-nav-popover ndl-side-nav-popover-list\"\n style={{\n ...context.floatingStyles,\n ...transitionStyles,\n }}\n {...floatInteractions.getFloatingProps()}\n role=\"menu\"\n >\n {children}\n </ul>\n </FloatingFocusManager>\n </FloatingPortal>\n </FloatingList>\n )}\n </CompositeItem>\n </ConditionalWrap>\n </SideNavCategoryContext.Provider>\n );\n};\n\n/\n CategoryHeader\n /\nconst CategoryHeader = ({\n children,\n className,\n ref,\n style,\n htmlAttributes,\n ...restProps\n}: CommonProps<'li', CategoryHeaderProps>) => {\n const { isExpanded, isHovered } = useSideNavContext();\n\n const classes = classNames('ndl-side-nav-category-header', className, {\n 'ndl-side-nav-category-header-expanded': isExpanded \|\| isHovered,\n });\n\n return (\n <Typography\n ref={ref}\n variant=\"label\"\n as=\"li\"\n className={classes}\n htmlAttributes={{\n ...htmlAttributes,\n role: 'separator',\n }}\n style={style}\n {...restProps}\n >\n {isExpanded \|\| isHovered ? children : <Divider />}\n </Typography>\n );\n};\n\n/\n SelectedIndicator\n /\nconst SelectedIndicator = () => {\n return <div className=\"ndl-side-nav-selected-indicator\" />;\n};\n\n/\n SideNavDivider\n /\nconst SideNavDivider = () => {\n return (\n <Divider\n orientation=\"horizontal\"\n className=\"ndl-side-nav-divider\"\n as=\"li\"\n />\n );\n};\n\n/\n ItemBadge\n /\nconst ItemBadge = ({\n number,\n type,\n ref,\n htmlAttributes,\n style,\n className,\n ...restProps\n}: CommonProps<'span', ItemBadgeProps>) => {\n useSideNavContext();\n\n const badgeClasses = classNames('ndl-side-nav-item-badge', className, {\n 'ndl-danger': type === 'danger',\n 'ndl-info': type === 'info',\n 'ndl-warning': type === 'warning',\n });\n\n return (\n <Typography\n as=\"span\"\n className={badgeClasses}\n variant=\"subheading-small\"\n htmlAttributes={{\n 'aria-label': `${number} notifications of type ${type}`,\n ...htmlAttributes,\n }}\n style={style}\n ref={ref}\n {...restProps}\n >\n {number}\n </Typography>\n );\n};\n\n/\n PinButton\n */\nconst PinButton = () => {\n const { isExpanded, shouldOverlayOnInteraction, onPinButtonClick } =\n useSideNavContext();\n\n const classes = classNames('ndl-side-nav-pin-button');\n\n if (!shouldOverlayOnInteraction) {\n return null;\n }\n\n return (\n <CleanIconButton\n onClick={onPinButtonClick}\n className={classes}\n description=\"Pin\"\n size=\"medium\"\n isActive={isExpanded}\n tooltipProps={{\n root: {\n autoUpdateOptions: {\n animationFrame: true,\n },\n placement: 'right',\n },\n }}\n >\n <PinIcon />\n </CleanIconButton>\n );\n};\n\nconst SideNavigation = Object.assign(SideNavComponent, {\n CategoryHeader: CategoryHeader,\n CategoryItem: CategoryItem,\n Divider: SideNavDivider,\n ItemBadge: ItemBadge,\n ListItem: SideNavListItem,\n NavItem,\n});\n\nexport { SideNavigation };\n"]}
1	+ {"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../../../src/side-navigation/SideNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport {\n autoUpdate,\n Composite,\n CompositeItem,\n flip,\n FloatingFocusManager,\n FloatingList,\n FloatingPortal,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useListItem,\n useListNavigation,\n useMergeRefs,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useId, useRef, useState } from 'react';\n\nimport { IconIndicatorWrapper } from '../_common/IconIndicatorWrapper';\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { Divider } from '../divider';\nimport PinIcon from '../icons/generated/custom/Pin';\nimport { ChevronRightIconOutline } from '../icons/generated/heroIcons/ChevronRightIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport {\n SideNavCategoryContext,\n SideNavContext,\n useSideNavCategoryContext,\n useSideNavContext,\n} from './side-navigation-context';\nimport {\n type CategoryHeaderProps,\n type CategoryItemProps,\n type ItemBadgeProps,\n type NavItemProps,\n type SideNavListItemProps,\n type SideNavProps,\n} from './side-navigation-types';\n\n/\n SideNav\n /\nconst SideNavComponent = ({\n children,\n className,\n style,\n htmlAttributes,\n isExpanded = false,\n shouldOverlayOnInteraction = true,\n ariaLabel,\n onPinButtonClick,\n expandedWidth,\n ref,\n ...restProps\n}: CommonProps<'div', SideNavProps>) => {\n const [isHovered, setIsHovered] = useState(false);\n const [hasFocusVisible, setHasFocusVisible] = useState(false);\n const [isCollapseTransitioning, setIsCollapseTransitioning] = useState(false);\n const collapseTransitionTimeoutRef = useRef<ReturnType<\n typeof setTimeout\n > \| null>(null);\n\n const rootRef = useRef<HTMLDivElement>(null);\n\n const isFloatingExpanded =\n shouldOverlayOnInteraction && (!isHovered ? hasFocusVisible : true);\n\n const classes = classNames('ndl-side-nav', 'ndl-side-nav-root', className, {\n 'ndl-side-nav-collapsed':\n isExpanded !== true && shouldOverlayOnInteraction !== true,\n 'ndl-side-nav-expanded': isExpanded,\n });\n\n const innerClasses = classNames('ndl-side-nav-inner', {\n 'ndl-side-nav-collapsing': isCollapseTransitioning,\n 'ndl-side-nav-hover': isFloatingExpanded === true && isExpanded !== true,\n });\n\n const customStyle = {\n ...style,\n ...(Boolean(expandedWidth) && {\n '--side-nav-width-expanded':\n typeof expandedWidth === 'string'\n ? expandedWidth\n : `${expandedWidth}px`,\n }),\n };\n\n const mergedRef = useMergeRefs([ref, rootRef]);\n\n const collapseTransitionDuration = Number.parseInt(\n tokens.motion.duration.quick,\n 10,\n );\n\n useEffect(() => {\n return () => {\n if (collapseTransitionTimeoutRef.current !== null) {\n clearTimeout(collapseTransitionTimeoutRef.current);\n collapseTransitionTimeoutRef.current = null;\n }\n };\n }, []);\n\n return (\n <SideNavContext.Provider\n value={{\n isExpanded,\n isHovered: isFloatingExpanded, // needs refactoring\n onPinButtonClick,\n shouldOverlayOnInteraction,\n }}\n >\n <div\n className={classes}\n ref={mergedRef}\n style={customStyle}\n onMouseEnter={() => {\n if (collapseTransitionTimeoutRef.current !== null) {\n clearTimeout(collapseTransitionTimeoutRef.current);\n collapseTransitionTimeoutRef.current = null;\n }\n setIsCollapseTransitioning(false);\n setIsHovered(true);\n }}\n onMouseLeave={() => {\n const shouldDelayZIndexRemoval =\n shouldOverlayOnInteraction &&\n !isExpanded &&\n (isHovered \|\| hasFocusVisible);\n setIsHovered(false);\n if (shouldDelayZIndexRemoval) {\n if (collapseTransitionTimeoutRef.current !== null) {\n clearTimeout(collapseTransitionTimeoutRef.current);\n }\n setIsCollapseTransitioning(true);\n collapseTransitionTimeoutRef.current = setTimeout(() => {\n collapseTransitionTimeoutRef.current = null;\n setIsCollapseTransitioning(false);\n }, collapseTransitionDuration);\n }\n }}\n onFocusCapture={() => {\n // Delay slightly to let Composite's focus management settle\n requestAnimationFrame(() => {\n const activeElement = document.activeElement;\n // Check if focus is inside and visible (using :focus-visible on the active element)\n if (\n activeElement instanceof HTMLElement &&\n rootRef.current !== null &&\n rootRef.current.contains(activeElement) &&\n activeElement.matches(':focus-visible')\n ) {\n // Update state after another frame to let focus fully settle\n // This updates the context for consumers without disrupting focus\n requestAnimationFrame(() => {\n setHasFocusVisible(true);\n });\n }\n });\n }}\n onBlurCapture={() => {\n // Small delay to check if focus moved to another element inside\n requestAnimationFrame(() => {\n const activeElement = document.activeElement;\n const isInsideNav =\n activeElement instanceof HTMLElement &&\n rootRef.current !== null &&\n rootRef.current.contains(activeElement);\n // Check if focus is in a portaled floating menu\n const isInsideFloatingMenu =\n activeElement instanceof HTMLElement &&\n activeElement.closest('.ndl-side-nav-popover') !== null;\n\n if (\n (isInsideNav \|\| isInsideFloatingMenu) &&\n activeElement instanceof HTMLElement &&\n activeElement.matches(':focus-visible')\n ) {\n // Focus stayed inside with focus-visible\n setHasFocusVisible(true);\n } else {\n // Focus left - collapse\n setHasFocusVisible(false);\n }\n });\n }}\n {...restProps}\n {...htmlAttributes}\n >\n <div className={innerClasses}>\n {/ Both the nav landmark and the Menubar get the same label following the\n WAI-ARIA pattern for Menubar:\n https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation /}\n <nav className=\"ndl-side-nav-nav\" aria-label={ariaLabel}>\n <Composite\n as=\"ul\"\n aria-label={ariaLabel}\n role=\"menubar\"\n orientation=\"vertical\"\n aria-orientation=\"vertical\"\n className=\"ndl-side-nav-list\"\n loop={true}\n >\n {children}\n </Composite>\n </nav>\n {shouldOverlayOnInteraction === true && (\n <div className=\"ndl-side-nav-footer\">\n <PinButton />\n </div>\n )}\n </div>\n </div>\n </SideNavContext.Provider>\n );\n};\n\n/\n SideNavListItem\n /\nconst SideNavListItem = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'li', SideNavListItemProps>) => {\n const classes = classNames('ndl-side-nav-list-item', className, {});\n\n return (\n <li\n role=\"none\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n <SelectedIndicator />\n {children}\n </li>\n );\n};\n\n/\n NavItem\n /\nconst NavItem = <T extends React.ElementType = 'button'>({\n icon,\n label,\n trailingElement,\n isActive,\n className,\n style,\n htmlAttributes,\n as,\n badge,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, NavItemProps>) => {\n const { isExpanded, isHovered, shouldOverlayOnInteraction } =\n useSideNavContext();\n const categoryContext = useSideNavCategoryContext();\n const isInCategory = categoryContext !== null;\n\n const item = useListItem();\n const mergedRef = useMergeRefs([item.ref, ref]);\n\n const isActiveIndex = item.index === categoryContext?.activeIndex;\n\n const Component: React.ElementType = as ?? 'button';\n const classes = classNames('ndl-side-nav-nav-item', className, {\n 'ndl-active': isActive === true,\n });\n\n const Wrapper = isInCategory ? Component : CompositeItem;\n const componentProps = {\n className: classes,\n ref: mergedRef,\n role: 'menuitem',\n style: style,\n ...(isInCategory && {\n ...categoryContext?.getItemProps(),\n tabIndex: isActiveIndex ? 0 : -1,\n }),\n ...restProps,\n ...htmlAttributes,\n };\n const wrapperProps = isInCategory\n ? componentProps\n : {\n render: <Component {...componentProps} />,\n };\n\n return (\n <ConditionalWrap\n shouldWrap={\n isExpanded === false &&\n !shouldOverlayOnInteraction &&\n !isInCategory &&\n Boolean(label)\n }\n wrap={(children) => (\n <Tooltip\n type=\"simple\"\n placement=\"right\"\n hoverDelay={{ close: 0, open: shouldOverlayOnInteraction ? 100 : 0 }}\n >\n <Tooltip.Trigger hasButtonWrapper={true}>{children}</Tooltip.Trigger>\n <Tooltip.Content>{label}</Tooltip.Content>\n </Tooltip>\n )}\n >\n <Wrapper {...wrapperProps}>\n <div className=\"ndl-side-nav-item-inner\">\n {Boolean(icon) && (\n <div className=\"ndl-side-nav-item-leading-element\">\n <ConditionalWrap\n shouldWrap={Boolean(badge) && !isHovered && !isExpanded}\n wrap={(children) => (\n <IconIndicatorWrapper type={badge?.type ?? 'info'}>\n {children}\n </IconIndicatorWrapper>\n )}\n >\n {icon}\n </ConditionalWrap>\n </div>\n )}\n {Boolean(label) && (\n <Typography\n variant=\"body-medium\"\n as=\"div\"\n className=\"ndl-side-nav-item-label\"\n >\n {label}\n </Typography>\n )}\n {(Boolean(trailingElement) \|\| Boolean(badge)) && (\n <div className=\"ndl-side-nav-item-trailing-element\">\n {trailingElement}\n {badge !== undefined && (\n <ItemBadge type={badge.type} number={badge.number} />\n )}\n </div>\n )}\n </div>\n </Wrapper>\n </ConditionalWrap>\n );\n};\n\n/\n CategoryItem\n /\nconst CategoryItem = ({\n children,\n icon,\n label,\n isActive,\n className,\n style,\n htmlAttributes,\n badge,\n isMenuOpen = false,\n ref,\n ...restProps\n}: CommonProps<'button', CategoryItemProps>) => {\n const floatingId = useId();\n const { isExpanded, isHovered, shouldOverlayOnInteraction } =\n useSideNavContext();\n const anchorRef = useRef<HTMLLIElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n const elementsRef = useRef<\n Array<HTMLButtonElement \| HTMLAnchorElement \| null>\n >([]);\n\n const classes = classNames('ndl-side-nav-category-item', className, {\n 'ndl-active': isActive === true,\n });\n\n // Floating UI setup\n const { refs, context } = useFloating({\n elements: {\n reference: anchorRef.current,\n },\n middleware: [\n offset(5),\n flip({ crossAxis: true, fallbackAxisSideDirection: 'end', padding: 5 }),\n shift({ padding: 5 }),\n ],\n onOpenChange: setIsOpen,\n open: isOpen \|\| isMenuOpen,\n placement: 'right-start',\n strategy: 'fixed',\n whileElementsMounted: autoUpdate,\n });\n\n const dismiss = useDismiss(context, {\n referencePress: false,\n });\n const hover = useHover(context, {\n delay: { close: 130, open: 130 },\n handleClose: safePolygon({\n blockPointerEvents: false,\n requireIntent: false,\n }),\n });\n const focus = useFocus(context);\n const listNavigation = useListNavigation(context, {\n activeIndex: activeIndex,\n focusItemOnHover: false,\n focusItemOnOpen: false,\n listRef: elementsRef,\n loop: true,\n nested: true,\n onNavigate: setActiveIndex,\n openOnArrowKeyDown: false,\n });\n\n // Separate interactions: reference (no listNavigation), floating (with listNavigation)\n const refInteractions = useInteractions([dismiss, hover, focus]);\n const floatInteractions = useInteractions([dismiss, hover, listNavigation]);\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n // Reset activeIndex when menu closes\n useEffect(() => {\n if (!context.open) {\n setActiveIndex(null);\n }\n }, [context.open]);\n\n const mergedRef = useMergeRefs([refs.setReference, ref]);\n\n return (\n <SideNavCategoryContext.Provider\n value={{\n activeIndex,\n getItemProps: floatInteractions.getItemProps,\n }}\n >\n <ConditionalWrap\n shouldWrap={\n isExpanded === false && !shouldOverlayOnInteraction && Boolean(label)\n }\n wrap={(children) => (\n <Tooltip\n type=\"simple\"\n placement=\"top\"\n hoverDelay={{\n close: 0,\n open: shouldOverlayOnInteraction ? 100 : 0,\n }}\n isOpen={isTooltipOpen}\n onOpenChange={setIsTooltipOpen}\n >\n <Tooltip.Trigger hasButtonWrapper={true}>\n {children}\n </Tooltip.Trigger>\n <Tooltip.Content className=\"ndl-side-nav ndl-side-nav-category-menu-tooltip-content\">\n {label}\n </Tooltip.Content>\n </Tooltip>\n )}\n >\n <CompositeItem\n render={\n <button\n type=\"button\"\n {...refInteractions.getReferenceProps({\n className: classes,\n ref: mergedRef,\n style,\n ...restProps,\n ...htmlAttributes,\n })}\n // {...restProps}\n // {...htmlAttributes}\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n aria-expanded={context.open}\n aria-controls={floatingId}\n onFocus={(event) => {\n // Only show tooltip on focus-visible (keyboard navigation)\n if (\n event.target instanceof HTMLElement &&\n event.target.matches(':focus-visible')\n ) {\n setIsTooltipOpen(true);\n }\n // Call original handler if exists\n const originalOnFocus = refInteractions.getReferenceProps({})\n .onFocus as\n \| ((event: React.FocusEvent<HTMLButtonElement>) => void)\n \| undefined;\n originalOnFocus?.(event);\n }}\n onBlur={(event) => {\n setIsTooltipOpen(false);\n // Call original handler if exists\n const originalOnBlur = refInteractions.getReferenceProps({})\n .onBlur as\n \| ((event: React.FocusEvent<HTMLButtonElement>) => void)\n \| undefined;\n originalOnBlur?.(event);\n }}\n onKeyDown={(event) => {\n if (event.key === 'ArrowRight') {\n // open and move focus into submenu\n setIsOpen(true);\n setActiveIndex(0);\n // Defer focusing first item (if needed) to next tick\n requestAnimationFrame(() => {\n const el = elementsRef.current[0];\n el?.focus();\n });\n event.preventDefault();\n }\n // ArrowDown/ArrowUp: let Composite handle top-level roving focus.\n }}\n />\n }\n >\n <div className=\"ndl-side-nav-item-inner\">\n {Boolean(icon) && (\n <div className=\"ndl-side-nav-item-leading-element\">\n <ConditionalWrap\n shouldWrap={Boolean(badge) && !isHovered && !isExpanded}\n wrap={(children) => (\n <IconIndicatorWrapper type={badge?.type ?? 'info'}>\n {children}\n </IconIndicatorWrapper>\n )}\n >\n {icon}\n </ConditionalWrap>\n </div>\n )}\n {Boolean(label) && (\n <Typography\n variant=\"body-medium\"\n as=\"div\"\n className=\"ndl-side-nav-item-label\"\n >\n {label}\n </Typography>\n )}\n <div className=\"ndl-side-nav-item-trailing-element\">\n {badge && <ItemBadge type={badge.type} number={badge.number} />}\n <ChevronRightIconOutline className=\"ndl-side-nav-item-chevron\" />\n </div>\n </div>\n {context.open && (\n <FloatingList elementsRef={elementsRef}>\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n returnFocus={true}\n closeOnFocusOut={true}\n guards={true}\n >\n <ul\n id={floatingId}\n ref={refs.setFloating}\n className=\"ndl-side-nav ndl-side-nav-popover ndl-side-nav-popover-list\"\n style={{\n ...context.floatingStyles,\n ...transitionStyles,\n }}\n {...floatInteractions.getFloatingProps()}\n role=\"menu\"\n >\n {children}\n </ul>\n </FloatingFocusManager>\n </FloatingPortal>\n </FloatingList>\n )}\n </CompositeItem>\n </ConditionalWrap>\n </SideNavCategoryContext.Provider>\n );\n};\n\n/\n CategoryHeader\n /\nconst CategoryHeader = ({\n children,\n className,\n ref,\n style,\n htmlAttributes,\n ...restProps\n}: CommonProps<'li', CategoryHeaderProps>) => {\n const { isExpanded, isHovered } = useSideNavContext();\n\n const classes = classNames('ndl-side-nav-category-header', className, {\n 'ndl-side-nav-category-header-expanded': isExpanded \|\| isHovered,\n });\n\n return (\n <Typography\n ref={ref}\n variant=\"label\"\n as=\"li\"\n className={classes}\n htmlAttributes={{\n ...htmlAttributes,\n role: 'separator',\n }}\n style={style}\n {...restProps}\n >\n {isExpanded \|\| isHovered ? children : <Divider />}\n </Typography>\n );\n};\n\n/\n SelectedIndicator\n /\nconst SelectedIndicator = () => {\n return <div className=\"ndl-side-nav-selected-indicator\" />;\n};\n\n/\n SideNavDivider\n /\nconst SideNavDivider = () => {\n return (\n <Divider\n orientation=\"horizontal\"\n className=\"ndl-side-nav-divider\"\n as=\"li\"\n />\n );\n};\n\n/\n ItemBadge\n /\nconst ItemBadge = ({\n number,\n type,\n ref,\n htmlAttributes,\n style,\n className,\n ...restProps\n}: CommonProps<'span', ItemBadgeProps>) => {\n useSideNavContext();\n\n const badgeClasses = classNames('ndl-side-nav-item-badge', className, {\n 'ndl-danger': type === 'danger',\n 'ndl-info': type === 'info',\n 'ndl-warning': type === 'warning',\n });\n\n return (\n <Typography\n as=\"span\"\n className={badgeClasses}\n variant=\"subheading-small\"\n htmlAttributes={{\n 'aria-label': `${number} notifications of type ${type}`,\n ...htmlAttributes,\n }}\n style={style}\n ref={ref}\n {...restProps}\n >\n {number}\n </Typography>\n );\n};\n\n/\n PinButton\n */\nconst PinButton = () => {\n const { isExpanded, shouldOverlayOnInteraction, onPinButtonClick } =\n useSideNavContext();\n\n const classes = classNames('ndl-side-nav-pin-button');\n\n if (!shouldOverlayOnInteraction) {\n return null;\n }\n\n return (\n <CleanIconButton\n onClick={onPinButtonClick}\n className={classes}\n description=\"Pin\"\n size=\"medium\"\n isActive={isExpanded}\n tooltipProps={{\n root: {\n autoUpdateOptions: {\n animationFrame: true,\n },\n placement: 'right',\n },\n }}\n >\n <PinIcon />\n </CleanIconButton>\n );\n};\n\nconst SideNavigation = Object.assign(SideNavComponent, {\n CategoryHeader: CategoryHeader,\n CategoryItem: CategoryItem,\n Divider: SideNavDivider,\n ItemBadge: ItemBadge,\n ListItem: SideNavListItem,\n NavItem,\n});\n\nexport { SideNavigation };\n"]}

package/lib/esm/side-navigation/stories/side-nav-badges.story.js CHANGED Viewed

@@ -26,7 +26,7 @@ import { useState } from 'react';
 const Component = () => {
     const [active, setActive] = useState(null);
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default", children: [_jsxs(SideNavigation, { ariaLabel: "Main side navigation", isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Info Badge", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1'), badge: {
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default", children: [_jsxs(SideNavigation, { ariaLabel: "Main side navigation", isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Info Badge", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1'), badge: {
                                 number: 1,
                                 type: 'info',
                             } }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(CodeBracketIconOutline, {}), label: "Warning Badge", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2'), badge: {
@@ -47,7 +47,7 @@ const Component = () => {
                                         } }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Critical Badge", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6'), badge: {
                                             number: 1,
                                             type: 'danger',
-                                        } }) })] }) })] }), _jsx("div", { className: "n-h-full n-w-full", children: _jsx("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: _jsxs("div", { className: "n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Side Nav with Badges" }), _jsxs(Typography, { variant: "body-medium", children: ["Badges can be used to indicate that there are actions that need attention from the user on the specific page. The badge can have three different types of severity:", _jsx("b", { className: "n-text-primary-text", children: " info" }), ",", _jsx("b", { className: "n-text-warning-text", children: " warning" }), " and", _jsx("b", { className: "n-text-danger-text", children: " danger" }), ".", _jsx("br", {}), _jsx("br", {}), "The badge on a ", _jsx("b", { children: "CategoryItem" }), " should be the type of the highest priority badge of the items in the category. The number should be the total number of badges in the category."] })] }) }) })] }));
+                                        } }) })] }) })] }), _jsx("div", { className: "h-full w-full", children: _jsx("div", { className: "flex flex-col p-8 w-full max-w-[1024px] mx-auto", children: _jsxs("div", { className: "flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Side Nav with Badges" }), _jsxs(Typography, { variant: "body-medium", children: ["Badges can be used to indicate that there are actions that need attention from the user on the specific page. The badge can have three different types of severity:", _jsx("b", { className: "text-primary-text", children: " info" }), ",", _jsx("b", { className: "text-warning-text", children: " warning" }), " and", _jsx("b", { className: "text-danger-text", children: " danger" }), ".", _jsx("br", {}), _jsx("br", {}), "The badge on a ", _jsx("b", { children: "CategoryItem" }), " should be the type of the highest priority badge of the items in the category. The number should be the total number of badges in the category."] })] }) }) })] }));
 };
 export default Component;
 //# sourceMappingURL=side-nav-badges.story.js.map

package/lib/esm/side-navigation/stories/side-nav-badges.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav-badges.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-badges.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,iBAAiB,EACjB,4BAA4B,GAC7B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,eAAK,SAAS,EAAC,~~sEAAsE~~,~~aACnF~~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~~mBAAmB~~,~~YAChC~~,cAAK,SAAS,EAAC,~~6DAA6D~~,~~YAC1E~~,eAAK,SAAS,EAAC,~~gHAAgH~~,~~aAC7H~~,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,qCAAkC,EAC/D,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,oLAI/B,YAAG,SAAS,EAAC,~~qBAAqB~~,sBAAU,~~OAC5C~~,YAAG,SAAS,EAAC,~~qBAAqB~~,yBAAa,~~UAC/C~~,YAAG,SAAS,EAAC,~~oBAAoB~~,wBAAY,~~OAC7C~~,cAAM,EACN,cAAM,qBACS,uCAAmB,wJAGvB,IACT,GACF,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n CodeBracketIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string \| null>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default\">\n <SideNavigation\n ariaLabel=\"Main side navigation\"\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Info Badge\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n badge={{\n number: 1,\n type: 'info',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Warning Badge\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n badge={{\n number: 1,\n type: 'warning',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Critical Badge\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n badge={{\n number: 1,\n type: 'danger',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5', 'nav-item-6'].includes(\n active ?? '',\n )}\n badge={{\n number: 3,\n type: 'danger',\n }}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Info Badge\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n badge={{\n number: 1,\n type: 'info',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Warning Badge\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n badge={{\n number: 1,\n type: 'warning',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Critical Badge\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n badge={{\n number: 1,\n type: 'danger',\n }}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"n-h-full n-w-full\">\n <div className=\"n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto\">\n <div className=\"n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center\">\n <Typography variant=\"title-4\">Side Nav with Badges</Typography>\n <Typography variant=\"body-medium\">\n Badges can be used to indicate that there are actions that need\n attention from the user on the specific page. The badge can have\n three different types of severity:\n <b className=\"n-text-primary-text\"> info</b>,\n <b className=\"n-text-warning-text\"> warning</b> and\n <b className=\"n-text-danger-text\"> danger</b>.\n <br />\n <br />\n The badge on a <b>CategoryItem</b> should be the type of the\n highest priority badge of the items in the category. The number\n should be the total number of badges in the category.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"side-nav-badges.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-badges.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n CodeBracketIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string \| null>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default\">\n <SideNavigation\n ariaLabel=\"Main side navigation\"\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Info Badge\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n badge={{\n number: 1,\n type: 'info',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Warning Badge\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n badge={{\n number: 1,\n type: 'warning',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Critical Badge\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n badge={{\n number: 1,\n type: 'danger',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5', 'nav-item-6'].includes(\n active ?? '',\n )}\n badge={{\n number: 3,\n type: 'danger',\n }}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Info Badge\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n badge={{\n number: 1,\n type: 'info',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Warning Badge\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n badge={{\n number: 1,\n type: 'warning',\n }}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Critical Badge\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n badge={{\n number: 1,\n type: 'danger',\n }}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"h-full w-full\">\n <div className=\"flex flex-col p-8 w-full max-w-[1024px] mx-auto\">\n <div className=\"flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center\">\n <Typography variant=\"title-4\">Side Nav with Badges</Typography>\n <Typography variant=\"body-medium\">\n Badges can be used to indicate that there are actions that need\n attention from the user on the specific page. The badge can have\n three different types of severity:\n <b className=\"text-primary-text\"> info</b>,\n <b className=\"text-warning-text\"> warning</b> and\n <b className=\"text-danger-text\"> danger</b>.\n <br />\n <br />\n The badge on a <b>CategoryItem</b> should be the type of the\n highest priority badge of the items in the category. The number\n should be the total number of badges in the category.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/side-navigation/stories/side-nav-compact.story.js CHANGED Viewed

@@ -25,7 +25,7 @@ import { AcademicCapIconOutline, ChartBarIconOutline, CodeBracketIconOutline, Co
 import { useState } from 'react';
 const Component = () => {
     const [active, setActive] = useState(null);
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default", children: [_jsxs(SideNavigation, { isExpanded: false, shouldOverlayOnInteraction: false, ariaLabel: "Main side navigation", children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsxs(SideNavigation.CategoryItem, { icon: _jsx(WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active !== null && active !== void 0 ? active : ''), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), _jsx("div", { className: "n-h-full n-w-full", children: _jsx("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: _jsxs("div", { className: "n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Compact Side Nav" }), _jsxs(Typography, { variant: "body-medium", children: ["When using a compact side nav you must make sure to set a", _jsx("b", { children: " label" }), " on the NavItems, as the label will be used for the built in tooltip. It is also needed for screen readers to behave as correctly."] })] }) }) })] }));
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default", children: [_jsxs(SideNavigation, { isExpanded: false, shouldOverlayOnInteraction: false, ariaLabel: "Main side navigation", children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsxs(SideNavigation.CategoryItem, { icon: _jsx(WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active !== null && active !== void 0 ? active : ''), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), _jsx("div", { className: "h-full w-full", children: _jsx("div", { className: "flex flex-col p-8 w-full max-w-[1024px] mx-auto", children: _jsxs("div", { className: "flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Compact Side Nav" }), _jsxs(Typography, { variant: "body-medium", children: ["When using a compact side nav you must make sure to set a", _jsx("b", { children: " label" }), " on the NavItems, as the label will be used for the built in tooltip. It is also needed for screen readers to behave as correctly."] })] }) }) })] }));
 };
 export default Component;
 //# sourceMappingURL=side-nav-compact.story.js.map

package/lib/esm/side-navigation/stories/side-nav-compact.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav-compact.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-compact.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,0BAA0B,EAC1B,iBAAiB,EACjB,4BAA4B,GAC7B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE1D,OAAO,CACL,eAAK,SAAS,EAAC,~~sEAAsE~~,~~aACnF~~,MAAC,cAAc,IACb,UAAU,EAAE,KAAK,EACjB,0BAA0B,EAAE,KAAK,EACjC,SAAS,EAAC,sBAAsB,aAEhC,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,eAAe,KAAG,EACzB,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,sBAAsB,KAAG,EAChC,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,EAC1B,KAAC,cAAc,CAAC,OAAO,KAAG,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,iBAAiB,KAAG,EAC3B,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,MAAC,cAAc,CAAC,YAAY,IAC1B,IAAI,EAAE,KAAC,4BAA4B,KAAG,EACtC,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CAAC,aAE7D,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,0BAA0B,KAAG,EACpC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,0BAA0B,KAAG,EACpC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,IACE,GACN,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,mBAAmB,KAAG,EAC7B,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,oBAAoB,KAAG,EAC9B,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,EAC1B,KAAC,cAAc,CAAC,OAAO,KAAG,EAC1B,KAAC,cAAc,CAAC,QAAQ,cACtB,KAAC,cAAc,CAAC,OAAO,IACrB,IAAI,EAAE,KAAC,sBAAsB,KAAG,EAChC,KAAK,EAAC,UAAU,EAChB,QAAQ,EAAE,MAAM,KAAK,YAAY,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,GACtC,GACsB,IACX,EACjB,cAAK,SAAS,EAAC,~~mBAAmB~~,~~YAChC~~,cAAK,SAAS,EAAC,~~6DAA6D~~,~~YAC1E~~,eAAK,SAAS,EAAC,~~gHAAgH~~,~~aAC7H~~,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,iCAA8B,EAC3D,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,0EAE/B,iCAAa,0IAGF,IACT,GACF,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string \| null>(null);\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default\">\n <SideNavigation\n isExpanded={false}\n shouldOverlayOnInteraction={false}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active ?? '')}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"n-h-full n-w-full\">\n <div className=\"n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto\">\n <div className=\"n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center\">\n <Typography variant=\"title-4\">Compact Side Nav</Typography>\n <Typography variant=\"body-medium\">\n When using a compact side nav you must make sure to set a\n <b> label</b> on the NavItems, as the label will be used for the\n built in tooltip. It is also needed for screen readers to behave\n as correctly.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"side-nav-compact.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-compact.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string \| null>(null);\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default\">\n <SideNavigation\n isExpanded={false}\n shouldOverlayOnInteraction={false}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active ?? '')}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"h-full w-full\">\n <div className=\"flex flex-col p-8 w-full max-w-[1024px] mx-auto\">\n <div className=\"flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center\">\n <Typography variant=\"title-4\">Compact Side Nav</Typography>\n <Typography variant=\"body-medium\">\n When using a compact side nav you must make sure to set a\n <b> label</b> on the NavItems, as the label will be used for the\n built in tooltip. It is also needed for screen readers to behave\n as correctly.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/side-navigation/stories/side-nav-default.story.js CHANGED Viewed

@@ -26,7 +26,7 @@ import { useState } from 'react';
 const Component = () => {
     const [active, setActive] = useState(null);
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default", children: [_jsxs(SideNavigation, { isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), ariaLabel: "Main side navigation", children: [_jsx(SideNavigation.CategoryHeader, { children: "Example Category Header" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsxs(SideNavigation.CategoryItem, { icon: _jsx(WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active !== null && active !== void 0 ? active : ''), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), _jsx("div", { className: "n-h-full n-w-full", children: _jsx("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: _jsxs("div", { className: "n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Default Side Nav" }), _jsx(Typography, { variant: "body-medium", children: "This is the default behavior for a side nav. It expands on hover, and can be pinned to stay expanded." })] }) }) })] }));
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default", children: [_jsxs(SideNavigation, { isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), ariaLabel: "Main side navigation", children: [_jsx(SideNavigation.CategoryHeader, { children: "Example Category Header" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsxs(SideNavigation.CategoryItem, { icon: _jsx(WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active !== null && active !== void 0 ? active : ''), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), _jsx("div", { className: "h-full w-full", children: _jsx("div", { className: "flex flex-col p-8 w-full max-w-[1024px] mx-auto", children: _jsxs("div", { className: "flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Default Side Nav" }), _jsx(Typography, { variant: "body-medium", children: "This is the default behavior for a side nav. It expands on hover, and can be pinned to stay expanded." })] }) }) })] }));
 };
 export default Component;
 //# sourceMappingURL=side-nav-default.story.js.map

package/lib/esm/side-navigation/stories/side-nav-default.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav-default.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,0BAA0B,EAC1B,iBAAiB,EACjB,4BAA4B,GAC7B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,eAAK,SAAS,EAAC,~~sEAAsE~~,~~aACnF~~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~~mBAAmB~~,~~YAChC~~,cAAK,SAAS,EAAC,~~6DAA6D~~,~~YAC1E~~,eAAK,SAAS,EAAC,~~gHAAgH~~,~~aAC7H~~,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,iCAA8B,EAC3D,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,sHAGpB,IACT,GACF,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string \| null>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default\">\n <SideNavigation\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.CategoryHeader>\n Example Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active ?? '')}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n\n <div className=\"n-h-full n-w-full\">\n <div className=\"n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto\">\n <div className=\"n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center\">\n <Typography variant=\"title-4\">Default Side Nav</Typography>\n <Typography variant=\"body-medium\">\n This is the default behavior for a side nav. It expands on hover,\n and can be pinned to stay expanded.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"side-nav-default.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-default.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string \| null>(null);\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default\">\n <SideNavigation\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.CategoryHeader>\n Example Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active ?? '')}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n\n <div className=\"h-full w-full\">\n <div className=\"flex flex-col p-8 w-full max-w-[1024px] mx-auto\">\n <div className=\"flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center\">\n <Typography variant=\"title-4\">Default Side Nav</Typography>\n <Typography variant=\"body-medium\">\n This is the default behavior for a side nav. It expands on hover,\n and can be pinned to stay expanded.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/side-navigation/stories/side-nav-secondary.story.js CHANGED Viewed

@@ -27,7 +27,7 @@ const Component = () => {
     const [active, setActive] = useState('nav-item-8');
     const [secondaryActive, setSecondaryActive] = useState('beginner');
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default n-overflow-hidden", children: [_jsxs(SideNavigation, { isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), ariaLabel: "Main side navigation", children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsxs(SideNavigation.CategoryItem, { icon: _jsx(WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), _jsxs(SideNavigation, { isExpanded: true, shouldOverlayOnInteraction: false, expandedWidth: 220, ariaLabel: "Secondary side navigation", children: [_jsx(SideNavigation.CategoryHeader, { children: "Category Header" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-1', onClick: () => setSecondaryActive('secondary-nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-2', onClick: () => setSecondaryActive('secondary-nav-item-2') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-3', onClick: () => setSecondaryActive('secondary-nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-4', onClick: () => setSecondaryActive('secondary-nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-5', onClick: () => setSecondaryActive('secondary-nav-item-5') }) }), _jsx(SideNavigation.CategoryHeader, { children: "Category Header" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", icon: _jsx(MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-6', onClick: () => setSecondaryActive('secondary-nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", icon: _jsx(MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-7', onClick: () => setSecondaryActive('secondary-nav-item-7') }) })] }), _jsx("div", { className: "n-h-full n-w-full", children: _jsx("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: _jsxs("div", { className: "n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Secondary Side Nav" }), _jsx(Typography, { variant: "body-medium", children: "If a page requires its own navigation, you can use a secondary side nav. The secondary side nav is always expanded and does not have a pin button." })] }) }) })] }));
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default overflow-hidden", children: [_jsxs(SideNavigation, { isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), ariaLabel: "Main side navigation", children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsxs(SideNavigation.CategoryItem, { icon: _jsx(WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active), children: [_jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), _jsx(SideNavigation.Divider, {}), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { icon: _jsx(AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), _jsxs(SideNavigation, { isExpanded: true, shouldOverlayOnInteraction: false, expandedWidth: 220, ariaLabel: "Secondary side navigation", children: [_jsx(SideNavigation.CategoryHeader, { children: "Category Header" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-1', onClick: () => setSecondaryActive('secondary-nav-item-1') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-2', onClick: () => setSecondaryActive('secondary-nav-item-2') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-3', onClick: () => setSecondaryActive('secondary-nav-item-3') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-4', onClick: () => setSecondaryActive('secondary-nav-item-4') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-5', onClick: () => setSecondaryActive('secondary-nav-item-5') }) }), _jsx(SideNavigation.CategoryHeader, { children: "Category Header" }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", icon: _jsx(MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-6', onClick: () => setSecondaryActive('secondary-nav-item-6') }) }), _jsx(SideNavigation.ListItem, { children: _jsx(SideNavigation.NavItem, { label: "Secondary Nav Item", icon: _jsx(MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-7', onClick: () => setSecondaryActive('secondary-nav-item-7') }) })] }), _jsx("div", { className: "h-full w-full", children: _jsx("div", { className: "flex flex-col p-8 w-full max-w-[1024px] mx-auto", children: _jsxs("div", { className: "flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center", children: [_jsx(Typography, { variant: "title-4", children: "Secondary Side Nav" }), _jsx(Typography, { variant: "body-medium", children: "If a page requires its own navigation, you can use a secondary side nav. The secondary side nav is always expanded and does not have a pin button." })] }) }) })] }));
 };
 export default Component;
 //# sourceMappingURL=side-nav-secondary.story.js.map

package/lib/esm/side-navigation/stories/side-nav-secondary.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav-secondary.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-secondary.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string>('nav-item-8');\n const [secondaryActive, setSecondaryActive] = useState<string>('beginner');\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default n-overflow-hidden\">\n <SideNavigation\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active)}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <SideNavigation\n isExpanded={true}\n shouldOverlayOnInteraction={false}\n expandedWidth={220}\n ariaLabel=\"Secondary side navigation\"\n >\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-1'}\n onClick={() => setSecondaryActive('secondary-nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-2'}\n onClick={() => setSecondaryActive('secondary-nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-3'}\n onClick={() => setSecondaryActive('secondary-nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-4'}\n onClick={() => setSecondaryActive('secondary-nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-5'}\n onClick={() => setSecondaryActive('secondary-nav-item-5')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-6'}\n onClick={() => setSecondaryActive('secondary-nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-7'}\n onClick={() => setSecondaryActive('secondary-nav-item-7')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"n-h-full n-w-full\">\n <div className=\"n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto\">\n <div className=\"n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center\">\n <Typography variant=\"title-4\">Secondary Side Nav</Typography>\n <Typography variant=\"body-medium\">\n If a page requires its own navigation, you can use a secondary\n side nav. The secondary side nav is always expanded and does not\n have a pin button.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"side-nav-secondary.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-secondary.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string>('nav-item-8');\n const [secondaryActive, setSecondaryActive] = useState<string>('beginner');\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex bg-neutral-bg-default overflow-hidden\">\n <SideNavigation\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active)}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <SideNavigation\n isExpanded={true}\n shouldOverlayOnInteraction={false}\n expandedWidth={220}\n ariaLabel=\"Secondary side navigation\"\n >\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-1'}\n onClick={() => setSecondaryActive('secondary-nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-2'}\n onClick={() => setSecondaryActive('secondary-nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-3'}\n onClick={() => setSecondaryActive('secondary-nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-4'}\n onClick={() => setSecondaryActive('secondary-nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-5'}\n onClick={() => setSecondaryActive('secondary-nav-item-5')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-6'}\n onClick={() => setSecondaryActive('secondary-nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-7'}\n onClick={() => setSecondaryActive('secondary-nav-item-7')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"h-full w-full\">\n <div className=\"flex flex-col p-8 w-full max-w-[1024px] mx-auto\">\n <div className=\"flex flex-col gap-token-8 bg-neutral-bg-weak p-token-32 rounded-lg items-center justify-center\">\n <Typography variant=\"title-4\">Secondary Side Nav</Typography>\n <Typography variant=\"body-medium\">\n If a page requires its own navigation, you can use a secondary\n side nav. The secondary side nav is always expanded and does not\n have a pin button.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/skeleton/stories/skeleton-circular.story.js CHANGED Viewed

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { Skeleton } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-gap-4 n-items-center", children: [_jsx(Skeleton, { shape: "circular", height: "50px", width: "50px" }), _jsx(Skeleton, { shape: "circular", height: "40px", width: "40px" }), _jsx(Skeleton, { shape: "circular", height: "30px", width: "30px" })] }));
+    return (_jsxs("div", { className: "flex gap-4 items-center", children: [_jsx(Skeleton, { shape: "circular", height: "50px", width: "50px" }), _jsx(Skeleton, { shape: "circular", height: "40px", width: "40px" }), _jsx(Skeleton, { shape: "circular", height: "30px", width: "30px" })] }));
 };
 export default Component;
 //# sourceMappingURL=skeleton-circular.story.js.map

package/lib/esm/skeleton/stories/skeleton-circular.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-circular.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-circular.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC~~,+BAA+B~~,~~aAC5C~~,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EACxD,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EACxD,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-4 n-items-center\">\n <Skeleton shape=\"circular\" height=\"50px\" width=\"50px\" />\n <Skeleton shape=\"circular\" height=\"40px\" width=\"40px\" />\n <Skeleton shape=\"circular\" height=\"30px\" width=\"30px\" />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"skeleton-circular.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-circular.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EACxD,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EACxD,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,IACpD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex gap-4 items-center\">\n <Skeleton shape=\"circular\" height=\"50px\" width=\"50px\" />\n <Skeleton shape=\"circular\" height=\"40px\" width=\"40px\" />\n <Skeleton shape=\"circular\" height=\"30px\" width=\"30px\" />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/skeleton/stories/skeleton-default.story.js CHANGED Viewed

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { Skeleton } from '@neo4j-ndl/react';
 const Component = () => {
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-4", children: [_jsx(Skeleton, { height: "50px", width: "100%" }), _jsx(Skeleton, { height: "30px", width: "80%" }), _jsx(Skeleton, { height: "20px", width: "60%" })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Skeleton, { height: "50px", width: "100%" }), _jsx(Skeleton, { height: "30px", width: "80%" }), _jsx(Skeleton, { height: "20px", width: "60%" })] }));
 };
 export default Component;
 //# sourceMappingURL=skeleton-default.story.js.map

package/lib/esm/skeleton/stories/skeleton-default.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-default.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,~~2BAA2B~~,~~aACxC~~,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EACvC,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,EACtC,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,IAClC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-flex-col n-gap-4\">\n <Skeleton height=\"50px\" width=\"100%\" />\n <Skeleton height=\"30px\" width=\"80%\" />\n <Skeleton height=\"20px\" width=\"60%\" />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"skeleton-default.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EACvC,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,EACtC,KAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,IAClC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"flex flex-col gap-4\">\n <Skeleton height=\"50px\" width=\"100%\" />\n <Skeleton height=\"30px\" width=\"80%\" />\n <Skeleton height=\"20px\" width=\"60%\" />\n </div>\n );\n};\n\nexport default Component;\n"]}