@teambit/ui-foundation.ui.side-bar 0.0.495 → 0.0.496

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,6 +7,8 @@ import { Tree, TreeNodeRenderer } from '@teambit/design.ui.tree';
7
7
  import { PayloadType, ScopePayload } from './payload-type';
8
8
  import { DefaultTreeNodeRenderer } from './default-tree-node-renderer';
9
9
 
10
+ const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
11
+
10
12
  type ComponentTreeProps = {
11
13
  components: ComponentModel[];
12
14
  TreeNode?: TreeNodeRenderer<PayloadType>;
@@ -17,10 +19,11 @@ export function ComponentTree({ components, isCollapsed, TreeNode = DefaultTreeN
17
19
  const { pathname } = useLocation();
18
20
 
19
21
  const activeComponent = useMemo(() => {
22
+ const componentUrlRegex = new RegExp(componentIdUrlRegex);
20
23
  const path = pathname?.startsWith('/') ? pathname.substring(1) : pathname;
24
+ const matcher = path.match(componentUrlRegex)?.[0]; // returns just the part that matches the componentId section without /~compositions etc.
21
25
  const active = components.find((x) => {
22
- // TODO - reuse logic from component.route.ts
23
- return path && path === x.id.fullName;
26
+ return matcher && matcher === x.id.fullName;
24
27
  });
25
28
  return active?.id.toString({ ignoreVersion: true });
26
29
  }, [components, pathname]);
@@ -75,6 +75,7 @@
75
75
 
76
76
  .componentEnvTooltip {
77
77
  font-size: var(--bit-p-xs);
78
+ max-width: unset !important; // override tippy's default max-width: 350px
78
79
  .componentEnvTitle {
79
80
  font-size: var(--bit-p-xxs, 12px);
80
81
  color: #c9c3f6;
@@ -27,13 +27,16 @@ const base_ui_graph_tree_inflate_paths_1 = require("@teambit/base-ui.graph.tree.
27
27
  const design_ui_tree_1 = require("@teambit/design.ui.tree");
28
28
  const payload_type_1 = require("./payload-type");
29
29
  const default_tree_node_renderer_1 = require("./default-tree-node-renderer");
30
+ const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
30
31
  function ComponentTree({ components, isCollapsed, TreeNode = default_tree_node_renderer_1.DefaultTreeNodeRenderer }) {
31
32
  const { pathname } = (0, base_ui_routing_routing_provider_1.useLocation)();
32
33
  const activeComponent = (0, react_1.useMemo)(() => {
34
+ var _a;
35
+ const componentUrlRegex = new RegExp(componentIdUrlRegex);
33
36
  const path = (pathname === null || pathname === void 0 ? void 0 : pathname.startsWith('/')) ? pathname.substring(1) : pathname;
37
+ const matcher = (_a = path.match(componentUrlRegex)) === null || _a === void 0 ? void 0 : _a[0]; // returns just the part that matches the componentId section without /~compositions etc.
34
38
  const active = components.find((x) => {
35
- // TODO - reuse logic from component.route.ts
36
- return path && path === x.id.fullName;
39
+ return matcher && matcher === x.id.fullName;
37
40
  });
38
41
  return active === null || active === void 0 ? void 0 : active.id.toString({ ignoreVersion: true });
39
42
  }, [components, pathname]);
@@ -1 +1 @@
1
- {"version":3,"file":"component-tree.js","sourceRoot":"","sources":["../../component-tree/component-tree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAuC;AACvC,gGAAwE;AACxE,kFAAiE;AACjE,gGAAyF;AACzF,4DAAiE;AACjE,iDAA2D;AAC3D,6EAAuE;AAQvE,SAAgB,aAAa,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,GAAG,oDAAuB,EAAsB;IAC/G,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,8CAAW,GAAE,CAAC;IAEnC,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACnC,MAAM,IAAI,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,CAAC,GAAG,CAAC,EAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC1E,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YACnC,6CAA6C;YAC7C,OAAO,IAAI,IAAI,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAG,IAAA,gDAAa,EAA8B,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEnH,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;QAE3C,IAAA,gDAAa,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,CAAC,CAAC;QACxB,8BAAC,qBAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC/F,CACP,CAAC;AACJ,CAAC;AA3BD,sCA2BC;AAED,SAAS,WAAW,CAAC,UAA4B;IAC/C,MAAM,UAAU,GAAG,IAAI,GAAG,CAAsB,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpH,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/E,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,2BAAY,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,UAAU,CAAC;AACpB,CAAC"}
1
+ {"version":3,"file":"component-tree.js","sourceRoot":"","sources":["../../component-tree/component-tree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAuC;AACvC,gGAAwE;AACxE,kFAAiE;AACjE,gGAAyF;AACzF,4DAAiE;AACjE,iDAA2D;AAC3D,6EAAuE;AAEvE,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAQ/C,SAAgB,aAAa,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,GAAG,oDAAuB,EAAsB;IAC/G,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,8CAAW,GAAE,CAAC;IAEnC,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QACnC,MAAM,iBAAiB,GAAG,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAAC;QAC1D,MAAM,IAAI,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,CAAC,GAAG,CAAC,EAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC1E,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,0CAAG,CAAC,CAAC,CAAC,CAAC,yFAAyF;QAC7I,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YACnC,OAAO,OAAO,IAAI,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;QAC9C,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAG,IAAA,gDAAa,EAA8B,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEnH,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;QAE3C,IAAA,gDAAa,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,CAAC,CAAC;QACxB,8BAAC,qBAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC/F,CACP,CAAC;AACJ,CAAC;AA5BD,sCA4BC;AAED,SAAS,WAAW,CAAC,UAA4B;IAC/C,MAAM,UAAU,GAAG,IAAI,GAAG,CAAsB,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpH,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/E,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,2BAAY,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,UAAU,CAAC;AACpB,CAAC"}
@@ -75,6 +75,7 @@
75
75
 
76
76
  .componentEnvTooltip {
77
77
  font-size: var(--bit-p-xs);
78
+ max-width: unset !important; // override tippy's default max-width: 350px
78
79
  .componentEnvTitle {
79
80
  font-size: var(--bit-p-xxs, 12px);
80
81
  color: #c9c3f6;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@teambit/ui-foundation.ui.side-bar",
3
- "version": "0.0.495",
3
+ "version": "0.0.496",
4
4
  "homepage": "https://bit.dev/teambit/ui-foundation/ui/side-bar",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.ui-foundation",
8
8
  "name": "ui/side-bar",
9
- "version": "0.0.495"
9
+ "version": "0.0.496"
10
10
  },
11
11
  "dependencies": {
12
12
  "classnames": "2.2.6",
@@ -18,10 +18,10 @@
18
18
  "@teambit/base-ui.routing.nav-link": "1.0.0",
19
19
  "@teambit/documenter.ui.separator": "4.1.1",
20
20
  "@teambit/evangelist.elements.icon": "1.0.2",
21
- "@teambit/base-ui.theme.colors": "1.0.0",
22
21
  "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
22
+ "@teambit/base-ui.theme.colors": "1.0.0",
23
23
  "@teambit/base-ui.graph.tree.tree-context": "1.0.0",
24
- "@teambit/design.ui.tree": "0.0.2",
24
+ "@teambit/design.ui.tree": "0.0.5",
25
25
  "@teambit/component.ui.deprecation-icon": "0.0.492",
26
26
  "@teambit/design.ui.tooltip": "0.0.352",
27
27
  "@teambit/envs.ui.env-icon": "0.0.485"