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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/{__preview-1643340137110.js → __preview-1645586567752.js} +0 -0
  2. package/component-tree/component-tree.tsx +11 -5
  3. package/component-tree/component-view/component-view.module.scss +1 -0
  4. package/component-tree/payload-type.tsx +2 -1
  5. package/dist/component-tree/component-tree.js +9 -4
  6. package/dist/component-tree/component-tree.js.map +1 -1
  7. package/dist/component-tree/component-view/component-view.module.scss +1 -0
  8. package/dist/component-tree/payload-type.d.ts +2 -1
  9. package/dist/component-tree/payload-type.js.map +1 -1
  10. package/package-tar/teambit-ui-foundation.ui.side-bar-0.0.498.tgz +0 -0
  11. package/package.json +9 -8
  12. package/package-tar/teambit-ui-foundation.ui.side-bar-0.0.495.tgz +0 -0
package/component-tree/component-tree.tsx CHANGED
@@ -4,9 +4,12 @@ import { useLocation } from '@teambit/base-ui.routing.routing-provider';
4
4
  import { indentStyle } from '@teambit/base-ui.graph.tree.indent';
5
5
  import { inflateToTree, attachPayload } from '@teambit/base-ui.graph.tree.inflate-paths';
6
6
  import { Tree, TreeNodeRenderer } from '@teambit/design.ui.tree';
7
+ import { TreeContextProvider } from '@teambit/base-ui.graph.tree.tree-context';
7
8
  import { PayloadType, ScopePayload } from './payload-type';
8
9
  import { DefaultTreeNodeRenderer } from './default-tree-node-renderer';
9
10
 
11
+ const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
12
+
10
13
  type ComponentTreeProps = {
11
14
  components: ComponentModel[];
12
15
  TreeNode?: TreeNodeRenderer<PayloadType>;
@@ -17,10 +20,11 @@ export function ComponentTree({ components, isCollapsed, TreeNode = DefaultTreeN
17
20
  const { pathname } = useLocation();
18
21
 
19
22
  const activeComponent = useMemo(() => {
23
+ const componentUrlRegex = new RegExp(componentIdUrlRegex);
20
24
  const path = pathname?.startsWith('/') ? pathname.substring(1) : pathname;
25
+ const matcher = path.match(componentUrlRegex)?.[0]; // returns just the part that matches the componentId section without /~compositions etc.
21
26
  const active = components.find((x) => {
22
- // TODO - reuse logic from component.route.ts
23
- return path && path === x.id.fullName;
27
+ return matcher && matcher === x.id.fullName;
24
28
  });
25
29
  return active?.id.toString({ ignoreVersion: true });
26
30
  }, [components, pathname]);
@@ -36,9 +40,11 @@ export function ComponentTree({ components, isCollapsed, TreeNode = DefaultTreeN
36
40
  }, [components]);
37
41
 
38
42
  return (
39
- <div style={indentStyle(1)}>
40
- <Tree TreeNode={TreeNode} activePath={activeComponent} tree={rootNode} isCollapsed={isCollapsed} />
41
- </div>
43
+ <TreeContextProvider>
44
+ <div style={indentStyle(1)}>
45
+ <Tree TreeNode={TreeNode} activePath={activeComponent} tree={rootNode} isCollapsed={isCollapsed} />
46
+ </div>
47
+ </TreeContextProvider>
42
48
  );
43
49
  }
44
50
 
package/component-tree/component-view/component-view.module.scss CHANGED
@@ -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/component-tree/payload-type.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ComponentModel } from '@teambit/component';
2
+ import { LaneModel } from '@teambit/lanes.ui.lanes';
2
3
 
3
4
  export class ScopePayload {
4
5
  get isScope() {
@@ -6,4 +7,4 @@ export class ScopePayload {
6
7
  }
7
8
  }
8
9
 
9
- export type PayloadType = ComponentModel | ScopePayload | undefined;
10
+ export type PayloadType = ComponentModel | ScopePayload | LaneModel | undefined;
package/dist/component-tree/component-tree.js CHANGED
@@ -25,15 +25,19 @@ const base_ui_routing_routing_provider_1 = require("@teambit/base-ui.routing.rou
25
25
  const base_ui_graph_tree_indent_1 = require("@teambit/base-ui.graph.tree.indent");
26
26
  const base_ui_graph_tree_inflate_paths_1 = require("@teambit/base-ui.graph.tree.inflate-paths");
27
27
  const design_ui_tree_1 = require("@teambit/design.ui.tree");
28
+ const base_ui_graph_tree_tree_context_1 = require("@teambit/base-ui.graph.tree.tree-context");
28
29
  const payload_type_1 = require("./payload-type");
29
30
  const default_tree_node_renderer_1 = require("./default-tree-node-renderer");
31
+ const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
30
32
  function ComponentTree({ components, isCollapsed, TreeNode = default_tree_node_renderer_1.DefaultTreeNodeRenderer }) {
31
33
  const { pathname } = (0, base_ui_routing_routing_provider_1.useLocation)();
32
34
  const activeComponent = (0, react_1.useMemo)(() => {
35
+ var _a;
36
+ const componentUrlRegex = new RegExp(componentIdUrlRegex);
33
37
  const path = (pathname === null || pathname === void 0 ? void 0 : pathname.startsWith('/')) ? pathname.substring(1) : pathname;
38
+ 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
39
  const active = components.find((x) => {
35
- // TODO - reuse logic from component.route.ts
36
- return path && path === x.id.fullName;
40
+ return matcher && matcher === x.id.fullName;
37
41
  });
38
42
  return active === null || active === void 0 ? void 0 : active.id.toString({ ignoreVersion: true });
39
43
  }, [components, pathname]);
@@ -43,8 +47,9 @@ function ComponentTree({ components, isCollapsed, TreeNode = default_tree_node_r
43
47
  (0, base_ui_graph_tree_inflate_paths_1.attachPayload)(tree, payloadMap);
44
48
  return tree;
45
49
  }, [components]);
46
- return (react_1.default.createElement("div", { style: (0, base_ui_graph_tree_indent_1.indentStyle)(1) },
47
- react_1.default.createElement(design_ui_tree_1.Tree, { TreeNode: TreeNode, activePath: activeComponent, tree: rootNode, isCollapsed: isCollapsed })));
50
+ return (react_1.default.createElement(base_ui_graph_tree_tree_context_1.TreeContextProvider, null,
51
+ react_1.default.createElement("div", { style: (0, base_ui_graph_tree_indent_1.indentStyle)(1) },
52
+ react_1.default.createElement(design_ui_tree_1.Tree, { TreeNode: TreeNode, activePath: activeComponent, tree: rootNode, isCollapsed: isCollapsed }))));
48
53
  }
49
54
  exports.ComponentTree = ComponentTree;
50
55
  function calcPayload(components) {
package/dist/component-tree/component-tree.js.map CHANGED
@@ -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":"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"}
package/dist/component-tree/component-view/component-view.module.scss CHANGED
@@ -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/dist/component-tree/payload-type.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ComponentModel } from '@teambit/component';
2
+ import { LaneModel } from '@teambit/lanes.ui.lanes';
2
3
  export declare class ScopePayload {
3
4
  get isScope(): boolean;
4
5
  }
5
- export declare type PayloadType = ComponentModel | ScopePayload | undefined;
6
+ export declare type PayloadType = ComponentModel | ScopePayload | LaneModel | undefined;
package/dist/component-tree/payload-type.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"payload-type.js","sourceRoot":"","sources":["../../component-tree/payload-type.tsx"],"names":[],"mappings":";;;AAEA,MAAa,YAAY;IACvB,IAAI,OAAO;QACT,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAJD,oCAIC"}
1
+ {"version":3,"file":"payload-type.js","sourceRoot":"","sources":["../../component-tree/payload-type.tsx"],"names":[],"mappings":";;;AAGA,MAAa,YAAY;IACvB,IAAI,OAAO;QACT,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAJD,oCAIC"}
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.498",
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.498"
10
10
  },
11
11
  "dependencies": {
12
12
  "classnames": "2.2.6",
@@ -14,22 +14,23 @@
14
14
  "core-js": "^3.0.0",
15
15
  "@teambit/base-ui.graph.tree.indent": "1.0.0",
16
16
  "@teambit/base-ui.graph.tree.inflate-paths": "1.0.0",
17
+ "@teambit/base-ui.graph.tree.tree-context": "1.0.0",
17
18
  "@teambit/base-ui.routing.routing-provider": "1.0.0",
18
19
  "@teambit/base-ui.routing.nav-link": "1.0.0",
19
20
  "@teambit/documenter.ui.separator": "4.1.1",
20
21
  "@teambit/evangelist.elements.icon": "1.0.2",
21
22
  "@teambit/base-ui.theme.colors": "1.0.0",
22
23
  "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
23
- "@teambit/base-ui.graph.tree.tree-context": "1.0.0",
24
- "@teambit/design.ui.tree": "0.0.2",
25
- "@teambit/component.ui.deprecation-icon": "0.0.492",
24
+ "@teambit/design.ui.tree": "0.0.5",
25
+ "@teambit/lanes.ui.lanes": "0.0.1",
26
+ "@teambit/component.ui.deprecation-icon": "0.0.493",
26
27
  "@teambit/design.ui.tooltip": "0.0.352",
27
- "@teambit/envs.ui.env-icon": "0.0.485"
28
+ "@teambit/envs.ui.env-icon": "0.0.486"
28
29
  },
29
30
  "devDependencies": {
30
31
  "@types/react": "^17.0.8",
31
32
  "@types/classnames": "2.2.11",
32
- "@types/mocha": "5.2.7",
33
+ "@types/mocha": "9.1.0",
33
34
  "@types/testing-library__jest-dom": "5.9.5",
34
35
  "@babel/runtime": "7.12.18",
35
36
  "@types/jest": "^26.0.0",
@@ -53,7 +54,7 @@
53
54
  },
54
55
  "devDependencies": {
55
56
  "@teambit/legacy": "-",
56
- "@types/mocha": "5.2.7",
57
+ "@types/mocha": "9.1.0",
57
58
  "@types/testing-library__jest-dom": "5.9.5",
58
59
  "@babel/runtime": "7.12.18",
59
60
  "@types/jest": "^26.0.0",