acinguiux-ds-react-framework 0.0.6 → 0.0.7

package/build/esm/components/NavBar/NavBar.js

@@ -1,103 +1,144 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as L, useState as R, useEffect as V, useCallback as h, useMemo as j } from "react";
-import D from "classnames";
-import K from "./components/LastArea/LastArea.js";
-import O from "./components/FirstArea/FirstArea.js";
-import { Wrapper as _, Nav as F, Expand as H, ExpandNotch as W, ExpandIcon as q, MiddleArea as G, StyledMenu as J } from "./NavBar.styles.js";
-import P from "../Icon/components/ChevronSmallRight.js";
-import { Directions as s, NAV_BAR_CLASS as u, Sizes as Q, Alignments as T } from "../../react-base/src/consts.js";
-const U = L(
+import { jsxs as m, jsx as e, Fragment as J } from "react/jsx-runtime";
+import { forwardRef as K, useState as $, useMemo as b, useEffect as Q, useCallback as h } from "react";
+import U from "classnames";
+import X from "../Icon/components/LeftNavigation.js";
+import Y from "../Icon/components/LeftNavigationSolid.js";
+import Z from "./components/LastArea/LastArea.js";
+import P from "./components/FirstArea/FirstArea.js";
+import { Wrapper as ee, Nav as le, DividerContainer as c, MiddleArea as te, StyledMenu as ae, ExpandTooltip as ne, TooltipLabel as oe, ExpandButtonContainer as re, ExpandButton as ie, ExpandButtonText as se } from "./NavBar.styles.js";
+import d from "../Divider/Divider.js";
+import { getTooltipLabelSize as me } from "../Menu/Menu.utils.js";
+import { Directions as t, NOOP as N, NAV_BAR_CLASS as ce, Contrasts as p, Sizes as n, Alignments as de } from "../../react-base/src/consts.js";
+const xe = K(
   ({
-    size: o = Q.Medium,
-    className: x,
-    direction: n = s.Horizontal,
-    elevation: $,
-    collapsed: r = !1,
-    preventExpand: g = !1,
-    expandedWidth: A,
-    pectenArea: d = "default",
-    urlProps: C,
-    header: E,
-    avatarArea: c,
-    avatarProps: l,
-    items: m,
-    itemsAlignment: N = T.Left,
-    itemRender: M,
-    selectedPath: S,
-    children: p,
-    ...v
-  }, b) => {
-    const [a, t] = R(() => r);
-    V(() => t(r), [r]);
-    const k = {
+    size: a = n.Medium,
+    className: M,
+    direction: l = t.Horizontal,
+    elevation: O,
+    collapsed: u = !1,
+    preventExpand: B = !1,
+    expandedWidth: D,
+    pectenArea: S = "default",
+    urlProps: H,
+    header: T,
+    avatarArea: f,
+    avatarProps: i,
+    items: g,
+    topArea: v,
+    onClick: k,
+    startArea: C,
+    endArea: L,
+    itemsAlignment: z = de.Left,
+    expandMode: s = "auto_push",
+    itemRender: A,
+    selectedPath: _,
+    onSelect: j,
+    ...y
+  }, F) => {
+    const [o, E] = $(() => u), [V, x] = $(() => !1), r = b(() => l === t.Horizontal || !o || V, [o, V]);
+    Q(() => E(u), [u]);
+    const I = {
       vertical: "inline",
       horizontal: "horizontal"
-    }, w = h(() => {
-      t((i) => !i);
-    }, []), y = h((i) => {
-      i.code === "Enter" && t((I) => !I);
-    }, []), B = j(() => ({
-      ...l,
-      collapsed: a,
-      size: o
-    }), [l, o, a]);
-    return /* @__PURE__ */ e(_, { $direction: n, size: o, children: /* @__PURE__ */ f(
-      F,
+    }, R = h(() => {
+      E((G) => !G);
+    }, []), W = h(() => x(!0), []), w = h(() => x(!1), []), q = b(() => ({
+      ...i,
+      ...l === t.Vertical ? {
+        collapsed: !r
+      } : {},
+      size: a
+    }), [l, i, a, r]);
+    return /* @__PURE__ */ m(
+      ee,
       {
-        as: n === s.Vertical ? "nav" : "header",
-        size: o,
-        className: D(u, x),
-        $direction: n,
-        $elevation: $,
-        $collapsed: a,
-        expandedWidth: A,
-        ref: b,
-        ...v,
+        onMouseLeave: s !== "manual" ? w : N,
+        onMouseEnter: s !== "manual" ? W : N,
+        $direction: l,
+        $expandMode: s,
+        size: a,
+        isCollapsed: l === t.Vertical && o,
         children: [
-          d !== "none" && /* @__PURE__ */ e(
-            O,
+          v && l !== t.Vertical && v,
+          /* @__PURE__ */ m(
+            le,
             {
-              header: E,
-              pectenArea: d,
-              urlProps: C,
-              collapsed: a,
-              size: o
-            }
-          ),
-          n === s.Vertical && !g && /* @__PURE__ */ f(
-            H,
-            {
-              tabIndex: 0,
-              role: "button",
-              "aria-roledescription": "Expand navigation bar",
-              onClick: w,
-              onKeyDown: y,
+              as: l === t.Vertical ? "nav" : "header",
+              size: a,
+              $expandMode: s,
+              className: U(ce, M),
+              $direction: l,
+              $elevation: O,
+              $collapsed: !r,
+              expandedWidth: D,
+              ref: F,
+              ...y,
               children: [
-                /* @__PURE__ */ e(W, {}),
-                /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(P, { className: `${u}-icon`, width: 20, height: 20 }) })
+                S !== "none" && /* @__PURE__ */ e(
+                  P,
+                  {
+                    header: T,
+                    pectenArea: S,
+                    urlProps: H,
+                    onClick: k,
+                    collapsed: !r,
+                    size: a
+                  }
+                ),
+                C && l === t.Vertical && /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(d, { contrast: p.Subtle, size: n.Small }) }),
+                C,
+                /* @__PURE__ */ e(te, { $direction: l, $collapsed: !r, children: g && /* @__PURE__ */ e(
+                  ae,
+                  {
+                    inlineCollapsed: l === t.Vertical && !r,
+                    items: g,
+                    $itemsAlignment: z,
+                    itemRender: A,
+                    mode: I[l],
+                    selectedPath: _,
+                    onSelect: j,
+                    size: a
+                  }
+                ) }),
+                L && l === t.Vertical && /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(d, { contrast: p.Subtle, size: n.Small }) }),
+                L,
+                l === t.Vertical && !B && /* @__PURE__ */ m(J, { children: [
+                  /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(d, { contrast: p.Subtle, size: n.Small }) }),
+                  /* @__PURE__ */ e(
+                    ne,
+                    {
+                      overlay: /* @__PURE__ */ e(oe, { size: me(a), children: "Expand navigation" }),
+                      isDisabled: !o || s !== "manual",
+                      placement: "right",
+                      offset: 20,
+                      trigger: /* @__PURE__ */ e(re, { size: a, children: /* @__PURE__ */ e(
+                        ie,
+                        {
+                          fullWidth: !0,
+                          size: a,
+                          variant: "transparent",
+                          icon: o ? /* @__PURE__ */ e(Y, {}) : /* @__PURE__ */ e(X, {}),
+                          onClick: R,
+                          children: /* @__PURE__ */ m(se, { size: a === n.Large ? n.Large : n.Medium, children: [
+                            o ? "Expand" : "Collapse",
+                            " navigation"
+                          ] })
+                        }
+                      ) })
+                    }
+                  )
+                ] }),
+                l === t.Vertical && (!!f || !!i) && /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(d, { contrast: p.Subtle, size: n.Small }) }),
+                (!!f || !!i) && /* @__PURE__ */ e(Z, { avatarArea: f, avatarProps: i && q })
               ]
             }
-          ),
-          /* @__PURE__ */ e(G, { $direction: n, $collapsed: a, children: p && !m ? p : /* @__PURE__ */ e(
-            J,
-            {
-              triggerSubMenuAction: "click",
-              inlineCollapsed: a,
-              items: m,
-              $itemsAlignment: N,
-              itemRender: M,
-              mode: k[n],
-              selectedPath: S,
-              size: o
-            }
-          ) }),
-          (!!c || !!l) && /* @__PURE__ */ e(K, { avatarArea: c, avatarProps: l && B })
+          )
         ]
       }
-    ) });
+    );
   }
-), le = U;
+);
 export {
-  le as default
+  xe as default
 };
 //# sourceMappingURL=NavBar.js.map

package/build/esm/components/NavBar/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sources":["../../../../src/components/NavBar/NavBar.tsx"],"sourcesContent":["import { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\r\n\r\nimport classNames from 'classnames';\r\nimport { NAV_BAR_CLASS, Sizes, Directions, Alignments } from 'acinguiux-ds-react-base';\r\n\r\nimport LastArea from './components/LastArea/LastArea';\r\nimport FirstArea from './components/FirstArea/FirstArea';\r\nimport { Wrapper, Expand, ExpandIcon, ExpandNotch, MiddleArea, Nav, StyledMenu } from './NavBar.styles';\r\nimport { INavBarProps, NavBarDirection } from './NavBar.types';\r\nimport { ChevronSmallRight } from '../Icon/components';\r\nimport { IAvatarProps } from '../Avatar/Avatar.types';\r\nimport { IMenuProps } from '../Menu/Menu.types';\r\n\r\nconst NavBar = forwardRef<HTMLElement, INavBarProps>(\r\n  (\r\n    {\r\n      size = Sizes.Medium,\r\n      className,\r\n      direction = Directions.Horizontal,\r\n      elevation,\r\n      collapsed = false,\r\n      preventExpand = false,\r\n      expandedWidth,\r\n      pectenArea = 'default',\r\n      urlProps,\r\n      header,\r\n      avatarArea,\r\n      avatarProps,\r\n      items,\r\n      itemsAlignment = Alignments.Left,\r\n      itemRender,\r\n      selectedPath,\r\n      children,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ): ReactElement => {\r\n    const [isCollapsed, setIsCollapsed] = useState<boolean>(() => collapsed);\r\n\r\n    useEffect(() => setIsCollapsed(collapsed), [collapsed]);\r\n\r\n    const menuModeMap: { [Property in NavBarDirection]: IMenuProps['mode'] } = {\r\n      vertical: 'inline',\r\n      horizontal: 'horizontal',\r\n    };\r\n\r\n    const handleOnExpandClick: MouseEventHandler = useCallback(() => {\r\n      setIsCollapsed(prev => !prev);\r\n    }, []);\r\n\r\n    const handleOnExpandKeyPress: KeyboardEventHandler = useCallback((e) => {\r\n      if (e.code === 'Enter') {\r\n        setIsCollapsed(prev => !prev);\r\n      }\r\n    }, []);\r\n\r\n    const mergedAvatarProps: IAvatarProps = useMemo(() => ({\r\n      ...avatarProps,\r\n      collapsed: isCollapsed,\r\n      size,\r\n    }), [avatarProps, size, isCollapsed]);\r\n\r\n    return (\r\n      <Wrapper $direction={direction} size={size}>\r\n        <Nav\r\n          as={direction === Directions.Vertical ? 'nav' : 'header'}\r\n          size={size}\r\n          className={classNames(NAV_BAR_CLASS, className)}\r\n          $direction={direction}\r\n          $elevation={elevation}\r\n          $collapsed={isCollapsed}\r\n          expandedWidth={expandedWidth}\r\n          ref={ref}\r\n          {...rest}\r\n        >\r\n          {pectenArea !== 'none' && (\r\n            <FirstArea\r\n              header={header}\r\n              pectenArea={pectenArea}\r\n              urlProps={urlProps}\r\n              collapsed={isCollapsed}\r\n              size={size}\r\n            />\r\n          )}\r\n          {direction === Directions.Vertical && !preventExpand && (\r\n            <Expand\r\n              tabIndex={0}\r\n              role=\"button\"\r\n              aria-roledescription=\"Expand navigation bar\"\r\n              onClick={handleOnExpandClick}\r\n              onKeyDown={handleOnExpandKeyPress}\r\n            >\r\n              <ExpandNotch />\r\n              <ExpandIcon>\r\n                <ChevronSmallRight className={`${NAV_BAR_CLASS}-icon`} width={20} height={20} />\r\n              </ExpandIcon>\r\n            </Expand>\r\n          )}\r\n          <MiddleArea $direction={direction} $collapsed={isCollapsed}>\r\n            {!!children && !items ? (\r\n              children\r\n            ) : (\r\n              <StyledMenu\r\n                triggerSubMenuAction=\"click\"\r\n                inlineCollapsed={isCollapsed}\r\n                items={items}\r\n                $itemsAlignment={itemsAlignment}\r\n                itemRender={itemRender}\r\n                mode={menuModeMap[direction] as INavBarProps['direction']}\r\n                selectedPath={selectedPath}\r\n                size={size}\r\n              />\r\n            )}\r\n          </MiddleArea>\r\n          {(!!avatarArea || !!avatarProps) && (\r\n            <LastArea avatarArea={avatarArea} avatarProps={avatarProps && mergedAvatarProps} />\r\n          )}\r\n        </Nav>\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n\r\nexport default NavBar;\r\n"],"names":["NavBar","forwardRef","size","Sizes","className","direction","Directions","elevation","collapsed","preventExpand","expandedWidth","pectenArea","urlProps","header","avatarArea","avatarProps","items","itemsAlignment","Alignments","itemRender","selectedPath","children","rest","ref","isCollapsed","setIsCollapsed","useState","useEffect","menuModeMap","handleOnExpandClick","useCallback","prev","handleOnExpandKeyPress","e","mergedAvatarProps","useMemo","jsx","Wrapper","jsxs","Nav","classNames","NAV_BAR_CLASS","FirstArea","Expand","ExpandNotch","ExpandIcon","ChevronSmallRight","MiddleArea","StyledMenu","LastArea","NavBar$1"],"mappings":"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"}
+{"version":3,"file":"NavBar.js","sources":["../../../../src/components/NavBar/NavBar.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { NAV_BAR_CLASS, Sizes, Directions, Contrasts, Alignments, AvatarTypes, NavBarTypes, NOOP } from 'acinguiux-ds-react-base';\n\nimport { LeftNavigationSolid, LeftNavigation } from '../Icon/components';\nimport LastArea from './components/LastArea/LastArea';\nimport FirstArea from './components/FirstArea/FirstArea';\nimport { Wrapper, MiddleArea, Nav, StyledMenu, DividerContainer, ExpandButton, ExpandButtonContainer, ExpandButtonText, ExpandTooltip, TooltipLabel } from './NavBar.styles';\nimport { INavBarProps } from './NavBar.types';\nimport { FlagName } from '../Avatar/Avatar.types';\nimport Divider from '../Divider/Divider';\nimport { IMenuProps } from '../Menu/Menu.types';\nimport { getTooltipLabelSize } from '../Menu/Menu.utils';\n\nconst NavBar = forwardRef<HTMLElement, INavBarProps>(\n  (\n    {\n      size = Sizes.Medium,\n      className,\n      direction = Directions.Horizontal,\n      elevation,\n      collapsed = false,\n      preventExpand = false,\n      expandedWidth,\n      pectenArea = 'default',\n      urlProps,\n      header,\n      avatarArea,\n      avatarProps,\n      items,\n      topArea,\n      onClick,\n      startArea,\n      endArea,\n      itemsAlignment = Alignments.Left,\n      expandMode = 'auto_push',\n      itemRender,\n      selectedPath,\n      onSelect,\n      ...rest\n    },\n    ref,\n  ): ReactElement => {\n    const [isCollapsed, setIsCollapsed] = useState<boolean>(() => collapsed);\n    const [isHovered, setIsHovered] = useState<boolean>(() => false);\n    const isOpen = useMemo(() => direction === Directions.Horizontal || !isCollapsed || isHovered, [isCollapsed, isHovered]);\n\n    useEffect(() => setIsCollapsed(collapsed), [collapsed]);\n\n    const menuModeMap: { [Property in NavBarTypes.Direction]: IMenuProps['mode'] } = {\n      vertical: 'inline',\n      horizontal: 'horizontal',\n    };\n\n    const handleOnExpandClick: MouseEventHandler = useCallback(() => {\n      setIsCollapsed(prev => !prev);\n    }, []);\n    const handleOnEnter: MouseEventHandler = useCallback(() => setIsHovered(true), []);\n    const handleOnLeave: MouseEventHandler = useCallback(() => setIsHovered(false), []);\n\n    const mergedAvatarProps: AvatarTypes.IAvatarProps<FlagName> = useMemo(() => ({\n      ...avatarProps,\n      ...(direction === Directions.Vertical ? {\n        collapsed: !isOpen,\n      } : {}),\n      size,\n    }), [direction, avatarProps, size, isOpen]);\n\n    return (\n      <Wrapper\n        onMouseLeave={expandMode !== 'manual' ? handleOnLeave : NOOP}\n        onMouseEnter={expandMode !== 'manual' ? handleOnEnter : NOOP}\n        $direction={direction}\n        $expandMode={expandMode}\n        size={size}\n        isCollapsed={direction === Directions.Vertical && isCollapsed}\n      >\n        {topArea && direction !== Directions.Vertical && topArea}\n        <Nav\n          as={direction === Directions.Vertical ? 'nav' : 'header'}\n          size={size}\n          $expandMode={expandMode}\n          className={classNames(NAV_BAR_CLASS, className)}\n          $direction={direction}\n          $elevation={elevation}\n          $collapsed={!isOpen}\n          expandedWidth={expandedWidth}\n          ref={ref}\n          {...rest}\n        >\n          {pectenArea !== 'none' && (\n            <FirstArea\n              header={header}\n              pectenArea={pectenArea}\n              urlProps={urlProps}\n              onClick={onClick}\n              collapsed={!isOpen}\n              size={size}\n            />\n          )}\n          {startArea && direction === Directions.Vertical &&\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          }\n          {startArea}\n          <MiddleArea $direction={direction} $collapsed={!isOpen}>\n            {items && (\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={items}\n                $itemsAlignment={itemsAlignment}\n                itemRender={itemRender}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedPath={selectedPath}\n                onSelect={onSelect}\n                size={size}\n              />\n            )}\n          </MiddleArea>\n          {endArea && direction === Directions.Vertical &&\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          }\n          {endArea}\n          {direction === Directions.Vertical && !preventExpand &&\n            <>\n              <DividerContainer>\n                <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n              </DividerContainer>\n              <ExpandTooltip\n                overlay={<TooltipLabel size={getTooltipLabelSize(size)}>Expand navigation</TooltipLabel>}\n                isDisabled={!isCollapsed || expandMode !== 'manual'}\n                placement=\"right\"\n                offset={20}\n                trigger={\n                  <ExpandButtonContainer size={size}>\n                    <ExpandButton\n                      fullWidth\n                      size={size}\n                      variant=\"transparent\"\n                      icon={isCollapsed ? <LeftNavigationSolid /> : <LeftNavigation />}\n                      onClick={handleOnExpandClick}\n                    >\n                      <ExpandButtonText size={size === Sizes.Large ? Sizes.Large : Sizes.Medium}>\n                        {isCollapsed ? 'Expand' : 'Collapse'} navigation\n                      </ExpandButtonText>\n                    </ExpandButton>\n                  </ExpandButtonContainer>\n                } />\n            </>\n          }\n          {direction === Directions.Vertical && (!!avatarArea || !!avatarProps) &&\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          }\n          {(!!avatarArea || !!avatarProps) && (\n            <LastArea avatarArea={avatarArea} avatarProps={avatarProps && mergedAvatarProps} />\n          )}\n        </Nav>\n      </Wrapper>\n    );\n  },\n);\n\nexport default NavBar;\n"],"names":["NavBar","forwardRef","size","Sizes","className","direction","Directions","elevation","collapsed","preventExpand","expandedWidth","pectenArea","urlProps","header","avatarArea","avatarProps","items","topArea","onClick","startArea","endArea","itemsAlignment","Alignments","expandMode","itemRender","selectedPath","onSelect","rest","ref","isCollapsed","setIsCollapsed","useState","isHovered","setIsHovered","isOpen","useMemo","useEffect","menuModeMap","handleOnExpandClick","useCallback","prev","handleOnEnter","handleOnLeave","mergedAvatarProps","jsxs","Wrapper","NOOP","Nav","classNames","NAV_BAR_CLASS","jsx","FirstArea","DividerContainer","Divider","Contrasts","MiddleArea","StyledMenu","Fragment","ExpandTooltip","TooltipLabel","getTooltipLabelSize","ExpandButtonContainer","ExpandButton","LeftNavigationSolid","LeftNavigation","ExpandButtonText","LastArea"],"mappings":"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"}

package/build/esm/components/NavBar/NavBar.styles.d.ts

@@ -1,15 +1,29 @@
 /// <reference types="react" />
-import { Transient } from '..\..\react-base\src';
+import { Directions, Transient, Sizes } from '..\..\react-base\src';
 import { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';
 import { IMenuProps } from '../Menu/Menu.types';
-declare const StyledMenu: import("styled-components").StyledComponent<({ className, mode, size, inlineCollapsed, emphasis, indicatorPosition, items, selectedPath, selectedKeys, itemRender, children, ...rest }: IMenuProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, import("styled-components").DefaultTheme, IMenuProps & Omit<INavBarProps, "itemsAlignment"> & {
-    $itemsAlignment?: import("./NavBar.types").NavBarItemsAlignment | undefined;
+declare const StyledMenu: import("styled-components").StyledComponent<({ className, mode, size, inlineCollapsed, emphasis, indicatorPosition, itemContentDirection, items, selectedPath, selectedKeys, itemRender, children, ...rest }: IMenuProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, import("styled-components").DefaultTheme, IMenuProps & Omit<INavBarProps, "itemsAlignment"> & {
+    $itemsAlignment?: import("..\..\react-base\src/components/NavBar/NavBar.types").ItemsAlignment | undefined;
 }, never>;
-declare const ExpandNotch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const ExpandIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Expand: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Transient<INavBarPropsWithReqSize, "direction">, never>;
-declare const Nav: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, Transient<INavBarPropsWithReqSize, "direction" | "elevation" | "collapsed">, never>;
+declare const Expand: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<INavBarPropsWithReqSize, "direction" | "expandMode"> & {
+    $direction?: "horizontal" | "vertical" | Directions | undefined;
+    $expandMode?: "manual" | "auto_push" | "auto_cover" | undefined;
+} & {
+    isCollapsed: boolean;
+}, never>;
+type NavPropsKeys = 'direction' | 'elevation' | 'collapsed' | 'expandMode';
+type NavProps = Transient<INavBarPropsWithReqSize, NavPropsKeys>;
+declare const Nav: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, NavProps, never>;
 declare const MiddleArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Transient<INavBarProps, "direction" | "collapsed">, never>;
-export { Wrapper, Nav, MiddleArea, Expand, ExpandNotch, ExpandIcon, StyledMenu };
+declare const DividerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ExpandButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    size?: Sizes | undefined;
+}, never>;
+declare const ExpandButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../..").IButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
+declare const ExpandButtonText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").ILabelProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
+declare const TooltipLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").ILabelProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
+declare const ExpandTooltip: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").ITooltipProps & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export { Wrapper, Nav, MiddleArea, Expand, ExpandIcon, StyledMenu, DividerContainer, ExpandButton, ExpandButtonContainer, TooltipLabel, ExpandTooltip, ExpandButtonText };
 //# sourceMappingURL=NavBar.styles.d.ts.map

package/build/esm/components/NavBar/NavBar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"names":[],"mappings":";AACA,OAAO,EAA6B,SAAS,EAAY,MAAM,yBAAyB,CAAC;AAEzF,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAIvE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,QAAA,MAAM,UAAU;;SAKf,CAAC;AAEF,QAAA,MAAM,WAAW,yGAwBhB,CAAC;AAEF,QAAA,MAAM,UAAU,yGAUf,CAAC;AAEF,QAAA,MAAM,MAAM,yGAoBX,CAAC;AAEF,QAAA,MAAM,OAAO,sJAMZ,CAAC;AAEF,QAAA,MAAM,GAAG,qLAwCR,CAAC;AAEF,QAAA,MAAM,UAAU,yJAYf,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"NavBar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAiB,UAAU,EAAE,SAAS,EAAmE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEvJ,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAKvE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,QAAA,MAAM,UAAU;;SAMf,CAAC;AAEF,QAAA,MAAM,UAAU,yGAaf,CAAC;AAEF,QAAA,MAAM,MAAM,4GAqBX,CAAC;AAUF,QAAA,MAAM,OAAO;;;;iBAA8F,OAAO;SAMjH,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3E,KAAK,QAAQ,GAAG,SAAS,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;AAEjE,QAAA,MAAM,GAAG,kHAoCR,CAAC;AAEF,QAAA,MAAM,UAAU,yJAYf,CAAC;AAEF,QAAA,MAAM,gBAAgB,yGAGrB,CAAC;AAEF,QAAA,MAAM,qBAAqB;;SAI1B,CAAC;AAEF,QAAA,MAAM,YAAY,2OASjB,CAAC;AAEF,QAAA,MAAM,gBAAgB,2NAMrB,CAAC;AAEF,QAAA,MAAM,YAAY,2NAMjB,CAAC;AAEF,QAAA,MAAM,aAAa,yNAGlB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/build/esm/components/NavBar/NavBar.styles.js

@@ -1,132 +1,150 @@
-import e, { css as o } from "styled-components";
-import c from "../Menu/Menu.js";
-import { navBarSizes as s } from "./NavBar.consts.js";
-import { getItemsAlignment as f } from "./utils/styleUtils.js";
-import { Directions as r, ZIndexes as h, NAV_BAR_CLASS as u } from "../../react-base/src/consts.js";
-const y = e(c)`
-  ${({ $itemsAlignment: t }) => o`
+import e, { css as r } from "styled-components";
+import u from "../Menu/Menu.js";
+import g from "../Button/Button.js";
+import x from "../Text/components/Label/Label.js";
+import h from "../Tooltip/Tooltip.js";
+import { getItemsAlignment as $ } from "../../react-base/src/components/NavBar/utils/styleUtils.js";
+import { getFocusStyles as v } from "../../react-base/src/utils/stylesUtils.js";
+import { Directions as s, ZIndexes as w, NAV_BAR_CLASS as y, Sizes as a } from "../../react-base/src/consts.js";
+import { consts as l } from "../../react-base/src/components/NavBar/NavBar.consts.js";
+import { consts as d } from "../../react-base/src/components/Menu/Menu.consts.js";
+const _ = e(u)`
+  ${({ $itemsAlignment: t }) => r`
     flex: 1 1 0;
-    justify-content: ${f(t)};
+    justify-content: ${$(t)};
+    overflow: hidden auto;
   `}
-`, p = e.div(
-  ({ theme: t }) => o`
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 12px;
-    height: 32px;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      right: 2px;
-      top: 2px;
-      position: absolute;
-      border-radius: 0 14px 14px 0;
-      background-color: ${t.onSurface.surface.default.background};
-      box-shadow: ${t.elevation.level1};
-      display: block;
-      width: 28px;
-      height: 28px;
-      transform: translateX(-12px);
-      transition: transform 0.2s ease-out;
-    }
-  `
-), a = e.div`
-  opacity: 0;
+`, p = e.div`
   position: absolute;
   left: 4px;
   top: 4px;
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   padding: 2px;
   transform: translateX(-6px);
   transition: opacity 0.1s linear, transform 0.2s ease-out;
-`, $ = e.div(
-  ({ theme: t }) => o`
+
+  svg {
+    fill: ${({ theme: t }) => t.getLayer()["Text On Surface/Strong"]};
+  }
+`, b = e.button(
+  ({ theme: t }) => r`
     cursor: pointer;
     position: absolute;
     z-index: 2;
-    right: -12px;
-    top: 38px;
+    right: -36px;
+    top: 50%;
     width: 32px;
     height: 32px;
     border-radius: 16px;
+    border: none;
+    background-color: transparent;
 
     &:focus-visible {
-      outline: 3px solid ${t.additional.focus.subtle};
+      ${v(t)};
 
-      ${a}, ${p}:before {
-        opacity: 1;
+      ${p}, :before {
         transform: translateX(0);
       }
     }
   `
-), A = e.div(
-  ({ $direction: t, size: i }) => o`
+), S = (t, i, o, n) => t === s.Vertical ? i === "auto_cover" && n ? `${l[o].height}px` : "auto" : "100%", j = e.div(
+  ({ $direction: t, $expandMode: i, size: o, isCollapsed: n }) => r`
     position: relative;
-    height: ${t === r.Vertical ? "100%" : `${s[i].height}px`};
-    width: ${t === r.Vertical ? `${s[i].height}px` : "100%"};
+    height: ${t === s.Vertical ? "100%" : `${l[o].height}px`};
+    width: ${S(t, i, o, n)};
   `
-), S = e.header(
-  ({ $direction: t, $elevation: i, $collapsed: l, theme: n, expandedWidth: d = 300, size: x }) => o`
-    z-index: ${h.NAVBAR};
-    position: absolute;
+), C = e.header(
+  ({ $direction: t, $elevation: i, $collapsed: o, theme: n, expandedWidth: c = 300, size: f, $expandMode: m }) => r`
+    z-index: ${w.NAVBAR};
+    position: ${m === "auto_cover" && o ? "absolute" : "relative"};
     display: flex;
-    flex-flow: ${t === r.Horizontal ? "row" : "column"} nowrap;
-    gap: 16px;
+    flex-flow: ${t === s.Horizontal ? "row" : "column"} nowrap;
     align-items: stretch;
     height: 100%;
     width: 100%;
     box-shadow: ${i ? n.elevation.level1 : null};
-    color: ${n.onSurface.surface.default.text.strong};
-    background-color: ${n.onSurface.surface.default.background};
+    color: ${n.getLayer({})["Text On Surface/Strong"]};
+    background-color: ${n.getLayer({})["Background/Surface"]};
     transition: width 0.3s ease-out;
 
-    ${t === r.Vertical && o`
-      width: ${l ? `${s[x].height}px` : `${d}px`};
+    ${t === s.Vertical && r`
+      width: ${o ? `${l[f].height}px` : `${c}px`};
 
-      .${u}-icon {
-        transform: rotate(${l ? 0 : 180}deg);
+      .${y}-icon {
+        transform: rotate(${o ? 0 : 180}deg);
       }
 
-      &:hover ${$} {
-        ${a} {
-          opacity: 1;
-        }
-
-        ${a}, ${p}:before {
+      &:hover ${b} {
+        ${p}, :before {
           transform: translateX(-2px);
+            opacity: 1;
         }
 
         &:hover {
-          ${a}, ${p}:before {
+          ${p}, :before {
             transform: translateX(0);
           }
         }
       }
     `}
   `
-), k = e.div(
-  ({ $direction: t, $collapsed: i }) => o`
+), I = e.div(
+  ({ $direction: t, $collapsed: i }) => r`
     position: relative;
     display: flex;
     flex-shrink: ${i ? 0 : 1};
     flex-grow: 1;
-    flex-direction: ${t === r.Horizontal ? "row" : "column"};
+    flex-direction: ${t === s.Horizontal ? "row" : "column"};
     align-items: stretch;
     min-width: 0;
     z-index: 1;
     overflow: hidden auto;
   `
-);
+), N = e.div`
+  align-items: center;
+  padding: 0 12px;
+`, W = e.div`
+  display: flex;
+  align-items: center;
+  padding: ${({ size: t }) => t === a.Medium ? "6px" : "8px"};
+`, D = e(g)`
+  justify-content: ${({ iconOnly: t }) => t ? "center" : "flex-start"};
+  overflow: hidden;
+  min-width: 0;
+  padding: 0 ${({ size: t = a.Medium }) => [a.Large, a.Medium].includes(t) ? 12 : d[t].itemListMarginLeft}px;
+
+  & span {
+    gap: ${({ size: t = a.Medium }) => d[t].gap}px;
+  }
+`, H = e(x)`
+  display: inline-flex;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: all 0.3s ease;
+`, O = e(x)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  max-width: 240px;
+`, R = e(h)`
+  transition: width 0.1s ease-in;
+  transform: translateX(-10px);
+`;
 export {
-  $ as Expand,
-  a as ExpandIcon,
-  p as ExpandNotch,
-  k as MiddleArea,
-  S as Nav,
-  y as StyledMenu,
-  A as Wrapper
+  N as DividerContainer,
+  b as Expand,
+  D as ExpandButton,
+  W as ExpandButtonContainer,
+  H as ExpandButtonText,
+  p as ExpandIcon,
+  R as ExpandTooltip,
+  I as MiddleArea,
+  C as Nav,
+  _ as StyledMenu,
+  O as TooltipLabel,
+  j as Wrapper
 };
 //# sourceMappingURL=NavBar.styles.js.map

package/build/esm/components/NavBar/NavBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.styles.js","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { NAV_BAR_CLASS, Directions, Transient, ZIndexes } from 'acinguiux-ds-react-base';\r\n\r\nimport { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\r\nimport Menu from '../Menu/Menu';\r\nimport { navBarSizes } from './NavBar.consts';\r\nimport { getItemsAlignment } from './utils/styleUtils';\r\nimport { IMenuProps } from '../Menu/Menu.types';\r\n\r\nconst StyledMenu = styled(Menu) <IMenuProps & Transient<INavBarProps, 'itemsAlignment'>>`\r\n  ${({ $itemsAlignment }) => css`\r\n    flex: 1 1 0;\r\n    justify-content: ${getItemsAlignment($itemsAlignment)};\r\n  `}\r\n`;\r\n\r\nconst ExpandNotch = styled.div(\r\n  ({ theme }) => css`\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    width: 12px;\r\n    height: 32px;\r\n    overflow: hidden;\r\n\r\n    &::before {\r\n      content: '';\r\n      right: 2px;\r\n      top: 2px;\r\n      position: absolute;\r\n      border-radius: 0 14px 14px 0;\r\n      background-color: ${theme.onSurface.surface.default.background};\r\n      box-shadow: ${theme.elevation.level1};\r\n      display: block;\r\n      width: 28px;\r\n      height: 28px;\r\n      transform: translateX(-12px);\r\n      transition: transform 0.2s ease-out;\r\n    }\r\n  `,\r\n);\r\n\r\nconst ExpandIcon = styled.div`\r\n  opacity: 0;\r\n  position: absolute;\r\n  left: 4px;\r\n  top: 4px;\r\n  width: 24px;\r\n  height: 24px;\r\n  padding: 2px;\r\n  transform: translateX(-6px);\r\n  transition: opacity 0.1s linear, transform 0.2s ease-out;\r\n`;\r\n\r\nconst Expand = styled.div(\r\n  ({ theme }) => css`\r\n    cursor: pointer;\r\n    position: absolute;\r\n    z-index: 2;\r\n    right: -12px;\r\n    top: 38px;\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 16px;\r\n\r\n    &:focus-visible {\r\n      outline: 3px solid ${theme.additional.focus.subtle};\r\n\r\n      ${ExpandIcon}, ${ExpandNotch}:before {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n      }\r\n    }\r\n  `,\r\n);\r\n\r\nconst Wrapper = styled.div<Transient<INavBarPropsWithReqSize, 'direction'>>(\r\n  ({ $direction, size }) => css`\r\n    position: relative;\r\n    height: ${$direction === Directions.Vertical ? '100%' : `${navBarSizes[size].height}px`};\r\n    width: ${$direction === Directions.Vertical ? `${navBarSizes[size].height}px` : '100%'};\r\n  `,\r\n);\r\n\r\nconst Nav = styled.header<Transient<INavBarPropsWithReqSize, 'direction' | 'elevation' | 'collapsed'>>(\r\n  ({ $direction, $elevation, $collapsed, theme, expandedWidth = 300, size }) => css`\r\n    z-index: ${ZIndexes.NAVBAR};\r\n    position: absolute;\r\n    display: flex;\r\n    flex-flow: ${$direction === Directions.Horizontal ? 'row' : 'column'} nowrap;\r\n    gap: 16px;\r\n    align-items: stretch;\r\n    height: 100%;\r\n    width: 100%;\r\n    box-shadow: ${$elevation ? theme.elevation.level1 : null};\r\n    color: ${theme.onSurface.surface.default.text.strong};\r\n    background-color: ${theme.onSurface.surface.default.background};\r\n    transition: width 0.3s ease-out;\r\n\r\n    ${$direction === Directions.Vertical &&\r\n    css`\r\n      width: ${$collapsed ? `${navBarSizes[size].height}px` : `${expandedWidth}px`};\r\n\r\n      .${NAV_BAR_CLASS}-icon {\r\n        transform: rotate(${$collapsed ? 0 : 180}deg);\r\n      }\r\n\r\n      &:hover ${Expand} {\r\n        ${ExpandIcon} {\r\n          opacity: 1;\r\n        }\r\n\r\n        ${ExpandIcon}, ${ExpandNotch}:before {\r\n          transform: translateX(-2px);\r\n        }\r\n\r\n        &:hover {\r\n          ${ExpandIcon}, ${ExpandNotch}:before {\r\n            transform: translateX(0);\r\n          }\r\n        }\r\n      }\r\n    `}\r\n  `,\r\n);\r\n\r\nconst MiddleArea = styled.div<Transient<INavBarProps, 'direction' | 'collapsed'>>(\r\n  ({ $direction, $collapsed }) => css`\r\n    position: relative;\r\n    display: flex;\r\n    flex-shrink: ${$collapsed ? 0 : 1};\r\n    flex-grow: 1;\r\n    flex-direction: ${$direction === Directions.Horizontal ? 'row' : 'column'};\r\n    align-items: stretch;\r\n    min-width: 0;\r\n    z-index: 1;\r\n    overflow: hidden auto;\r\n  `,\r\n);\r\n\r\nexport { Wrapper, Nav, MiddleArea, Expand, ExpandNotch, ExpandIcon, StyledMenu };\r\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","getItemsAlignment","ExpandNotch","theme","ExpandIcon","Expand","Wrapper","$direction","size","Directions","navBarSizes","Nav","$elevation","$collapsed","expandedWidth","ZIndexes","NAV_BAR_CLASS","MiddleArea"],"mappings":";;;;;AASM,MAAAA,IAAaC,EAAOC,CAAI;AAAA,IAC1B,CAAC,EAAE,iBAAAC,EAAsB,MAAAC;AAAA;AAAA,uBAENC,EAAkBF,CAAe,CAAC;AAAA,GACtD;AAAA,GAGGG,IAAcL,EAAO;AAAA,EACzB,CAAC,EAAE,OAAAM,EAAY,MAAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAcSG,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA,oBAChDA,EAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1C,GAEMC,IAAaP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYpBQ,IAASR,EAAO;AAAA,EACpB,CAAC,EAAE,OAAAM,EAAY,MAAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAWUG,EAAM,WAAW,MAAM,MAAM;AAAA;AAAA,QAEhDC,CAAU,KAAKF,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlC,GAEMI,IAAUT,EAAO;AAAA,EACrB,CAAC,EAAE,YAAAU,GAAY,MAAAC,EAAW,MAAAR;AAAA;AAAA,cAEdO,MAAeE,EAAW,WAAW,SAAS,GAAGC,EAAYF,CAAI,EAAE,MAAM,IAAI;AAAA,aAC9ED,MAAeE,EAAW,WAAW,GAAGC,EAAYF,CAAI,EAAE,MAAM,OAAO,MAAM;AAAA;AAE1F,GAEMG,IAAMd,EAAO;AAAA,EACjB,CAAC,EAAE,YAAAU,GAAY,YAAAK,GAAY,YAAAC,GAAY,OAAAV,GAAO,eAAAW,IAAgB,KAAK,MAAAN,EAAW,MAAAR;AAAA,eACjEe,EAAS,MAAM;AAAA;AAAA;AAAA,iBAGbR,MAAeE,EAAW,aAAa,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKtDG,IAAaT,EAAM,UAAU,SAAS,IAAI;AAAA,aAC/CA,EAAM,UAAU,QAAQ,QAAQ,KAAK,MAAM;AAAA,wBAChCA,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA;AAAA;AAAA,MAG5DI,MAAeE,EAAW,YAC5BT;AAAA,eACWa,IAAa,GAAGH,EAAYF,CAAI,EAAE,MAAM,OAAO,GAAGM,CAAa,IAAI;AAAA;AAAA,SAEzEE,CAAa;AAAA,4BACMH,IAAa,IAAI,GAAG;AAAA;AAAA;AAAA,gBAGhCR,CAAM;AAAA,UACZD,CAAU;AAAA;AAAA;AAAA;AAAA,UAIVA,CAAU,KAAKF,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,YAKxBE,CAAU,KAAKF,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,KAKjC;AAAA;AAEL,GAEMe,IAAapB,EAAO;AAAA,EACxB,CAAC,EAAE,YAAAU,GAAY,YAAAM,EAAiB,MAAAb;AAAA;AAAA;AAAA,mBAGfa,IAAa,IAAI,CAAC;AAAA;AAAA,sBAEfN,MAAeE,EAAW,aAAa,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAM7E;"}
+{"version":3,"file":"NavBar.styles.js","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { NAV_BAR_CLASS, Directions, Transient, ZIndexes, NavBarConsts, NavBarUtils, getFocusStyles, MenuConsts, Sizes } from 'acinguiux-ds-react-base';\n\nimport { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\nimport Menu from '../Menu/Menu';\nimport Button from '../Button/Button';\nimport Label from '../Text/components/Label/Label';\nimport Tooltip from '../Tooltip/Tooltip';\nimport { IMenuProps } from '../Menu/Menu.types';\n\nconst StyledMenu = styled(Menu) <IMenuProps & Transient<INavBarProps, 'itemsAlignment'>>`\n  ${({ $itemsAlignment }) => css`\n    flex: 1 1 0;\n    justify-content: ${NavBarUtils.getItemsAlignment($itemsAlignment)};\n    overflow: hidden auto;\n  `}\n`;\n\nconst ExpandIcon = styled.div`\n  position: absolute;\n  left: 4px;\n  top: 4px;\n  width: 28px;\n  height: 28px;\n  padding: 2px;\n  transform: translateX(-6px);\n  transition: opacity 0.1s linear, transform 0.2s ease-out;\n\n  svg {\n    fill: ${({ theme }) => theme.getLayer()['Text On Surface/Strong']};\n  }\n`;\n\nconst Expand = styled.button(\n  ({ theme }) => css`\n    cursor: pointer;\n    position: absolute;\n    z-index: 2;\n    right: -36px;\n    top: 50%;\n    width: 32px;\n    height: 32px;\n    border-radius: 16px;\n    border: none;\n    background-color: transparent;\n\n    &:focus-visible {\n      ${getFocusStyles(theme)};\n\n      ${ExpandIcon}, :before {\n        transform: translateX(0);\n      }\n    }\n  `,\n);\n\nconst getWrapperWidth = (direction: INavBarPropsWithReqSize['direction'], expandMode: INavBarPropsWithReqSize['expandMode'], size: INavBarPropsWithReqSize['size'], isCollapsed: boolean): string => {\n  if (direction === Directions.Vertical) {\n    return expandMode === 'auto_cover' && isCollapsed ? `${NavBarConsts.consts[size].height}px` : 'auto';\n  }\n\n  return '100%';\n};\n\nconst Wrapper = styled.div<Transient<INavBarPropsWithReqSize, 'direction' | 'expandMode'> & { isCollapsed: boolean }>(\n  ({ $direction, $expandMode, size, isCollapsed }) => css`\n    position: relative;\n    height: ${$direction === Directions.Vertical ? '100%' : `${NavBarConsts.consts[size].height}px`};\n    width: ${getWrapperWidth($direction, $expandMode, size, isCollapsed)};\n  `,\n);\n\ntype NavPropsKeys = 'direction' | 'elevation' | 'collapsed' | 'expandMode';\ntype NavProps = Transient<INavBarPropsWithReqSize, NavPropsKeys>;\n\nconst Nav = styled.header<NavProps>(\n  ({ $direction, $elevation, $collapsed, theme, expandedWidth = 300, size, $expandMode }) => css`\n    z-index: ${ZIndexes.NAVBAR};\n    position: ${$expandMode === 'auto_cover' && $collapsed ? 'absolute' : 'relative'};\n    display: flex;\n    flex-flow: ${$direction === Directions.Horizontal ? 'row' : 'column'} nowrap;\n    align-items: stretch;\n    height: 100%;\n    width: 100%;\n    box-shadow: ${$elevation ? theme.elevation.level1 : null};\n    color: ${theme.getLayer({})['Text On Surface/Strong']};\n    background-color: ${theme.getLayer({})['Background/Surface']};\n    transition: width 0.3s ease-out;\n\n    ${$direction === Directions.Vertical &&\n    css`\n      width: ${$collapsed ? `${NavBarConsts.consts[size].height}px` : `${expandedWidth}px`};\n\n      .${NAV_BAR_CLASS}-icon {\n        transform: rotate(${$collapsed ? 0 : 180}deg);\n      }\n\n      &:hover ${Expand} {\n        ${ExpandIcon}, :before {\n          transform: translateX(-2px);\n            opacity: 1;\n        }\n\n        &:hover {\n          ${ExpandIcon}, :before {\n            transform: translateX(0);\n          }\n        }\n      }\n    `}\n  `,\n);\n\nconst MiddleArea = styled.div<Transient<INavBarProps, 'direction' | 'collapsed'>>(\n  ({ $direction, $collapsed }) => css`\n    position: relative;\n    display: flex;\n    flex-shrink: ${$collapsed ? 0 : 1};\n    flex-grow: 1;\n    flex-direction: ${$direction === Directions.Horizontal ? 'row' : 'column'};\n    align-items: stretch;\n    min-width: 0;\n    z-index: 1;\n    overflow: hidden auto;\n  `,\n);\n\nconst DividerContainer = styled.div`\n  align-items: center;\n  padding: 0 12px;\n`;\n\nconst ExpandButtonContainer = styled.div<{ size?: Sizes }>`\n  display: flex;\n  align-items: center;\n  padding: ${({ size }) => size === Sizes.Medium ? '6px' : '8px'};\n`;\n\nconst ExpandButton = styled(Button)`\n  justify-content: ${({ iconOnly }) => iconOnly ? 'center' : 'flex-start'};\n  overflow: hidden;\n  min-width: 0;\n  padding: 0 ${({ size = Sizes.Medium }) => [Sizes.Large, Sizes.Medium].includes(size) ? 12 : MenuConsts.consts[size].itemListMarginLeft}px;\n\n  & span {\n    gap: ${({ size = Sizes.Medium }) => MenuConsts.consts[size].gap}px;\n  }\n`;\n\nconst ExpandButtonText = styled(Label)`\n  display: inline-flex;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  transition: all 0.3s ease;\n`;\n\nconst TooltipLabel = styled(Label)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  max-width: 240px;\n`;\n\nconst ExpandTooltip = styled(Tooltip)`\n  transition: width 0.1s ease-in;\n  transform: translateX(-10px);\n`;\n\nexport { Wrapper, Nav, MiddleArea, Expand, ExpandIcon, StyledMenu, DividerContainer, ExpandButton, ExpandButtonContainer, TooltipLabel, ExpandTooltip, ExpandButtonText };\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","NavBarUtils.getItemsAlignment","ExpandIcon","theme","Expand","getFocusStyles","getWrapperWidth","direction","expandMode","size","isCollapsed","Directions","NavBarConsts.consts","Wrapper","$direction","$expandMode","Nav","$elevation","$collapsed","expandedWidth","ZIndexes","NAV_BAR_CLASS","MiddleArea","DividerContainer","ExpandButtonContainer","Sizes","ExpandButton","Button","iconOnly","MenuConsts.consts","ExpandButtonText","Label","TooltipLabel","ExpandTooltip","Tooltip"],"mappings":"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"}