@teambit/react.ui.component-highlighter 0.0.513 → 0.2.0

package/ignore-highlighter.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 
+/** name of ignore attribute */
 export const excludeHighlighterAttrName = 'data-ignore-component-highlight';
 
-/** select elements matching the exclusion pattern */
+/** selector for elements with the ignore attribute */
 export const excludeHighlighterSelector = `[${excludeHighlighterAttrName}]`;
 
-/** elements with these attributes will be ignored by the automatic highlighter */
+/** highlighter will exclude elements with this attribute */
 export const excludeHighlighterAtt = { [excludeHighlighterAttrName]: true };
 
-/** elements under this element will be ignored by the automatic highlighter */
+/** children of this element will be excluded by the automatic highlighter */
 export function ExcludeHighlighter(props: React.HTMLAttributes<HTMLDivElement>) {
   return <div {...props} {...excludeHighlighterAtt} />;
 }
+
+/** name of skip attribute */
+export const skipHighlighterAttrName = 'data-skip-component-highlight';
+/** highlighter will skip (ignore) elements with these attributes */
+export const skipHighlighterAttr = { [skipHighlighterAttrName]: true };
+/** selector for elements with the skip attribute */
+export const skipHighlighterSelector = `[${skipHighlighterAttrName}]`;

package/index.ts

@@ -13,8 +13,9 @@ export type { ElementHighlighterProps, Placement, HighlightClasses } from './ele
 export {
   ExcludeHighlighter,
   excludeHighlighterAtt,
-  excludeHighlighterSelector,
   excludeHighlighterAttrName,
+  skipHighlighterAttr,
+  skipHighlighterAttrName,
 } from './ignore-highlighter';
 
 export type { MatchRule } from './rule-matcher';

package/label/component-strip.compositions.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentStrip } from './component-strip';
+import { MockButton, MockSnap } from '../mock-component';
+
+export const ComponentStripPreview = () => {
+  return (
+    <div style={{ fontFamily: 'sans-serif', padding: 8 }}>
+      <ComponentStrip component={MockSnap} />
+      <br />
+      <ComponentStrip component={MockButton} />
+    </div>
+  );
+};

package/label/component-strip.module.scss

@@ -7,6 +7,7 @@ $gap: 0.125em;
 
   border-radius: $borderRadius;
   box-shadow: var(--bit-highlighter-shadow);
+  white-space: nowrap;
 
   > * {
     padding: 0 0.5em;
@@ -47,3 +48,21 @@ $gap: 0.125em;
     }
   }
 }
+
+.nameBlock {
+  display: flex;
+
+  .version {
+    // leave room for 9 digits + 3 "."
+    max-width: 13ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    transition: max-width 480ms;
+
+    &:hover {
+      max-width: 61ch;
+    }
+  }
+}

package/label/component-strip.tsx

@@ -27,9 +27,11 @@ export const ComponentStrip = forwardRef(function ComponentStrip(
       {!parsedId && <LabelBlock link={homepage}>{id}</LabelBlock>}
       {parsedId && <LabelBlock link={ScopeUrl.toUrl(parsedId.scope)}>{parsedId.scope}</LabelBlock>}
       {parsedId && (
-        <LabelBlock link={componentLink}>
-          {parsedId.fullName}
-          {parsedId.version && parsedId.version !== 'latest' && `@${parsedId.version}`}
+        <LabelBlock link={componentLink} className={styles.nameBlock}>
+          <span>{parsedId.fullName}</span>
+          {parsedId.version && parsedId.version !== 'latest' && (
+            <span className={styles.version}>@{parsedId.version}</span>
+          )}
         </LabelBlock>
       )}
       {children}
@@ -37,10 +39,10 @@ export const ComponentStrip = forwardRef(function ComponentStrip(
   );
 });
 
-function LabelBlock({ link, children }: { link?: string; children: ReactNode }) {
+function LabelBlock({ link, children, className }: { link?: string; children: ReactNode; className?: string }) {
   const Comp = link ? NativeLink : 'span';
   return (
-    <Comp href={link} external={!!link}>
+    <Comp href={link} external={!!link} className={className}>
       {children}
     </Comp>
   );

package/label/label-container.tsx

@@ -7,10 +7,13 @@ import {
   flip as flipMiddleware,
   shift,
   autoUpdate,
+  hide,
 } from '@floating-ui/react-dom';
 import type { Placement } from '@floating-ui/react-dom';
 import styles from './label.module.scss';
 
+const HAS_RESIZE_OBSERVER = typeof window !== 'undefined' && !!window.ResizeObserver;
+
 export interface LabelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   targetRef: RefObject<HTMLElement | null>;
   offset?: [number, number];
@@ -32,12 +35,14 @@ export function LabelContainer({
   style,
   ...rest
 }: LabelContainerProps) {
-  const { x, y, strategy, floating, reference, refs, update } = useFloating({
+  const { x, y, strategy, floating, reference, refs, update, middlewareData } = useFloating({
     placement,
     middleware: compact([
       offset && offsetMiddleware({ mainAxis: offset[0], crossAxis: offset[1] }),
       flip && flipMiddleware(),
-      shift({ rootBoundary: 'viewport' }),
+      // enabling 'shift' for 'crossAxis' will make floating-ui push the label _inside_, when it has nowhere to go
+      shift({ rootBoundary: 'document', mainAxis: true, crossAxis: true }),
+      hide({ strategy: 'referenceHidden' }),
     ]),
   });
 
@@ -48,19 +53,20 @@ export function LabelContainer({
   // automatically update on scroll, resize, etc.
   // `watchMotion` will trigger continuous updates using animation frame
   useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current) return () => {};
+    if (!refs.reference.current || !refs.floating.current || !HAS_RESIZE_OBSERVER) return () => {};
 
     return autoUpdate(refs.reference.current, refs.floating.current, update, { animationFrame: !!watchMotion });
   }, [refs.reference.current, refs.floating.current, update, watchMotion]);
 
-  const isReady = x !== null;
+  const isReady = !middlewareData.hide?.referenceHidden;
 
   return (
     <div
       {...rest}
       ref={floating}
       className={classnames(className, !isReady && styles.hidden)}
-      style={{ ...style, position: strategy, top: y ?? '', left: x ?? '' }}
+      // starting at pos [0,0] will ensure the label doesn't increase the document size.
+      style={{ ...style, position: strategy, top: y ?? 0, left: x ?? 0 }}
     />
   );
 }

package/label/label.module.scss

@@ -24,6 +24,8 @@
 }
 
 .hidden {
+  // label size is needed for position calculations,
+  // so it can't be removed by `display: none`
   visibility: hidden;
   pointer-events: none;
   user-select: none;

package/mock-component.tsx

@@ -1,9 +1,23 @@
-import React, { PropsWithChildren } from 'react';
-import { componentMetaField } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import React, { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { componentMetaField, ComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
 
-export function MockTarget({ children, ...rest }: PropsWithChildren<{}>) {
-  return <div {...rest}>mocked {children}</div>;
+export function MockTarget({ children, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...rest}>{children}</div>;
 }
 MockTarget[componentMetaField] = {
+  id: 'teambit.design/ui/mock-target@1.6.2',
+} as ComponentMeta;
+
+export function MockButton({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...rest}>{children}</button>;
+}
+MockButton[componentMetaField] = {
   id: 'teambit.design/ui/icon-button@1.6.2',
-};
+} as ComponentMeta;
+
+export function MockSnap({ children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button {...rest}>{children}</button>;
+}
+MockSnap[componentMetaField] = {
+  id: 'teambit.design/ui/icon-button@a21594d5cc63fd24d2b4763fa7d817b131f0edbb',
+} as ComponentMeta;

package/package.json

@@ -1,83 +1,50 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.513",
+  "version": "0.2.0",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.513"
+    "version": "0.2.0"
   },
   "dependencies": {
-    "get-xpath": "3.0.1",
-    "classnames": "2.2.6",
-    "@floating-ui/react-dom": "0.6.0",
-    "use-debounce": "6.0.1",
-    "uuid": "3.4.0",
-    "lodash.compact": "3.0.1",
-    "url-join": "4.0.1",
+    "get-xpath": "^3.0.1",
+    "classnames": "^2.3.1",
+    "uuid": "^3.4.0",
+    "use-debounce": "^8.0.1",
+    "@floating-ui/react-dom": "0.7.2",
+    "lodash.compact": "^3.0.1",
+    "url-join": "^4.0.1",
     "@tippyjs/react": "4.2.0",
     "core-js": "^3.0.0",
-    "@teambit/base-ui.routing.native-link": "1.0.0",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
     "@teambit/component-id": "0.0.402",
-    "@teambit/react.modules.dom-to-react": "0.0.489",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
-    "@teambit/react.ui.hover-selector": "0.0.165",
-    "@teambit/component.modules.component-url": "0.0.124"
+    "@teambit/base-ui.routing.native-link": "1.0.0",
+    "@teambit/component.modules.component-url": "0.0.124",
+    "@teambit/react.modules.dom-to-react": "0.2.0",
+    "@teambit/react.ui.hover-selector": "0.2.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
-    "@testing-library/react": "11.2.6",
-    "@types/classnames": "2.2.11",
-    "@types/react-dom": "^17.0.5",
+    "@testing-library/react": "^12.1.5",
     "@types/uuid": "3.4.9",
+    "@types/react-dom": "^17.0.5",
     "@types/lodash.compact": "3.0.6",
-    "@types/url-join": "4.0.0",
+    "@types/url-join": "^4.0.0",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@babel/runtime": "7.12.18",
     "@types/jest": "^26.0.0",
-    "@types/node": "12.20.4",
-    "@teambit/design.ui.icon-button": "1.0.16"
+    "@types/node": "12.20.4"
   },
   "peerDependencies": {
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
   "license": "Apache-2.0",
-  "bit": {
-    "bindingPrefix": "@teambit",
-    "env": {},
-    "overrides": {
-      "dependencies": {
-        "@teambit/legacy": "-",
-        "core-js": "^3.0.0",
-        "react-dom": "-",
-        "react": "-"
-      },
-      "devDependencies": {
-        "@teambit/legacy": "-",
-        "@types/mocha": "9.1.0",
-        "@types/testing-library__jest-dom": "5.9.5",
-        "@babel/runtime": "7.12.18",
-        "@types/jest": "^26.0.0",
-        "@types/react-dom": "^17.0.5",
-        "@types/react": "^17.0.8",
-        "@types/node": "12.20.4",
-        "react-dom": "-",
-        "react": "-"
-      },
-      "peerDependencies": {
-        "react-dom": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
-      }
-    }
-  },
   "private": false,
-  "engines": {
-    "node": ">=12.22.0"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/teambit/bit"
@@ -88,10 +55,6 @@
     "collaboration",
     "web",
     "react",
-    "react-components",
-    "angular",
-    "angular-components",
-    "vue",
-    "vue-components"
+    "react-components"
   ]
 }

package/preview-1657547073447.js

@@ -0,0 +1,8 @@
+import * as compositions_0 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/children-highlighter/children-highlighter.composition.js';
+import * as compositions_1 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/element-highlighter/element-highlighter.compositions.js';
+import * as compositions_2 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/hover-highlighter/hover-highlighter.compositions.js';
+import * as compositions_3 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/label/component-strip.compositions.js';
+import * as overview_0 from '/Users/kutner/Library/Caches/Bit/capsules/4d3a484af3d3d771b8ef753524d1f10bb4be2fdd/teambit.react_ui_component-highlighter@0.2.0/dist/component-highlighter.docs.md';
+
+export const compositions = [compositions_0, compositions_1, compositions_2, compositions_3];
+export const overview = [overview_0];

package/tsconfig.json

@@ -7,13 +7,14 @@
       "DOM.Iterable"
     ],
     "target": "es2015",
-    "module": "commonjs",
+    "module": "CommonJS",
     "jsx": "react",
     "allowJs": true,
     "composite": true,
     "declaration": true,
     "sourceMap": true,
     "skipLibCheck": true,
+    "experimentalDecorators": true,
     "outDir": "dist",
     "moduleResolution": "node",
     "esModuleInterop": true,
@@ -21,6 +22,11 @@
     "resolveJsonModule": true
   },
   "exclude": [
-    "dist"
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
   ]
 }

package/preview-1649042627943.js

@@ -1,2 +0,0 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/children-highlighter/children-highlighter.composition.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/element-highlighter/element-highlighter.compositions.js'), require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/hover-highlighter/hover-highlighter.compositions.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_component-highlighter@0.0.513/dist/component-highlighter.docs.md')]