@teambit/component 0.0.881 → 0.0.883

package/dist/ui/menu/mobile-menu-nav.js

@@ -1,137 +1,99 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.array.sort.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MobileMenuNav = MobileMenuNav;
-
 function _objectWithoutProperties2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
   _objectWithoutProperties2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _extends2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
   _extends2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _react() {
   const data = _interopRequireWildcard(require("react"));
-
   _react = function () {
     return data;
   };
-
   return data;
 }
-
 function _reactRouterDom() {
   const data = require("react-router-dom");
-
   _reactRouterDom = function () {
     return data;
   };
-
   return data;
 }
-
 function _classnames() {
   const data = _interopRequireDefault(require("classnames"));
-
   _classnames = function () {
     return data;
   };
-
   return data;
 }
-
 function _designElements() {
   const data = require("@teambit/design.elements.icon");
-
   _designElements = function () {
     return data;
   };
-
   return data;
 }
-
 function _designInputs() {
   const data = require("@teambit/design.inputs.dropdown");
-
   _designInputs = function () {
     return data;
   };
-
   return data;
 }
-
 function _baseReactNavigation() {
   const data = require("@teambit/base-react.navigation.link");
-
   _baseReactNavigation = function () {
     return data;
   };
-
   return data;
 }
-
 function _topBarNav() {
   const data = require("../top-bar-nav");
-
   _topBarNav = function () {
     return data;
   };
-
   return data;
 }
-
 function _menuModule() {
   const data = _interopRequireDefault(require("./menu.module.scss"));
-
   _menuModule = function () {
     return data;
   };
-
   return data;
 }
-
 function _mobileMenuNavModule() {
   const data = _interopRequireDefault(require("./mobile-menu-nav.module.scss"));
-
   _mobileMenuNavModule = function () {
     return data;
   };
-
   return data;
 }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function MobileMenuNav({
   navigationSlot,
   widgetSlot,
   className
 }) {
   const totalSlots = (0, _react().useMemo)(() => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)], [navigationSlot, widgetSlot]);
-  return /*#__PURE__*/_react().default.createElement(_designInputs().Dropdown // @ts-ignore - mismatch between @types/react
+  return /*#__PURE__*/_react().default.createElement(_designInputs().Dropdown
+  // @ts-ignore - mismatch between @types/react
   , {
     placeholder: /*#__PURE__*/_react().default.createElement(Placeholder, {
       slots: totalSlots
@@ -150,7 +112,6 @@ function MobileMenuNav({
     }), typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName);
   })));
 }
-
 function sortFn([, {
   order: first
 }], [, {
@@ -159,14 +120,14 @@ function sortFn([, {
   // 0  - equal
   // <0 - first < second
   // >0 - first > second
+
   return (first !== null && first !== void 0 ? first : 0) - (second !== null && second !== void 0 ? second : 0);
 }
-
 function Placeholder(_ref) {
   let {
-    slots
-  } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["slots"]);
+      slots
+    } = _ref,
+    rest = (0, _objectWithoutProperties2().default)(_ref, ["slots"]);
   return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
     className: _mobileMenuNavModule().default.placeholder
   }), slots.map(([id, menuItem]) => /*#__PURE__*/_react().default.createElement(ShowWhenMatch, {
@@ -177,7 +138,6 @@ function Placeholder(_ref) {
     of: "fat-arrow-down"
   }));
 }
-
 function ShowWhenMatch({
   href,
   children,
@@ -191,7 +151,6 @@ function ShowWhenMatch({
   if (!isMatch) return null;
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
 }
-
 function useLinkMatch(href, {
   caseSensitive,
   exact
@@ -199,12 +158,10 @@ function useLinkMatch(href, {
   const location = (0, _baseReactNavigation().useLocation)();
   let pathname = (location === null || location === void 0 ? void 0 : location.pathname) || '/';
   let destination = (0, _reactRouterDom().useResolvedPath)(href).pathname;
-
   if (!caseSensitive) {
     pathname = pathname.toLowerCase();
     destination = destination.toLowerCase();
   }
-
   return destination === pathname || !exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/';
 }
 

package/dist/ui/menu/mobile-menu-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","totalSlots","useMemo","toArray","sort","sortFn","classnames","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","rest","placeholder","href","exact","ShowWhenMatch","caseSensitive","end","isMatch","useLinkMatch","location","useLocation","pathname","destination","useResolvedPath","toLowerCase","startsWith","charAt","length"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { useResolvedPath } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport mobileStyles from './mobile-menu-nav.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MobileMenuNav({\n  navigationSlot,\n  widgetSlot,\n  className,\n}: {\n  navigationSlot: OrderedNavigationSlot;\n  widgetSlot: OrderedNavigationSlot;\n  className?: string;\n}) {\n  const totalSlots = useMemo(\n    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],\n    [navigationSlot, widgetSlot]\n  );\n\n  return (\n    <Dropdown\n      // @ts-ignore - mismatch between @types/react\n      placeholder={<Placeholder slots={totalSlots} />}\n      className={classnames(styles.navigation, styles.mobileNav, className)}\n      dropClass={mobileStyles.mobileMenu}\n    >\n      <nav>\n        <Icon of=\"x-thick\" className={mobileStyles.close} />\n        {totalSlots.map(([id, menuItem]) => {\n          return (\n            <TopBarNav\n              key={id}\n              {...menuItem.props}\n              className={mobileStyles.mobileMenuLink}\n              activeClassName={mobileStyles.active}\n            >\n              {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n            </TopBarNav>\n          );\n        })}\n      </nav>\n    </Dropdown>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\ntype PlaceholderProps = {\n  slots: [string, NavPlugin][];\n  baseUrl?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Placeholder({ slots, ...rest }: PlaceholderProps) {\n  return (\n    <div {...rest} className={mobileStyles.placeholder}>\n      {slots.map(([id, menuItem]) => (\n        <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>\n          {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n        </ShowWhenMatch>\n      ))}\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n\nfunction ShowWhenMatch({\n  href,\n  children,\n  caseSensitive,\n  end: exact,\n}: {\n  href: string;\n  children: ReactNode;\n  caseSensitive?: boolean;\n  end?: boolean;\n}) {\n  const isMatch = useLinkMatch(href, { caseSensitive, exact });\n  if (!isMatch) return null;\n  return <>{children}</>;\n}\n\nfunction useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {\n  const location = useLocation();\n  let pathname = location?.pathname || '/';\n  let destination = useResolvedPath(href).pathname;\n\n  if (!caseSensitive) {\n    pathname = pathname.toLowerCase();\n    destination = destination.toLowerCase();\n  }\n\n  return (\n    destination === pathname ||\n    (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","totalSlots","useMemo","toArray","sort","sortFn","classnames","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","rest","placeholder","href","exact","ShowWhenMatch","caseSensitive","end","isMatch","useLinkMatch","location","useLocation","pathname","destination","useResolvedPath","toLowerCase","startsWith","charAt","length"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { useResolvedPath } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport mobileStyles from './mobile-menu-nav.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MobileMenuNav({\n  navigationSlot,\n  widgetSlot,\n  className,\n}: {\n  navigationSlot: OrderedNavigationSlot;\n  widgetSlot: OrderedNavigationSlot;\n  className?: string;\n}) {\n  const totalSlots = useMemo(\n    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],\n    [navigationSlot, widgetSlot]\n  );\n\n  return (\n    <Dropdown\n      // @ts-ignore - mismatch between @types/react\n      placeholder={<Placeholder slots={totalSlots} />}\n      className={classnames(styles.navigation, styles.mobileNav, className)}\n      dropClass={mobileStyles.mobileMenu}\n    >\n      <nav>\n        <Icon of=\"x-thick\" className={mobileStyles.close} />\n        {totalSlots.map(([id, menuItem]) => {\n          return (\n            <TopBarNav\n              key={id}\n              {...menuItem.props}\n              className={mobileStyles.mobileMenuLink}\n              activeClassName={mobileStyles.active}\n            >\n              {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n            </TopBarNav>\n          );\n        })}\n      </nav>\n    </Dropdown>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\ntype PlaceholderProps = {\n  slots: [string, NavPlugin][];\n  baseUrl?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Placeholder({ slots, ...rest }: PlaceholderProps) {\n  return (\n    <div {...rest} className={mobileStyles.placeholder}>\n      {slots.map(([id, menuItem]) => (\n        <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>\n          {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n        </ShowWhenMatch>\n      ))}\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n\nfunction ShowWhenMatch({\n  href,\n  children,\n  caseSensitive,\n  end: exact,\n}: {\n  href: string;\n  children: ReactNode;\n  caseSensitive?: boolean;\n  end?: boolean;\n}) {\n  const isMatch = useLinkMatch(href, { caseSensitive, exact });\n  if (!isMatch) return null;\n  return <>{children}</>;\n}\n\nfunction useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {\n  const location = useLocation();\n  let pathname = location?.pathname || '/';\n  let destination = useResolvedPath(href).pathname;\n\n  if (!caseSensitive) {\n    pathname = pathname.toLowerCase();\n    destination = destination.toLowerCase();\n  }\n\n  return (\n    destination === pathname ||\n    (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')\n  );\n}\n"],"mappings":"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"}

package/dist/ui/top-bar-nav/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _topBarNav = require("./top-bar-nav");
-
 Object.keys(_topBarNav).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _topBarNav[key]) return;

package/dist/ui/top-bar-nav/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './top-bar-nav';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './top-bar-nav';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/ui/top-bar-nav/top-bar-nav.js

@@ -1,101 +1,77 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 require("core-js/modules/es.regexp.exec.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TopBarNav = TopBarNav;
-
 function _extends2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
   _extends2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _objectWithoutProperties2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
   _objectWithoutProperties2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _react() {
   const data = _interopRequireDefault(require("react"));
-
   _react = function () {
     return data;
   };
-
   return data;
 }
-
 function _classnames() {
   const data = _interopRequireDefault(require("classnames"));
-
   _classnames = function () {
     return data;
   };
-
   return data;
 }
-
 function _reactRouterDom() {
   const data = require("react-router-dom");
-
   _reactRouterDom = function () {
     return data;
   };
-
   return data;
 }
-
 function _baseReactNavigation() {
   const data = require("@teambit/base-react.navigation.link");
-
   _baseReactNavigation = function () {
     return data;
   };
-
   return data;
 }
-
 function _topBarNavModule() {
   const data = _interopRequireDefault(require("./top-bar-nav.module.scss"));
-
   _topBarNavModule = function () {
     return data;
   };
-
   return data;
 }
-
 function TopBarNav(_ref) {
   let {
-    href,
-    className,
-    activeClassName,
-    children,
-    displayName
-  } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children", "displayName"]);
+      href,
+      className,
+      activeClassName,
+      children,
+      displayName
+    } = _ref,
+    rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children", "displayName"]);
   const {
     search
   } = (0, _reactRouterDom().useLocation)(); // sticky query params
+
   // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.
   // it is used for component page nav link widgets (code, aspects etc),
   // but not for regular menu links (overview, compositions, etc).
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
   const preventPassingDisplayNameToLink = displayName;
   const target = `${href}${search}`;
   return /*#__PURE__*/_react().default.createElement(_baseReactNavigation().Link, (0, _extends2().default)({}, rest, {

package/dist/ui/top-bar-nav/top-bar-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["TopBarNav","href","className","activeClassName","children","displayName","rest","search","useLocation","preventPassingDisplayNameToLink","target","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = `${href}${search}`;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,SAASA,SAAT,OAAyG;EAAA,IAAtF;IAAEC,IAAF;IAAQC,SAAR;IAAmBC,eAAnB;IAAoCC,QAApC;IAA8CC;EAA9C,CAAsF;EAAA,IAAxBC,IAAwB;EAC9G,MAAM;IAAEC;EAAF,IAAa,IAAAC,6BAAA,GAAnB,CAD8G,CAC5E;EAElC;EACA;EACA;EACA;;EACA,MAAMC,+BAA+B,GAAGJ,WAAxC;EAEA,MAAMK,MAAM,GAAI,GAAET,IAAK,GAAEM,MAAO,EAAhC;EAEA,oBACE,+BAAC,2BAAD,+BACMD,IADN;IAEE,SAAS,EAAE,IAAAK,qBAAA,EAAWT,SAAX,EAAsBU,0BAAA,CAAOC,UAA7B,CAFb;IAGE,eAAe,EAAE,IAAAF,qBAAA,EAAWR,eAAX,EAA4BS,0BAAA,CAAOE,MAAnC,CAHnB;IAIE,IAAI,EAAEJ;EAJR,iBAME,4CAAMN,QAAN,CANF,CADF;AAUD"}
+{"version":3,"names":["TopBarNav","href","className","activeClassName","children","displayName","rest","search","useLocation","preventPassingDisplayNameToLink","target","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = `${href}${search}`;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,SAASA,SAAS,OAAuF;EAAA,IAAtF;MAAEC,IAAI;MAAEC,SAAS;MAAEC,eAAe;MAAEC,QAAQ;MAAEC;IAAqC,CAAC;IAAtBC,IAAI;EAC1F,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,6BAAW,GAAE,CAAC,CAAC;;EAElC;EACA;EACA;EACA;EACA,MAAMC,+BAA+B,GAAGJ,WAAW;EAEnD,MAAMK,MAAM,GAAI,GAAET,IAAK,GAAEM,MAAO,EAAC;EAEjC,oBACE,+BAAC,2BAAI,+BACCD,IAAI;IACR,SAAS,EAAE,IAAAK,qBAAU,EAACT,SAAS,EAAEU,0BAAM,CAACC,UAAU,CAAE;IACpD,eAAe,EAAE,IAAAF,qBAAU,EAACR,eAAe,EAAES,0BAAM,CAACE,MAAM,CAAE;IAC5D,IAAI,EAAEJ;EAAO,iBAEb,4CAAMN,QAAQ,CAAO,CAChB;AAEX"}

package/dist/ui/use-component-from-location.js

@@ -1,27 +1,20 @@
 "use strict";
 
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.regexp.exec.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useIdFromLocation = useIdFromLocation;
-
 function _reactRouterDom() {
   const data = require("react-router-dom");
-
   _reactRouterDom = function () {
     return data;
   };
-
   return data;
 }
-
 /** component url is comprised of letters, numbers, "_", "-", "/" but should not include trailing "/", and should not include "~" */
 const componentRegex = /^[\w/-]*[\w-]/;
-
 function useIdFromLocation(url) {
   const params = (0, _reactRouterDom().useParams)();
   const splat = url || params['*'];
@@ -30,11 +23,9 @@ function useIdFromLocation(url) {
   const hasScope = maybeOrgWithScope.split('.').length > 1;
   const fullNameFromUrl = hasScope ? maybeFullName.join('/') : splat;
   let scope;
-
   if (hasScope) {
     scope = maybeOrgWithScope;
   }
-
   const match = componentRegex.exec(fullNameFromUrl);
   if (!(match !== null && match !== void 0 && match[0])) return undefined;
   if (scope) return `${scope}/${match[0]}`;

package/dist/ui/use-component-from-location.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentRegex","useIdFromLocation","url","params","useParams","splat","undefined","maybeOrgWithScope","maybeFullName","split","hasScope","length","fullNameFromUrl","join","scope","match","exec"],"sources":["use-component-from-location.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\n\n/** component url is comprised of letters, numbers, \"_\", \"-\", \"/\" but should not include trailing \"/\", and should not include \"~\" */\nconst componentRegex = /^[\\w/-]*[\\w-]/;\n\nexport function useIdFromLocation(url?: string): string | undefined {\n  const params = useParams();\n  const splat = url || params['*'];\n  if (!splat) return undefined;\n\n  const [maybeOrgWithScope, ...maybeFullName] = splat.split('/');\n  const hasScope = maybeOrgWithScope.split('.').length > 1;\n  const fullNameFromUrl = hasScope ? maybeFullName.join('/') : splat;\n  let scope: string | undefined;\n  if (hasScope) {\n    scope = maybeOrgWithScope;\n  }\n  const match = componentRegex.exec(fullNameFromUrl);\n  if (!match?.[0]) return undefined;\n  if (scope) return `${scope}/${match[0]}`;\n  return match[0];\n}\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;AACA,MAAMA,cAAc,GAAG,eAAvB;;AAEO,SAASC,iBAAT,CAA2BC,GAA3B,EAA6D;EAClE,MAAMC,MAAM,GAAG,IAAAC,2BAAA,GAAf;EACA,MAAMC,KAAK,GAAGH,GAAG,IAAIC,MAAM,CAAC,GAAD,CAA3B;EACA,IAAI,CAACE,KAAL,EAAY,OAAOC,SAAP;EAEZ,MAAM,CAACC,iBAAD,EAAoB,GAAGC,aAAvB,IAAwCH,KAAK,CAACI,KAAN,CAAY,GAAZ,CAA9C;EACA,MAAMC,QAAQ,GAAGH,iBAAiB,CAACE,KAAlB,CAAwB,GAAxB,EAA6BE,MAA7B,GAAsC,CAAvD;EACA,MAAMC,eAAe,GAAGF,QAAQ,GAAGF,aAAa,CAACK,IAAd,CAAmB,GAAnB,CAAH,GAA6BR,KAA7D;EACA,IAAIS,KAAJ;;EACA,IAAIJ,QAAJ,EAAc;IACZI,KAAK,GAAGP,iBAAR;EACD;;EACD,MAAMQ,KAAK,GAAGf,cAAc,CAACgB,IAAf,CAAoBJ,eAApB,CAAd;EACA,IAAI,EAACG,KAAD,aAACA,KAAD,eAACA,KAAK,CAAG,CAAH,CAAN,CAAJ,EAAiB,OAAOT,SAAP;EACjB,IAAIQ,KAAJ,EAAW,OAAQ,GAAEA,KAAM,IAAGC,KAAK,CAAC,CAAD,CAAI,EAA5B;EACX,OAAOA,KAAK,CAAC,CAAD,CAAZ;AACD"}
+{"version":3,"names":["componentRegex","useIdFromLocation","url","params","useParams","splat","undefined","maybeOrgWithScope","maybeFullName","split","hasScope","length","fullNameFromUrl","join","scope","match","exec"],"sources":["use-component-from-location.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\n\n/** component url is comprised of letters, numbers, \"_\", \"-\", \"/\" but should not include trailing \"/\", and should not include \"~\" */\nconst componentRegex = /^[\\w/-]*[\\w-]/;\n\nexport function useIdFromLocation(url?: string): string | undefined {\n  const params = useParams();\n  const splat = url || params['*'];\n  if (!splat) return undefined;\n\n  const [maybeOrgWithScope, ...maybeFullName] = splat.split('/');\n  const hasScope = maybeOrgWithScope.split('.').length > 1;\n  const fullNameFromUrl = hasScope ? maybeFullName.join('/') : splat;\n  let scope: string | undefined;\n  if (hasScope) {\n    scope = maybeOrgWithScope;\n  }\n  const match = componentRegex.exec(fullNameFromUrl);\n  if (!match?.[0]) return undefined;\n  if (scope) return `${scope}/${match[0]}`;\n  return match[0];\n}\n"],"mappings":";;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;AACA,MAAMA,cAAc,GAAG,eAAe;AAE/B,SAASC,iBAAiB,CAACC,GAAY,EAAsB;EAClE,MAAMC,MAAM,GAAG,IAAAC,2BAAS,GAAE;EAC1B,MAAMC,KAAK,GAAGH,GAAG,IAAIC,MAAM,CAAC,GAAG,CAAC;EAChC,IAAI,CAACE,KAAK,EAAE,OAAOC,SAAS;EAE5B,MAAM,CAACC,iBAAiB,EAAE,GAAGC,aAAa,CAAC,GAAGH,KAAK,CAACI,KAAK,CAAC,GAAG,CAAC;EAC9D,MAAMC,QAAQ,GAAGH,iBAAiB,CAACE,KAAK,CAAC,GAAG,CAAC,CAACE,MAAM,GAAG,CAAC;EACxD,MAAMC,eAAe,GAAGF,QAAQ,GAAGF,aAAa,CAACK,IAAI,CAAC,GAAG,CAAC,GAAGR,KAAK;EAClE,IAAIS,KAAyB;EAC7B,IAAIJ,QAAQ,EAAE;IACZI,KAAK,GAAGP,iBAAiB;EAC3B;EACA,MAAMQ,KAAK,GAAGf,cAAc,CAACgB,IAAI,CAACJ,eAAe,CAAC;EAClD,IAAI,EAACG,KAAK,aAALA,KAAK,eAALA,KAAK,CAAG,CAAC,CAAC,GAAE,OAAOT,SAAS;EACjC,IAAIQ,KAAK,EAAE,OAAQ,GAAEA,KAAM,IAAGC,KAAK,CAAC,CAAC,CAAE,EAAC;EACxC,OAAOA,KAAK,CAAC,CAAC,CAAC;AACjB"}

package/dist/ui/use-component-query.js

@@ -1,107 +1,76 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.componentOverviewFields = exports.componentIdFields = exports.componentFields = void 0;
 exports.useComponentQuery = useComponentQuery;
-
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
   _defineProperty2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _objectWithoutProperties2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
   _objectWithoutProperties2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _react() {
   const data = require("react");
-
   _react = function () {
     return data;
   };
-
   return data;
 }
-
 function _client() {
   const data = require("@apollo/client");
-
   _client = function () {
     return data;
   };
-
   return data;
 }
-
 function _uiFoundationUiHooks() {
   const data = require("@teambit/ui-foundation.ui.hooks.use-data-query");
-
   _uiFoundationUiHooks = function () {
     return data;
   };
-
   return data;
 }
-
 function _componentId() {
   const data = require("@teambit/component-id");
-
   _componentId = function () {
     return data;
   };
-
   return data;
 }
-
 function _componentDescriptor() {
   const data = require("@teambit/component-descriptor");
-
   _componentDescriptor = function () {
     return data;
   };
-
   return data;
 }
-
 function _componentModel() {
   const data = require("./component-model");
-
   _componentModel = function () {
     return data;
   };
-
   return data;
 }
-
 function _componentError() {
   const data = require("./component-error");
-
   _componentError = function () {
     return data;
   };
-
   return data;
 }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const componentIdFields = (0, _client().gql)`
   fragment componentIdFields on ComponentID {
     name
@@ -239,45 +208,38 @@ const SUB_COMPONENT_REMOVED = (0, _client().gql)`
   }
   ${componentIdFields}
 `;
-
 /** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
 function useComponentQuery(componentId, host, filters) {
   var _data$getHost;
-
   const idRef = (0, _react().useRef)(componentId);
   idRef.current = componentId;
-
   const _useDataQuery = (0, _uiFoundationUiHooks().useDataQuery)(GET_COMPONENT, {
-    variables: _objectSpread({
-      id: componentId,
-      extensionId: host
-    }, (filters === null || filters === void 0 ? void 0 : filters.log) || {})
-  }),
-        {
-    data,
-    error,
-    loading,
-    subscribeToMore
-  } = _useDataQuery,
-        rest = (0, _objectWithoutProperties2().default)(_useDataQuery, ["data", "error", "loading", "subscribeToMore"]);
-
+      variables: _objectSpread({
+        id: componentId,
+        extensionId: host
+      }, (filters === null || filters === void 0 ? void 0 : filters.log) || {})
+    }),
+    {
+      data,
+      error,
+      loading,
+      subscribeToMore
+    } = _useDataQuery,
+    rest = (0, _objectWithoutProperties2().default)(_useDataQuery, ["data", "error", "loading", "subscribeToMore"]);
   (0, _react().useEffect)(() => {
     // @TODO @Kutner fix subscription for scope
     if (host !== 'teambit.workspace/workspace') {
       return () => {};
     }
-
     const unsubAddition = subscribeToMore({
       document: SUB_SUBSCRIPTION_ADDED,
       updateQuery: (prev, {
         subscriptionData
       }) => {
         var _prev$getHost, _subscriptionData$dat, _subscriptionData$dat2;
-
         const prevComponent = prev === null || prev === void 0 ? void 0 : (_prev$getHost = prev.getHost) === null || _prev$getHost === void 0 ? void 0 : _prev$getHost.get;
         const addedComponent = subscriptionData === null || subscriptionData === void 0 ? void 0 : (_subscriptionData$dat = subscriptionData.data) === null || _subscriptionData$dat === void 0 ? void 0 : (_subscriptionData$dat2 = _subscriptionData$dat.componentAdded) === null || _subscriptionData$dat2 === void 0 ? void 0 : _subscriptionData$dat2.component;
         if (!addedComponent || prevComponent) return prev;
-
         if (idRef.current === addedComponent.id.name) {
           return _objectSpread(_objectSpread({}, prev), {}, {
             getHost: _objectSpread(_objectSpread({}, prev.getHost), {}, {
@@ -285,7 +247,6 @@ function useComponentQuery(componentId, host, filters) {
             })
           });
         }
-
         return prev;
       }
     });
@@ -295,13 +256,10 @@ function useComponentQuery(componentId, host, filters) {
         subscriptionData
       }) => {
         var _prev$getHost2, _subscriptionData$dat3, _subscriptionData$dat4;
-
         if (!subscriptionData.data) return prev;
         const prevComponent = prev === null || prev === void 0 ? void 0 : (_prev$getHost2 = prev.getHost) === null || _prev$getHost2 === void 0 ? void 0 : _prev$getHost2.get;
         const updatedComponent = subscriptionData === null || subscriptionData === void 0 ? void 0 : (_subscriptionData$dat3 = subscriptionData.data) === null || _subscriptionData$dat3 === void 0 ? void 0 : (_subscriptionData$dat4 = _subscriptionData$dat3.componentChanged) === null || _subscriptionData$dat4 === void 0 ? void 0 : _subscriptionData$dat4.component;
-
         const isUpdated = updatedComponent && _componentId().ComponentID.isEqualObj(prevComponent === null || prevComponent === void 0 ? void 0 : prevComponent.id, updatedComponent === null || updatedComponent === void 0 ? void 0 : updatedComponent.id);
-
         if (isUpdated) {
           return _objectSpread(_objectSpread({}, prev), {}, {
             getHost: _objectSpread(_objectSpread({}, prev.getHost), {}, {
@@ -309,7 +267,6 @@ function useComponentQuery(componentId, host, filters) {
             })
           });
         }
-
         return prev;
       }
     });
@@ -319,13 +276,11 @@ function useComponentQuery(componentId, host, filters) {
         subscriptionData
       }) => {
         var _prev$getHost3, _subscriptionData$dat5, _subscriptionData$dat6;
-
         if (!subscriptionData.data) return prev;
         const prevComponent = prev === null || prev === void 0 ? void 0 : (_prev$getHost3 = prev.getHost) === null || _prev$getHost3 === void 0 ? void 0 : _prev$getHost3.get;
         const removedIds = subscriptionData === null || subscriptionData === void 0 ? void 0 : (_subscriptionData$dat5 = subscriptionData.data) === null || _subscriptionData$dat5 === void 0 ? void 0 : (_subscriptionData$dat6 = _subscriptionData$dat5.componentRemoved) === null || _subscriptionData$dat6 === void 0 ? void 0 : _subscriptionData$dat6.componentIds;
         if (!prevComponent || !(removedIds !== null && removedIds !== void 0 && removedIds.length)) return prev;
         const isRemoved = removedIds.some(removedId => _componentId().ComponentID.isEqualObj(removedId, prevComponent.id));
-
         if (isRemoved) {
           return _objectSpread(_objectSpread({}, prev), {}, {
             getHost: _objectSpread(_objectSpread({}, prev.getHost), {}, {
@@ -333,7 +288,6 @@ function useComponentQuery(componentId, host, filters) {
             })
           });
         }
-
         return prev;
       }
     });
@@ -353,9 +307,7 @@ function useComponentQuery(componentId, host, filters) {
         });
       })
     };
-
     const id = rawComponent && _componentId().ComponentID.fromObject(rawComponent.id);
-
     return _objectSpread({
       componentDescriptor: id ? _componentDescriptor().ComponentDescriptor.fromObject({
         id: id.toString(),