@teambit/react.ui.component-highlighter 0.0.485 → 0.0.489

package/hybrid-highligher/hybrid-highlighter.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect, useMemo, useRef, createRef, CSSProperties } from 'react';
+import classnames from 'classnames';
+import { v4 } from 'uuid';
+
+import { useHoverHighlighter } from '../hover-highlighter';
+import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../element-highlighter';
+import { useMultiHighlighter } from '../multi-highlighter/use-multi-highlighter';
+import type { MatchRule } from '../rule-matcher';
+
+export interface HybridHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** stop all highlighting and drop listeners */
+  disabled?: boolean;
+  /** default pop location for the label */
+  placement?: Placement;
+  /** customize styles */
+  classes?: HighlightClasses;
+  /** customize highlighter */
+  highlightStyle?: CSSProperties;
+  /** debounces element hover selection.
+   * A higher value will reduce element lookups as well as "keep" the highlight on the current element for longer.
+   * Initial selection (when no element is currently selected) will always happen immediately to improve the user experience.
+   * @default 80ms
+   */
+  debounceSelection?: number;
+  /** continually update frame position to match moving elements */
+  watchMotion?: boolean;
+
+  /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
+  rule?: MatchRule;
+
+  /** set the behavior of the highlighter.
+   * `disabled` - stops highlighting.
+   * `allChildren` - highlights all components rendered under children
+   * `hover` - highlighters the component immediately under the mouse cursor
+   * */
+  mode?: 'allChildren' | 'hover';
+  bgColor?: string;
+  bgColorHover?: string;
+  bgColorActive?: string;
+}
+
+/** automatically highlight components on hover */
+export function HybridHighlighter({
+  disabled,
+  mode = 'hover',
+  debounceSelection = 80,
+  watchMotion = true,
+  placement,
+  rule,
+
+  classes,
+  highlightStyle,
+  className,
+  style,
+  bgColor,
+  bgColorHover,
+  bgColorActive,
+  children,
+  ...rest
+}: HybridHighlighterProps) {
+  const ref = createRef<HTMLDivElement>();
+  const [targets, setTarget] = useState<Record<string, HighlightTarget>>({});
+  const scopeClass = useRef(`hl-scope-${v4()}`).current;
+  const hasTargets = Object.entries(targets).length > 0;
+
+  // clear targets when disabled
+  useEffect(() => {
+    if (disabled) setTarget({});
+  }, [disabled]);
+
+  const handlers = useHoverHighlighter(
+    (nextTarget) => setTarget(nextTarget ? { 'hover-target': nextTarget } : {}),
+    rest,
+    {
+      debounceDuration: hasTargets ? debounceSelection : 0,
+      scopeClass,
+      disabled: disabled || mode !== 'hover',
+      rule,
+    }
+  );
+
+  useMultiHighlighter({
+    onChange: setTarget,
+    scopeRef: ref,
+    scopeClass,
+    disabled: disabled || mode !== 'allChildren',
+    rule,
+  });
+
+  const _styles = useMemo(
+    () => ({
+      '--bit-highlighter-color': bgColor,
+      '--bit-highlighter-color-hover': bgColorHover,
+      '--bit-highlighter-color-active': bgColorActive,
+      ...style,
+    }),
+    [bgColor, bgColorHover, bgColorActive, style]
+  );
+
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      {...handlers}
+      style={_styles}
+      className={classnames(className, scopeClass)}
+      data-nullify-component-highlight
+    >
+      {children}
+      {/*
+       * keep the highlighter inside of the hover selector, or it could disappear when switching between elements
+       * the excludeHighlighterAtt will ensure it doesn't turn into a recursion.
+       */}
+      {Object.entries(targets).map(([key, target]) => (
+        <ElementHighlighter
+          key={key}
+          target={target}
+          classes={classes}
+          style={highlightStyle}
+          placement={placement}
+          watchMotion={watchMotion}
+        />
+      ))}
+    </div>
+  );
+}

package/hybrid-highligher/index.ts

@@ -0,0 +1,2 @@
+export { HybridHighlighter } from './hybrid-highlighter';
+export type { HybridHighlighterProps } from './hybrid-highlighter';

package/index.ts

@@ -1,5 +1,8 @@
-export { HoverHighlighter as ComponentHighlighter } from './component-highlighter';
-export type { HoverHighlighterProps as ComponentHighlightProps } from './component-highlighter';
+export { HybridHighlighter as ComponentHighlighter } from './hybrid-highligher';
+export type { HybridHighlighterProps as ComponentHighlightProps } from './hybrid-highligher';
+
+export { HoverHighlighter } from './hover-highlighter';
+export type { HoverHighlighterProps } from './hover-highlighter';
 
 export { MultiHighlighter } from './multi-highlighter';
 export type { MultiHighlighterProps } from './multi-highlighter';
@@ -13,3 +16,5 @@ export {
   excludeHighlighterSelector,
   excludeHighlighterAttrName,
 } from './ignore-highlighter';
+
+export type { MatchRule } from './rule-matcher';

package/multi-highlighter/multi-highlighter.composition.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 // import { EnterpriseOffering } from '@teambit/evangelist.pages.enterprise-offering';
 import { MockedComponentWithMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { ExcludeHighlighter } from '../ignore-highlighter';
 import { MultiHighlighter } from './multi-highlighter';
 
 export const MultiHighlighterPreview = () => {
   return (
-    <MultiHighlighter style={{ padding: 40 }}>
+    <MultiHighlighter style={{ padding: 40, minWidth: 200 }}>
       <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
       <br />
       <br />
@@ -18,7 +19,7 @@ export const MultiHighlighterPreview = () => {
 export const MultiHighlighterWithCustomColors = () => {
   return (
     <MultiHighlighter
-      style={{ padding: 40, color: 'yellow' }}
+      style={{ padding: 40, minWidth: 200, color: 'yellow' }}
       bgColor="cornflowerblue"
       bgColorHover="blue"
       bgColorActive="DarkSlateBlue"
@@ -32,6 +33,43 @@ export const MultiHighlighterWithCustomColors = () => {
   );
 };
 
+export const MultiHighlighterInsideIgnore = () => {
+  return (
+    <ExcludeHighlighter>
+      <MultiHighlighter>
+        Multi Highlighter should still work when inside <code>{'<ExcludeHighlighter>'}</code>
+        <br />
+        It should only skip exclusion zones inside of it.
+        <br />
+        <br />
+        <br />
+        <MockedComponentWithMeta>hover here</MockedComponentWithMeta>
+        <br />
+        <br />
+        <br />
+        <MockedComponentWithMeta>also here</MockedComponentWithMeta>
+      </MultiHighlighter>
+    </ExcludeHighlighter>
+  );
+};
+
+export const MultiHighlighterWithRule = () => {
+  return (
+    <MultiHighlighter rule="#someSubTree *">
+      <br />
+      <br />
+      <br />
+      <MockedComponentWithMeta>no highlighter</MockedComponentWithMeta>
+      <br />
+      <br />
+      <br />
+      <div id="someSubTree">
+        <MockedComponentWithMeta>this will be highlighted</MockedComponentWithMeta>
+      </div>
+    </MultiHighlighter>
+  );
+};
+
 // export const HighlightingAllElementsInTheEnterprisePage = () => {
 //   return (
 //     <MultiHighlighter>

package/multi-highlighter/multi-highlighter.tsx

@@ -1,85 +1,9 @@
-import React, { useEffect, useState, createRef } from 'react';
-import getXPath from 'get-xpath';
-import { ElementHighlighter, ElementHighlighterProps, HighlightTarget } from '@teambit/react.ui.component-highlighter';
-import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
-import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-import { excludeHighlighterSelector } from '../ignore-highlighter';
+import React from 'react';
 
-// TODO - reuse selector from @teambit/react.ui.component-highlighter
-const allExceptHighlighterQuery = `:not(${excludeHighlighterSelector}, ${excludeHighlighterSelector} *)`;
+import { HybridHighlighter, HybridHighlighterProps } from '../hybrid-highligher';
 
-export interface MultiHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
-  disabled?: boolean;
-  // /** automatically update when children update. Use with caution, might be slow */
-  // watchDom?: boolean;
-  /**
-   * continually update highlighter position to match dom elements as they move. Use with caution, might be slow
-   * @default false
-   */
-  watchMotion?: boolean;
+export type MultiHighlighterProps = Omit<HybridHighlighterProps, 'mode'>;
 
-  bgColor?: string;
-  bgColorHover?: string;
-  bgColorActive?: string;
-  highlighterOptions?: ElementHighlighterProps;
-}
-
-export function MultiHighlighter({
-  children,
-  disabled,
-  watchMotion = false,
-  style,
-  bgColor,
-  bgColorActive,
-  bgColorHover,
-  highlighterOptions,
-  ...rest
-}: MultiHighlighterProps) {
-  const ref = createRef<HTMLDivElement>();
-  const [targets, setTargets] = useState<Record<string, HighlightTarget>>({});
-
-  useEffect(() => {
-    if (disabled) {
-      setTargets({});
-      return;
-    }
-
-    const { current } = ref;
-    if (!current) return;
-
-    // select all non-highlighter elements
-    const allElements = Array.from(current.querySelectorAll<HTMLElement>(allExceptHighlighterQuery));
-
-    // converge on the root element of components
-    const rootElements = allElements.map(toRootElement).filter((x) => !!x);
-    // deduplicate
-    const uniqueRoots = new Set(rootElements);
-
-    const nextTargets: Record<string, HighlightTarget> = {};
-    uniqueRoots.forEach((element) => {
-      const comp = domToReact(element);
-      if (!element || !hasComponentMeta(comp)) return;
-
-      const key = getXPath(element);
-      // eslint-disable-next-line no-underscore-dangle
-      nextTargets[key] = { element, id: comp.__bit_component.id };
-    });
-
-    setTargets(nextTargets);
-  }, [disabled]);
-
-  const colors = {
-    '--bit-highlighter-color': bgColor,
-    '--bit-highlighter-color-hover': bgColorHover,
-    '--bit-highlighter-color-active': bgColorActive,
-  };
-
-  return (
-    <div ref={ref} {...rest} style={{ ...colors, ...style }}>
-      {children}
-      {Object.entries(targets).map(([key, target]) => (
-        <ElementHighlighter key={key} target={target} watchMotion={watchMotion} {...highlighterOptions} />
-      ))}
-    </div>
-  );
+export function MultiHighlighter({ watchMotion = false, ...props }: MultiHighlighterProps) {
+  return <HybridHighlighter {...props} mode={'allChildren'} watchMotion={watchMotion} />;
 }

package/multi-highlighter/use-multi-highlighter.tsx

@@ -0,0 +1,70 @@
+import { useEffect, RefObject } from 'react';
+import getXPath from 'get-xpath';
+import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
+import {
+  hasComponentMeta,
+  componentMetaField,
+  componentMetaProperties,
+} from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
+import { HighlightTarget } from '../element-highlighter';
+import { excludeHighlighterSelector } from '../ignore-highlighter';
+import { ruleMatcher, MatchRule } from '../rule-matcher';
+
+type useMultiHighlighterProps = {
+  onChange: (highlighterTargets: Record<string, HighlightTarget>) => void;
+  disabled?: boolean;
+  scopeRef: RefObject<HTMLElement>;
+  scopeClass?: string;
+  /** filter highlighter targets by this query selector. (May be a more complex object in the future) */
+  rule?: MatchRule;
+
+  // /** automatically update when children update. Use with caution, might be slow */
+  // watchDom?: boolean;
+};
+
+export function useMultiHighlighter({
+  onChange,
+  disabled,
+  scopeRef,
+  scopeClass: scopeSelector = '',
+  rule,
+}: useMultiHighlighterProps) {
+  useEffect(() => {
+    const nextTargets: Record<string, HighlightTarget> = {};
+    const scopeElement = scopeRef.current;
+    if (!scopeElement || disabled) return;
+
+    // select all elements (except excluded)
+    let allElements = Array.from(scopeElement.querySelectorAll<HTMLElement>(targetsSelector(`.${scopeSelector}`)));
+    // apply rule filtering
+    if (rule) allElements = allElements.filter((elem) => ruleMatcher(elem, rule));
+    // seek the root element:
+    const rootElements = allElements.map(toRootElement).filter((x) => !!x);
+    // deduplicate
+    const uniqueRoots = new Set(rootElements);
+
+    uniqueRoots.forEach((element) => {
+      const comp = domToReact(element);
+      if (!element || !hasComponentMeta(comp)) return;
+
+      const key = getXPath(element);
+      const meta = comp[componentMetaField];
+      const compId = meta[componentMetaProperties.componentId];
+      const link = meta[componentMetaProperties.homepageUrl];
+      const local = meta[componentMetaProperties.isExported] === false;
+      nextTargets[key] = { element, id: compId, link, local };
+    });
+
+    onChange(nextTargets);
+  }, [disabled, scopeSelector]);
+}
+
+function targetsSelector(
+  /**
+   * the scope in which to consider the exclude selector.
+   * The `:scope` modifier is appropriate, but is not supported in older browsers.
+   */
+  scopeSelector = ':scope'
+) {
+  return `:not(${scopeSelector} ${excludeHighlighterSelector}, ${scopeSelector} ${excludeHighlighterSelector} *)`;
+}

package/package.json

@@ -1,37 +1,39 @@
 {
   "name": "@teambit/react.ui.component-highlighter",
-  "version": "0.0.485",
+  "version": "0.0.489",
   "homepage": "https://bit.dev/teambit/react/ui/component-highlighter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/component-highlighter",
-    "version": "0.0.485"
+    "version": "0.0.489"
   },
   "dependencies": {
-    "classnames": "2.2.6",
     "@popperjs/core": "2.6.0",
+    "classnames": "2.2.6",
     "react-popper": "2.2.4",
-    "get-xpath": "3.0.1",
     "use-debounce": "6.0.1",
+    "uuid": "3.4.0",
+    "get-xpath": "3.0.1",
     "url-join": "4.0.1",
     "core-js": "^3.0.0",
     "@teambit/base-ui.utils.popper-js.ignore-popper-size": "1.0.0",
     "@teambit/base-ui.utils.popper-js.resize-to-match-reference": "1.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.routing.native-link": "1.0.0",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.473",
-    "@teambit/react.modules.dom-to-react": "0.0.472",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.6",
-    "@teambit/component-id": "0.0.385",
-    "@teambit/react.ui.hover-selector": "0.0.150",
-    "@teambit/component.modules.component-url": "0.0.106"
+    "@teambit/react.modules.dom-to-react": "0.0.476",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.9",
+    "@teambit/react.ui.hover-selector": "0.0.154",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.476",
+    "@teambit/component-id": "0.0.388",
+    "@teambit/component.modules.component-url": "0.0.109"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
     "@types/classnames": "2.2.11",
     "@testing-library/react": "11.2.6",
     "@types/react-dom": "^17.0.5",
+    "@types/uuid": "3.4.9",
     "@types/url-join": "4.0.0",
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
@@ -41,7 +43,7 @@
     "@teambit/design.ui.icon-button": "1.0.10"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.181",
+    "@teambit/legacy": "1.0.184",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -69,7 +71,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.181",
+        "@teambit/legacy": "1.0.184",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/rule-matcher.tsx

@@ -0,0 +1,15 @@
+// in the future, we will add more options here, like include / exclude objects.
+
+export type MatchRule = undefined | string | ((element: HTMLElement) => boolean);
+
+export function ruleMatcher(element: HTMLElement, rule: MatchRule) {
+  if (typeof rule === 'string') {
+    return element.matches(rule);
+  }
+
+  if (typeof rule === 'function') {
+    return rule(element);
+  }
+
+  return true;
+}

package/component-highlighter/hover-highlighter/hover-highlighter.module.scss

@@ -1,13 +0,0 @@
-.highlighter {
-  border: solid var(--bit-border-color-lightest, #ededed);
-  border-width: 0px;
-  box-sizing: border-box;
-  height: 100%;
-
-  transition: border 300ms;
-
-  &.active {
-    border-width: 8px;
-    overflow: auto;
-  }
-}

package/component-highlighter/hover-highlighter/hover-highlighter.tsx

@@ -1,120 +0,0 @@
-import React, { useState, useCallback, useEffect, CSSProperties } from 'react';
-import classnames from 'classnames';
-import { useDebouncedCallback } from 'use-debounce';
-import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
-import { HoverSelector } from '@teambit/react.ui.hover-selector';
-import { hasComponentMeta } from '@teambit/react.ui.highlighter.component-metadata.bit-component-meta';
-
-import styles from './hover-highlighter.module.scss';
-import { excludeHighlighterSelector } from '../../ignore-highlighter';
-import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../../element-highlighter';
-
-export interface HoverHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
-  disabled?: boolean;
-  /** default pop location for the label */
-  placement?: Placement;
-  /** customize styles */
-  classes?: HighlightClasses;
-  /** customize highlighter */
-  highlightStyle?: CSSProperties;
-  /** debounces element hover selection.
-   * A higher value will reduce element lookups as well as "keep" the highlight on the current element for longer.
-   * Initial selection (when no element is currently selected) will always happen immediately to improve the user experience.
-   * @default 80ms
-   */
-  debounceSelection?: number;
-  /** continually update frame position to match moving elements */
-  watchMotion?: boolean;
-}
-
-/** automatically highlight components on hover */
-export function HoverHighlighter({
-  children,
-  disabled,
-  classes,
-  highlightStyle,
-  placement,
-  debounceSelection = 80,
-  watchMotion = true,
-  ...rest
-}: HoverHighlighterProps) {
-  const [target, setTarget] = useState<HighlightTarget | undefined>();
-
-  const _handleElement = useCallback((element: HTMLElement | null) => {
-    // clear highlighter at the edges:
-    if (!element || element.hasAttribute('data-nullify-component-highlight')) {
-      setTarget(undefined);
-      return;
-    }
-
-    // skip DOM trees having 'data-ignore-component-highlight'
-    if (element.closest(excludeHighlighterSelector)) return;
-
-    const result = bubbleToBitComponent(element);
-    if (!result) return;
-
-    setTarget({
-      element: result.element,
-      id: result.meta.id,
-      scopeLink: undefined,
-      link: result.meta.homepage,
-      local: result.meta.exported === false,
-    });
-  }, []);
-
-  const handleElement = useDebouncedCallback(_handleElement, target ? debounceSelection : 0);
-
-  // clear target when disabled
-  useEffect(() => {
-    if (disabled) {
-      setTarget(undefined);
-    }
-  }, [disabled]);
-
-  return (
-    <HoverSelector
-      {...rest}
-      className={classnames(styles.highlighter, !disabled && styles.active)}
-      onElementChange={handleElement}
-      disabled={disabled}
-      data-nullify-component-highlight
-    >
-      {children}
-      {/*
-       * keep the highlighter inside of the hover selector, or it could disappear when switching between elements
-       * the excludeHighlighterAtt will ensure it doesn't turn into a recursion.
-       */}
-      {target && (
-        <ElementHighlighter
-          target={target}
-          classes={classes}
-          style={highlightStyle}
-          placement={placement}
-          watchMotion={watchMotion}
-        />
-      )}
-    </HoverSelector>
-  );
-}
-
-/** go up the dom tree until reaching a react bit component */
-function bubbleToBitComponent(element: HTMLElement | null, filter?: (elem: Element) => boolean) {
-  for (let current = element; current; current = current.parentElement) {
-    current = toRootElement(current);
-    if (!current || filter?.(current) === false) return undefined;
-
-    const component = domToReact(current);
-
-    if (hasComponentMeta(component)) {
-      const meta = component.__bit_component;
-
-      return {
-        element: current,
-        component,
-        meta,
-      };
-    }
-  }
-
-  return undefined;
-}

package/component-highlighter/hover-highlighter/index.ts

@@ -1 +0,0 @@
-export { HoverHighlighterProps, HoverHighlighter } from './hover-highlighter';

package/component-highlighter/index.ts

@@ -1,2 +0,0 @@
-export { HoverHighlighter } from './hover-highlighter';
-export type { HoverHighlighterProps } from './hover-highlighter';

package/dist/component-highlighter/hover-highlighter/hover-highlighter.compositions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../../component-highlighter/hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,0EAA4D;AAC5D,2DAAuD;AAEhD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;QAC5C,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC1D;;gBAEE,yCAAM;gBACN;oBACE,8BAAC,kCAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAyB,CACtE,CACF,CACW,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,gBAAgB,oBAgB3B"}

package/dist/component-highlighter/hover-highlighter/hover-highlighter.d.ts

@@ -1,21 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Placement, HighlightClasses } from '../../element-highlighter';
-export interface HoverHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
-    disabled?: boolean;
-    /** default pop location for the label */
-    placement?: Placement;
-    /** customize styles */
-    classes?: HighlightClasses;
-    /** customize highlighter */
-    highlightStyle?: CSSProperties;
-    /** debounces element hover selection.
-     * A higher value will reduce element lookups as well as "keep" the highlight on the current element for longer.
-     * Initial selection (when no element is currently selected) will always happen immediately to improve the user experience.
-     * @default 80ms
-     */
-    debounceSelection?: number;
-    /** continually update frame position to match moving elements */
-    watchMotion?: boolean;
-}
-/** automatically highlight components on hover */
-export declare function HoverHighlighter({ children, disabled, classes, highlightStyle, placement, debounceSelection, watchMotion, ...rest }: HoverHighlighterProps): JSX.Element;