@activecollab/components 2.0.180 → 2.0.181

package/dist/cjs/components/Nav/Nav.js

@@ -28,7 +28,8 @@ var Nav = exports.Nav = function Nav(_ref) {
     onSelect = _ref.onSelect,
     className = _ref.className,
     _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "bold" : _ref$role;
+    role = _ref$role === void 0 ? "bold" : _ref$role,
+    targetId = _ref.targetId;
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
@@ -100,11 +101,13 @@ var Nav = exports.Nav = function Nav(_ref) {
     });
   }, [children]);
   var navAsSelect = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react.default.createElement(_Styles2.StyledNavAsSelect, null, /*#__PURE__*/_react.default.createElement("span", null, navItemNames[active]), /*#__PURE__*/_react.default.createElement(_ExpandSingle.ExpandSingle, {
+    return /*#__PURE__*/_react.default.createElement(_Styles2.StyledNavAsSelect, {
+      id: targetId
+    }, /*#__PURE__*/_react.default.createElement("span", null, navItemNames[active]), /*#__PURE__*/_react.default.createElement(_ExpandSingle.ExpandSingle, {
       expanded: moreOpened,
       fill: "currentColor"
     }));
-  }, [active, moreOpened, navItemNames]);
+  }, [active, moreOpened, navItemNames, targetId]);
   (0, _react.useEffect)(function () {
     if (!navRef.current || !wrapRef.current) return;
     if (childrenWidth >= parentWidth) {

package/dist/cjs/components/Nav/Nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_Styles2","_utils","_ExpandSingle","_Select","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","length","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","Nav","exports","_ref","_dimensions$width","_childDimensions$widt","children","_ref$alignment","alignment","onSelect","className","_ref$role","role","_useState","useState","_useState2","active","setActive","_useState3","_useState4","moreOpened","setMoreOpened","_useState5","_useState6","type","setType","setMoreOpen","useCallback","setMoreClose","navItemNames","useMemo","Children","toArray","map","item","_item$props","props","allOptions","index","id","navRef","useRef","wrapRef","dimensions","useResizeObserver","childDimensions","parentWidth","width","childWidth","_useState7","_useState8","childrenWidth","setChildrenWidth","useLayoutEffect","onClick","metaKey","ctrlKey","target","currentTarget","dataset","disabled","Number","onMoreOptionClick","forEach","child","navAsSelect","createElement","StyledNavAsSelect","ExpandSingle","expanded","fill","useEffect","current","StyledNav","classNames","$align","$role","ref","StyledNavList","element","cloneElement","StyledNavListItemMore","keys","indexOf","Select","selected","disabledInternalSort","options","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onChange","onSelectOpen","onSelectClose","displayName"],"sources":["../../../../src/components/Nav/Nav.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  FC,\n  ReactNode,\n  useState,\n  useRef,\n  useCallback,\n  useMemo,\n  Children,\n  cloneElement,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport { StyledNav, StyledNavAsSelect, StyledNavList } from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { Select } from \"../Select/Select\";\n\ntype NavType = \"inline\" | \"dropdown\";\nexport type NavAlignType = \"left\" | \"center\" | \"right\";\nexport type NavRoleType = \"bold\" | \"light\";\n\nexport interface INavProps {\n  children?: ReactElement<ItemProps>[];\n  /** Function for changing active navs. */\n  onSelect?: (index: number) => void;\n  /** Aligment of nav component. */\n  alignment?: NavAlignType;\n  /** CSS classes. */\n  className?: string;\n  /** Role of nav component. */\n  role?: NavRoleType;\n}\n\nexport const Nav: FC<INavProps> = ({\n  children,\n  alignment = \"left\",\n  onSelect,\n  className,\n  role = \"bold\",\n}) => {\n  const [active, setActive] = useState(0);\n  const [moreOpened, setMoreOpened] = useState(false);\n  const [type, setType] = useState<NavType>(\"inline\");\n\n  const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n  const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n  const navItemNames = useMemo(() => {\n    return children\n      ? (Children.toArray(children) as ReactElement<ItemProps>[]).map(\n          (item) => item?.props?.name\n        )\n      : [];\n  }, [children]);\n\n  const allOptions = useMemo(() => {\n    return navItemNames?.map((name, index) => {\n      return { id: index, name: name };\n    });\n  }, [navItemNames]);\n\n  const navRef = useRef<HTMLUListElement | null>(null);\n  const wrapRef = useRef<HTMLElement | null>(null);\n  const dimensions = useResizeObserver(wrapRef);\n  const childDimensions = useResizeObserver(navRef);\n\n  const parentWidth = dimensions?.width ?? 0;\n  const childWidth = childDimensions?.width ?? 0;\n\n  const [childrenWidth, setChildrenWidth] = useState(childWidth);\n\n  useLayoutEffect(() => {\n    if (type === \"inline\") setChildrenWidth(childWidth);\n  }, [childWidth, type]);\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n      if (e.metaKey || e.ctrlKey) {\n        return;\n      }\n      if (\n        e.target &&\n        e.currentTarget.dataset.index &&\n        !e.currentTarget.dataset.disabled\n      ) {\n        const index = Number(e.currentTarget.dataset.index);\n        setActive(index);\n        if (onSelect) {\n          onSelect(index);\n        }\n      }\n    },\n    [onSelect]\n  );\n\n  const onMoreOptionClick = useCallback(\n    (id) => {\n      setActive(id);\n      if (onSelect) {\n        onSelect(id);\n      }\n    },\n    [onSelect]\n  );\n\n  useMemo(() => {\n    Children.forEach(\n      children as ReactElement[],\n      (child: ReactElement, index) => {\n        if (child && child.props.active) {\n          setActive(index);\n        }\n      }\n    );\n  }, [children]);\n\n  const navAsSelect = useMemo(() => {\n    return (\n      <StyledNavAsSelect>\n        <span>{navItemNames[active]}</span>\n        <ExpandSingle expanded={moreOpened} fill=\"currentColor\" />\n      </StyledNavAsSelect>\n    );\n  }, [active, moreOpened, navItemNames]);\n\n  useEffect(() => {\n    if (!navRef.current || !wrapRef.current) return;\n\n    if (childrenWidth >= parentWidth) {\n      setType(\"dropdown\");\n    } else {\n      setType(\"inline\");\n    }\n  }, [childrenWidth, parentWidth]);\n\n  if (!children) return;\n\n  return (\n    <StyledNav\n      className={classNames(\"c-nav\", className)}\n      $align={alignment}\n      $role={role}\n      ref={wrapRef}\n    >\n      <StyledNavList ref={navRef}>\n        {type === \"inline\" &&\n          Children.toArray(children).map((child: ReactNode, index: number) => {\n            const element = child as ReactElement;\n            return cloneElement(element, {\n              active: index === active,\n              role,\n              onClick,\n              \"data-index\": index,\n              \"data-disabled\": element.props.disabled,\n            });\n          })}\n        {type === \"dropdown\" ? (\n          <StyledNavListItemMore\n            name=\"More\"\n            active={Array.from(navItemNames.keys()).indexOf(active) === -1}\n            role={role}\n          >\n            <Select\n              selected={active}\n              target={navAsSelect}\n              disabledInternalSort\n              options={allOptions}\n              type=\"single\"\n              mode=\"normal\"\n              forceCloseMenu\n              disableSearch\n              keepSameOptionsOrder\n              onChange={onMoreOptionClick}\n              onSelectOpen={setMoreOpen}\n              onSelectClose={setMoreClose}\n            />\n          </StyledNavListItemMore>\n        ) : null}\n      </StyledNavList>\n    </StyledNav>\n  );\n};\n\nNav.displayName = \"Nav\";\n"],"mappings":"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"}
+{"version":3,"file":"Nav.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_Styles2","_utils","_ExpandSingle","_Select","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","length","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","Nav","exports","_ref","_dimensions$width","_childDimensions$widt","children","_ref$alignment","alignment","onSelect","className","_ref$role","role","targetId","_useState","useState","_useState2","active","setActive","_useState3","_useState4","moreOpened","setMoreOpened","_useState5","_useState6","type","setType","setMoreOpen","useCallback","setMoreClose","navItemNames","useMemo","Children","toArray","map","item","_item$props","props","allOptions","index","id","navRef","useRef","wrapRef","dimensions","useResizeObserver","childDimensions","parentWidth","width","childWidth","_useState7","_useState8","childrenWidth","setChildrenWidth","useLayoutEffect","onClick","metaKey","ctrlKey","target","currentTarget","dataset","disabled","Number","onMoreOptionClick","forEach","child","navAsSelect","createElement","StyledNavAsSelect","ExpandSingle","expanded","fill","useEffect","current","StyledNav","classNames","$align","$role","ref","StyledNavList","element","cloneElement","StyledNavListItemMore","keys","indexOf","Select","selected","disabledInternalSort","options","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onChange","onSelectOpen","onSelectClose","displayName"],"sources":["../../../../src/components/Nav/Nav.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  FC,\n  ReactNode,\n  useState,\n  useRef,\n  useCallback,\n  useMemo,\n  Children,\n  cloneElement,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport { StyledNav, StyledNavAsSelect, StyledNavList } from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { Select } from \"../Select/Select\";\n\ntype NavType = \"inline\" | \"dropdown\";\nexport type NavAlignType = \"left\" | \"center\" | \"right\";\nexport type NavRoleType = \"bold\" | \"light\";\n\nexport interface INavProps {\n  children?: ReactElement<ItemProps>[];\n  /** Function for changing active navs. */\n  onSelect?: (index: number) => void;\n  /** Aligment of nav component. */\n  alignment?: NavAlignType;\n  /** CSS classes. */\n  className?: string;\n  /** Role of nav component. */\n  role?: NavRoleType;\n  /** Target id */\n  targetId?: string;\n}\n\nexport const Nav: FC<INavProps> = ({\n  children,\n  alignment = \"left\",\n  onSelect,\n  className,\n  role = \"bold\",\n  targetId,\n}) => {\n  const [active, setActive] = useState(0);\n  const [moreOpened, setMoreOpened] = useState(false);\n  const [type, setType] = useState<NavType>(\"inline\");\n\n  const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n  const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n  const navItemNames = useMemo(() => {\n    return children\n      ? (Children.toArray(children) as ReactElement<ItemProps>[]).map(\n          (item) => item?.props?.name\n        )\n      : [];\n  }, [children]);\n\n  const allOptions = useMemo(() => {\n    return navItemNames?.map((name, index) => {\n      return { id: index, name: name };\n    });\n  }, [navItemNames]);\n\n  const navRef = useRef<HTMLUListElement | null>(null);\n  const wrapRef = useRef<HTMLElement | null>(null);\n  const dimensions = useResizeObserver(wrapRef);\n  const childDimensions = useResizeObserver(navRef);\n\n  const parentWidth = dimensions?.width ?? 0;\n  const childWidth = childDimensions?.width ?? 0;\n\n  const [childrenWidth, setChildrenWidth] = useState(childWidth);\n\n  useLayoutEffect(() => {\n    if (type === \"inline\") setChildrenWidth(childWidth);\n  }, [childWidth, type]);\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n      if (e.metaKey || e.ctrlKey) {\n        return;\n      }\n      if (\n        e.target &&\n        e.currentTarget.dataset.index &&\n        !e.currentTarget.dataset.disabled\n      ) {\n        const index = Number(e.currentTarget.dataset.index);\n        setActive(index);\n        if (onSelect) {\n          onSelect(index);\n        }\n      }\n    },\n    [onSelect]\n  );\n\n  const onMoreOptionClick = useCallback(\n    (id) => {\n      setActive(id);\n      if (onSelect) {\n        onSelect(id);\n      }\n    },\n    [onSelect]\n  );\n\n  useMemo(() => {\n    Children.forEach(\n      children as ReactElement[],\n      (child: ReactElement, index) => {\n        if (child && child.props.active) {\n          setActive(index);\n        }\n      }\n    );\n  }, [children]);\n\n  const navAsSelect = useMemo(() => {\n    return (\n      <StyledNavAsSelect id={targetId}>\n        <span>{navItemNames[active]}</span>\n        <ExpandSingle expanded={moreOpened} fill=\"currentColor\" />\n      </StyledNavAsSelect>\n    );\n  }, [active, moreOpened, navItemNames, targetId]);\n\n  useEffect(() => {\n    if (!navRef.current || !wrapRef.current) return;\n\n    if (childrenWidth >= parentWidth) {\n      setType(\"dropdown\");\n    } else {\n      setType(\"inline\");\n    }\n  }, [childrenWidth, parentWidth]);\n\n  if (!children) return;\n\n  return (\n    <StyledNav\n      className={classNames(\"c-nav\", className)}\n      $align={alignment}\n      $role={role}\n      ref={wrapRef}\n    >\n      <StyledNavList ref={navRef}>\n        {type === \"inline\" &&\n          Children.toArray(children).map((child: ReactNode, index: number) => {\n            const element = child as ReactElement;\n            return cloneElement(element, {\n              active: index === active,\n              role,\n              onClick,\n              \"data-index\": index,\n              \"data-disabled\": element.props.disabled,\n            });\n          })}\n        {type === \"dropdown\" ? (\n          <StyledNavListItemMore\n            name=\"More\"\n            active={Array.from(navItemNames.keys()).indexOf(active) === -1}\n            role={role}\n          >\n            <Select\n              selected={active}\n              target={navAsSelect}\n              disabledInternalSort\n              options={allOptions}\n              type=\"single\"\n              mode=\"normal\"\n              forceCloseMenu\n              disableSearch\n              keepSameOptionsOrder\n              onChange={onMoreOptionClick}\n              onSelectOpen={setMoreOpen}\n              onSelectClose={setMoreClose}\n            />\n          </StyledNavListItemMore>\n        ) : null}\n      </StyledNavList>\n    </StyledNav>\n  );\n};\n\nNav.displayName = \"Nav\";\n"],"mappings":"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"}

package/dist/esm/components/Nav/Nav.d.ts

@@ -12,6 +12,8 @@ export interface INavProps {
     className?: string;
     /** Role of nav component. */
     role?: NavRoleType;
+    /** Target id */
+    targetId?: string;
 }
 export declare const Nav: FC<INavProps>;
 //# sourceMappingURL=Nav.d.ts.map

package/dist/esm/components/Nav/Nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,YAAY,EACZ,EAAE,EAUH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQxC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;IACrC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,SAAS,CAoJ7B,CAAC"}
+{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,YAAY,EACZ,EAAE,EAUH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQxC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;IACrC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,SAAS,CAqJ7B,CAAC"}

package/dist/esm/components/Nav/Nav.js

@@ -12,7 +12,8 @@ export const Nav = _ref => {
     alignment = "left",
     onSelect,
     className,
-    role = "bold"
+    role = "bold",
+    targetId
   } = _ref;
   const [active, setActive] = useState(0);
   const [moreOpened, setMoreOpened] = useState(false);
@@ -69,11 +70,13 @@ export const Nav = _ref => {
     });
   }, [children]);
   const navAsSelect = useMemo(() => {
-    return /*#__PURE__*/React.createElement(StyledNavAsSelect, null, /*#__PURE__*/React.createElement("span", null, navItemNames[active]), /*#__PURE__*/React.createElement(ExpandSingle, {
+    return /*#__PURE__*/React.createElement(StyledNavAsSelect, {
+      id: targetId
+    }, /*#__PURE__*/React.createElement("span", null, navItemNames[active]), /*#__PURE__*/React.createElement(ExpandSingle, {
       expanded: moreOpened,
       fill: "currentColor"
     }));
-  }, [active, moreOpened, navItemNames]);
+  }, [active, moreOpened, navItemNames, targetId]);
   useEffect(() => {
     if (!navRef.current || !wrapRef.current) return;
     if (childrenWidth >= parentWidth) {

package/dist/esm/components/Nav/Nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.js","names":["React","useState","useRef","useCallback","useMemo","Children","cloneElement","useEffect","useLayoutEffect","classNames","StyledNavListItemMore","StyledNav","StyledNavAsSelect","StyledNavList","useResizeObserver","ExpandSingle","Select","Nav","_ref","_dimensions$width","_childDimensions$widt","children","alignment","onSelect","className","role","active","setActive","moreOpened","setMoreOpened","type","setType","setMoreOpen","setMoreClose","navItemNames","toArray","map","item","_item$props","props","name","allOptions","index","id","navRef","wrapRef","dimensions","childDimensions","parentWidth","width","childWidth","childrenWidth","setChildrenWidth","onClick","e","metaKey","ctrlKey","target","currentTarget","dataset","disabled","Number","onMoreOptionClick","forEach","child","navAsSelect","createElement","expanded","fill","current","$align","$role","ref","element","Array","from","keys","indexOf","selected","disabledInternalSort","options","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onChange","onSelectOpen","onSelectClose","displayName"],"sources":["../../../../src/components/Nav/Nav.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  FC,\n  ReactNode,\n  useState,\n  useRef,\n  useCallback,\n  useMemo,\n  Children,\n  cloneElement,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport { StyledNav, StyledNavAsSelect, StyledNavList } from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { Select } from \"../Select/Select\";\n\ntype NavType = \"inline\" | \"dropdown\";\nexport type NavAlignType = \"left\" | \"center\" | \"right\";\nexport type NavRoleType = \"bold\" | \"light\";\n\nexport interface INavProps {\n  children?: ReactElement<ItemProps>[];\n  /** Function for changing active navs. */\n  onSelect?: (index: number) => void;\n  /** Aligment of nav component. */\n  alignment?: NavAlignType;\n  /** CSS classes. */\n  className?: string;\n  /** Role of nav component. */\n  role?: NavRoleType;\n}\n\nexport const Nav: FC<INavProps> = ({\n  children,\n  alignment = \"left\",\n  onSelect,\n  className,\n  role = \"bold\",\n}) => {\n  const [active, setActive] = useState(0);\n  const [moreOpened, setMoreOpened] = useState(false);\n  const [type, setType] = useState<NavType>(\"inline\");\n\n  const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n  const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n  const navItemNames = useMemo(() => {\n    return children\n      ? (Children.toArray(children) as ReactElement<ItemProps>[]).map(\n          (item) => item?.props?.name\n        )\n      : [];\n  }, [children]);\n\n  const allOptions = useMemo(() => {\n    return navItemNames?.map((name, index) => {\n      return { id: index, name: name };\n    });\n  }, [navItemNames]);\n\n  const navRef = useRef<HTMLUListElement | null>(null);\n  const wrapRef = useRef<HTMLElement | null>(null);\n  const dimensions = useResizeObserver(wrapRef);\n  const childDimensions = useResizeObserver(navRef);\n\n  const parentWidth = dimensions?.width ?? 0;\n  const childWidth = childDimensions?.width ?? 0;\n\n  const [childrenWidth, setChildrenWidth] = useState(childWidth);\n\n  useLayoutEffect(() => {\n    if (type === \"inline\") setChildrenWidth(childWidth);\n  }, [childWidth, type]);\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n      if (e.metaKey || e.ctrlKey) {\n        return;\n      }\n      if (\n        e.target &&\n        e.currentTarget.dataset.index &&\n        !e.currentTarget.dataset.disabled\n      ) {\n        const index = Number(e.currentTarget.dataset.index);\n        setActive(index);\n        if (onSelect) {\n          onSelect(index);\n        }\n      }\n    },\n    [onSelect]\n  );\n\n  const onMoreOptionClick = useCallback(\n    (id) => {\n      setActive(id);\n      if (onSelect) {\n        onSelect(id);\n      }\n    },\n    [onSelect]\n  );\n\n  useMemo(() => {\n    Children.forEach(\n      children as ReactElement[],\n      (child: ReactElement, index) => {\n        if (child && child.props.active) {\n          setActive(index);\n        }\n      }\n    );\n  }, [children]);\n\n  const navAsSelect = useMemo(() => {\n    return (\n      <StyledNavAsSelect>\n        <span>{navItemNames[active]}</span>\n        <ExpandSingle expanded={moreOpened} fill=\"currentColor\" />\n      </StyledNavAsSelect>\n    );\n  }, [active, moreOpened, navItemNames]);\n\n  useEffect(() => {\n    if (!navRef.current || !wrapRef.current) return;\n\n    if (childrenWidth >= parentWidth) {\n      setType(\"dropdown\");\n    } else {\n      setType(\"inline\");\n    }\n  }, [childrenWidth, parentWidth]);\n\n  if (!children) return;\n\n  return (\n    <StyledNav\n      className={classNames(\"c-nav\", className)}\n      $align={alignment}\n      $role={role}\n      ref={wrapRef}\n    >\n      <StyledNavList ref={navRef}>\n        {type === \"inline\" &&\n          Children.toArray(children).map((child: ReactNode, index: number) => {\n            const element = child as ReactElement;\n            return cloneElement(element, {\n              active: index === active,\n              role,\n              onClick,\n              \"data-index\": index,\n              \"data-disabled\": element.props.disabled,\n            });\n          })}\n        {type === \"dropdown\" ? (\n          <StyledNavListItemMore\n            name=\"More\"\n            active={Array.from(navItemNames.keys()).indexOf(active) === -1}\n            role={role}\n          >\n            <Select\n              selected={active}\n              target={navAsSelect}\n              disabledInternalSort\n              options={allOptions}\n              type=\"single\"\n              mode=\"normal\"\n              forceCloseMenu\n              disableSearch\n              keepSameOptionsOrder\n              onChange={onMoreOptionClick}\n              onSelectOpen={setMoreOpen}\n              onSelectClose={setMoreClose}\n            />\n          </StyledNavListItemMore>\n        ) : null}\n      </StyledNavList>\n    </StyledNav>\n  );\n};\n\nNav.displayName = \"Nav\";\n"],"mappings":"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"}
+{"version":3,"file":"Nav.js","names":["React","useState","useRef","useCallback","useMemo","Children","cloneElement","useEffect","useLayoutEffect","classNames","StyledNavListItemMore","StyledNav","StyledNavAsSelect","StyledNavList","useResizeObserver","ExpandSingle","Select","Nav","_ref","_dimensions$width","_childDimensions$widt","children","alignment","onSelect","className","role","targetId","active","setActive","moreOpened","setMoreOpened","type","setType","setMoreOpen","setMoreClose","navItemNames","toArray","map","item","_item$props","props","name","allOptions","index","id","navRef","wrapRef","dimensions","childDimensions","parentWidth","width","childWidth","childrenWidth","setChildrenWidth","onClick","e","metaKey","ctrlKey","target","currentTarget","dataset","disabled","Number","onMoreOptionClick","forEach","child","navAsSelect","createElement","expanded","fill","current","$align","$role","ref","element","Array","from","keys","indexOf","selected","disabledInternalSort","options","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onChange","onSelectOpen","onSelectClose","displayName"],"sources":["../../../../src/components/Nav/Nav.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  FC,\n  ReactNode,\n  useState,\n  useRef,\n  useCallback,\n  useMemo,\n  Children,\n  cloneElement,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport { StyledNav, StyledNavAsSelect, StyledNavList } from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { Select } from \"../Select/Select\";\n\ntype NavType = \"inline\" | \"dropdown\";\nexport type NavAlignType = \"left\" | \"center\" | \"right\";\nexport type NavRoleType = \"bold\" | \"light\";\n\nexport interface INavProps {\n  children?: ReactElement<ItemProps>[];\n  /** Function for changing active navs. */\n  onSelect?: (index: number) => void;\n  /** Aligment of nav component. */\n  alignment?: NavAlignType;\n  /** CSS classes. */\n  className?: string;\n  /** Role of nav component. */\n  role?: NavRoleType;\n  /** Target id */\n  targetId?: string;\n}\n\nexport const Nav: FC<INavProps> = ({\n  children,\n  alignment = \"left\",\n  onSelect,\n  className,\n  role = \"bold\",\n  targetId,\n}) => {\n  const [active, setActive] = useState(0);\n  const [moreOpened, setMoreOpened] = useState(false);\n  const [type, setType] = useState<NavType>(\"inline\");\n\n  const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n  const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n  const navItemNames = useMemo(() => {\n    return children\n      ? (Children.toArray(children) as ReactElement<ItemProps>[]).map(\n          (item) => item?.props?.name\n        )\n      : [];\n  }, [children]);\n\n  const allOptions = useMemo(() => {\n    return navItemNames?.map((name, index) => {\n      return { id: index, name: name };\n    });\n  }, [navItemNames]);\n\n  const navRef = useRef<HTMLUListElement | null>(null);\n  const wrapRef = useRef<HTMLElement | null>(null);\n  const dimensions = useResizeObserver(wrapRef);\n  const childDimensions = useResizeObserver(navRef);\n\n  const parentWidth = dimensions?.width ?? 0;\n  const childWidth = childDimensions?.width ?? 0;\n\n  const [childrenWidth, setChildrenWidth] = useState(childWidth);\n\n  useLayoutEffect(() => {\n    if (type === \"inline\") setChildrenWidth(childWidth);\n  }, [childWidth, type]);\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n      if (e.metaKey || e.ctrlKey) {\n        return;\n      }\n      if (\n        e.target &&\n        e.currentTarget.dataset.index &&\n        !e.currentTarget.dataset.disabled\n      ) {\n        const index = Number(e.currentTarget.dataset.index);\n        setActive(index);\n        if (onSelect) {\n          onSelect(index);\n        }\n      }\n    },\n    [onSelect]\n  );\n\n  const onMoreOptionClick = useCallback(\n    (id) => {\n      setActive(id);\n      if (onSelect) {\n        onSelect(id);\n      }\n    },\n    [onSelect]\n  );\n\n  useMemo(() => {\n    Children.forEach(\n      children as ReactElement[],\n      (child: ReactElement, index) => {\n        if (child && child.props.active) {\n          setActive(index);\n        }\n      }\n    );\n  }, [children]);\n\n  const navAsSelect = useMemo(() => {\n    return (\n      <StyledNavAsSelect id={targetId}>\n        <span>{navItemNames[active]}</span>\n        <ExpandSingle expanded={moreOpened} fill=\"currentColor\" />\n      </StyledNavAsSelect>\n    );\n  }, [active, moreOpened, navItemNames, targetId]);\n\n  useEffect(() => {\n    if (!navRef.current || !wrapRef.current) return;\n\n    if (childrenWidth >= parentWidth) {\n      setType(\"dropdown\");\n    } else {\n      setType(\"inline\");\n    }\n  }, [childrenWidth, parentWidth]);\n\n  if (!children) return;\n\n  return (\n    <StyledNav\n      className={classNames(\"c-nav\", className)}\n      $align={alignment}\n      $role={role}\n      ref={wrapRef}\n    >\n      <StyledNavList ref={navRef}>\n        {type === \"inline\" &&\n          Children.toArray(children).map((child: ReactNode, index: number) => {\n            const element = child as ReactElement;\n            return cloneElement(element, {\n              active: index === active,\n              role,\n              onClick,\n              \"data-index\": index,\n              \"data-disabled\": element.props.disabled,\n            });\n          })}\n        {type === \"dropdown\" ? (\n          <StyledNavListItemMore\n            name=\"More\"\n            active={Array.from(navItemNames.keys()).indexOf(active) === -1}\n            role={role}\n          >\n            <Select\n              selected={active}\n              target={navAsSelect}\n              disabledInternalSort\n              options={allOptions}\n              type=\"single\"\n              mode=\"normal\"\n              forceCloseMenu\n              disableSearch\n              keepSameOptionsOrder\n              onChange={onMoreOptionClick}\n              onSelectOpen={setMoreOpen}\n              onSelectClose={setMoreClose}\n            />\n          </StyledNavListItemMore>\n        ) : null}\n      </StyledNavList>\n    </StyledNav>\n  );\n};\n\nNav.displayName = \"Nav\";\n"],"mappings":"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"}

package/dist/index.js

@@ -15683,7 +15683,8 @@
       onSelect = _ref.onSelect,
       className = _ref.className,
       _ref$role = _ref.role,
-      role = _ref$role === void 0 ? "bold" : _ref$role;
+      role = _ref$role === void 0 ? "bold" : _ref$role,
+      targetId = _ref.targetId;
     var _useState = React.useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       active = _useState2[0],
@@ -15755,11 +15756,13 @@
       });
     }, [children]);
     var navAsSelect = React.useMemo(function () {
-      return /*#__PURE__*/React__default["default"].createElement(StyledNavAsSelect, null, /*#__PURE__*/React__default["default"].createElement("span", null, navItemNames[active]), /*#__PURE__*/React__default["default"].createElement(ExpandSingle, {
+      return /*#__PURE__*/React__default["default"].createElement(StyledNavAsSelect, {
+        id: targetId
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, navItemNames[active]), /*#__PURE__*/React__default["default"].createElement(ExpandSingle, {
         expanded: moreOpened,
         fill: "currentColor"
       }));
-    }, [active, moreOpened, navItemNames]);
+    }, [active, moreOpened, navItemNames, targetId]);
     React.useEffect(function () {
       if (!navRef.current || !wrapRef.current) return;
       if (childrenWidth >= parentWidth) {