@patternfly/quickstarts 2.2.3 → 2.2.4

package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import InteractiveSpotlight from './InteractiveSpotlight';
+import StaticSpotlight from './StaticSpotlight';
+
+type SpotlightProps = {
+  selector: string;
+  interactive?: boolean;
+};
+
+const Spotlight: React.FC<SpotlightProps> = ({ selector, interactive }) => {
+  // if target element is a hidden one return null
+  const element = React.useMemo(() => {
+    const highlightElement = document.querySelector(selector);
+    let hiddenElement = highlightElement;
+    while (hiddenElement) {
+      const ariaHidden = hiddenElement.getAttribute('aria-hidden');
+      if (ariaHidden === 'true') {
+        return null;
+      }
+      hiddenElement = hiddenElement.parentElement;
+    }
+    return highlightElement;
+  }, [selector]);
+
+  if (!element) {
+    return null;
+  }
+  return interactive ? (
+    <InteractiveSpotlight element={element} />
+  ) : (
+    <StaticSpotlight element={element} />
+  );
+};
+
+export default Spotlight;

package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -0,0 +1,32 @@
+import './spotlight.scss';
+import * as React from 'react';
+import { useBoundingClientRect } from '../../hooks';
+import Portal from '../popper/Portal';
+
+type StaticSpotlightProps = {
+  element: Element;
+};
+
+const StaticSpotlight: React.FC<StaticSpotlightProps> = ({ element }) => {
+  const clientRect = useBoundingClientRect(element as HTMLElement);
+  const style: React.CSSProperties = clientRect
+    ? {
+        top: clientRect.top,
+        left: clientRect.left,
+        height: clientRect.height,
+        width: clientRect.width,
+      }
+    : {};
+  return clientRect ? (
+    <Portal>
+      <div className="pf-c-backdrop pfext-spotlight__with-backdrop">
+        <div
+          className="pfext-spotlight pfext-spotlight__element-highlight-noanimate"
+          style={style}
+        />
+      </div>
+    </Portal>
+  ) : null;
+};
+
+export default StaticSpotlight;

package/src/ConsoleShared/src/components/spotlight/index.ts

@@ -0,0 +1 @@
+export { default as Spotlight } from './Spotlight';

package/src/ConsoleShared/src/components/spotlight/spotlight.scss

@@ -0,0 +1,63 @@
+@keyframes pfext-spotlight-expand {
+  0% {
+    outline-offset: -4px;
+    outline-width: 4px;
+    opacity: 1;
+  }
+  100% {
+    outline-offset: 21px;
+    outline-width: 12px;
+    opacity: 0;
+  }
+}
+
+@keyframes pfext-spotlight-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pfext-spotlight-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.pfext-spotlight {
+  pointer-events: none;
+  position: absolute;
+  &__with-backdrop {
+    mix-blend-mode: hard-light;
+  }
+  &__element-highlight-noanimate {
+    border: var(--pf-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);
+    background-color: var(--pf-global--palette--black-500);
+    z-index: 9999;
+  }
+  &__element-highlight-animate {
+    pointer-events: none;
+    position: absolute;
+    box-shadow: inset 0px 0px 0px 4px var(--pf-global--palette--blue-200);
+    opacity: 0;
+    animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
+    animation-fill-mode: forwards;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
+      animation-fill-mode: forwards;
+      outline: 4px solid var(--pf-global--palette--blue-200);
+      outline-offset: -4px;
+    }
+  }
+}

package/src/ConsoleShared/src/components/status/GenericStatus.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import PopoverStatus from './PopoverStatus';
+import StatusIconAndText from './StatusIconAndText';
+import { StatusComponentProps } from './types';
+
+const GenericStatus: React.FC<GenericStatusProps> = (props) => {
+  const { Icon, children, popoverTitle, title, noTooltip, iconOnly, ...restProps } = props;
+  const renderIcon = iconOnly && !noTooltip ? <Icon title={title} /> : <Icon />;
+  const statusBody = (
+    <StatusIconAndText
+      {...restProps}
+      noTooltip={noTooltip}
+      title={title}
+      iconOnly={iconOnly}
+      icon={renderIcon}
+    />
+  );
+  return React.Children.toArray(children).length ? (
+    <PopoverStatus title={popoverTitle || title} {...restProps} statusBody={statusBody}>
+      {children}
+    </PopoverStatus>
+  ) : (
+    statusBody
+  );
+};
+
+type GenericStatusProps = StatusComponentProps & {
+  Icon: React.ComponentType<{ title?: string }>;
+  popoverTitle?: string;
+  noTooltip?: boolean;
+};
+
+export default GenericStatus;

package/src/ConsoleShared/src/components/status/NotStartedIcon.tsx

@@ -0,0 +1,27 @@
+// TODO: Pull from Patternfly when they add it
+// https://github.com/patternfly/patternfly-design/issues/921#issuecomment-726183814
+import * as React from 'react';
+
+export default (props) => (
+  <svg
+    width="12px"
+    height="13px"
+    {...props}
+    viewBox="0 0 12 13"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="icon_notstarted" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <path
+        d="M5.99998569,12.3124969 C7.04685832,12.3124969 8.01560589,12.0507786 8.90622877,11.5273425 C9.79685164,11.0039064 10.5038813,10.2968767 11.0273175,9.4062538 C11.5507536,8.51563092 11.8124718,7.54688335 11.8124718,6.50001073 C11.8124718,5.45313811 11.5507536,4.48439053 11.0273175,3.59376766 C10.5038813,2.70314478 9.79685164,1.9961151 8.90622877,1.47267896 C8.01560589,0.949242832 7.04685832,0.687524587 5.99998569,0.687524587 C4.95311307,0.687524587 3.9843655,0.949242832 3.09374262,1.47267896 C2.20311975,1.9961151 1.49609006,2.70314478 0.972653931,3.59376766 C0.449217798,4.48439053 0.187499553,5.45313811 0.187499553,6.50001073 C0.187499553,7.54688335 0.449217798,8.51563092 0.972653931,9.4062538 C1.49609006,10.2968767 2.20311975,11.0039064 3.09374262,11.5273425 C3.9843655,12.0507786 4.95311307,12.3124969 5.99998569,12.3124969 Z M5.99998569,11.1874996 C5.15623771,11.1874996 4.37498969,10.9765626 3.65624128,10.5546886 C2.93749288,10.1328146 2.36718186,9.56250355 1.94530786,8.84375514 C1.52343387,8.12500674 1.31249687,7.34375872 1.31249687,6.50001073 C1.31249687,5.65626274 1.52343387,4.87501472 1.94530786,4.15626632 C2.36718186,3.43751791 2.93749288,2.86720689 3.65624128,2.4453329 C4.37498969,2.0234589 5.15623771,1.8125219 5.99998569,1.8125219 C6.84373368,1.8125219 7.6249817,2.0234589 8.34373011,2.4453329 C9.06247851,2.86720689 9.63278953,3.43751791 10.0546635,4.15626632 C10.4765375,4.87501472 10.6874745,5.65626274 10.6874745,6.50001073 C10.6874745,7.34375872 10.4765375,8.12500674 10.0546635,8.84375514 C9.63278953,9.56250355 9.06247851,10.1328146 8.34373011,10.5546886 C7.6249817,10.9765626 6.84373368,11.1874996 5.99998569,11.1874996 Z"
+        id="Circle"
+        fill="#6A6E73"
+        fillRule="nonzero"
+      />
+      <circle id="Oval" fill="#6A6E73" cx="3" cy="6.5" r="1" />
+      <circle id="Oval-Copy-2" fill="#6A6E73" cx="6" cy="6.5" r="1" />
+      <circle id="Oval-Copy-3" fill="#6A6E73" cx="9" cy="6.5" r="1" />
+    </g>
+  </svg>
+);

package/src/ConsoleShared/src/components/status/PopoverStatus.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Button, Popover, PopoverPosition } from '@patternfly/react-core';
+
+const PopoverStatus: React.FC<PopoverStatusProps> = ({
+  hideHeader,
+  children,
+  isVisible = null,
+  shouldClose = null,
+  statusBody,
+  title,
+  onHide,
+  onShow,
+}) => {
+  return (
+    <Popover
+      position={PopoverPosition.right}
+      headerContent={hideHeader ? null : title}
+      bodyContent={children}
+      aria-label={title}
+      onHide={onHide}
+      onShow={onShow}
+      isVisible={isVisible}
+      shouldClose={shouldClose}
+    >
+      <Button variant="link" isInline>
+        {statusBody}
+      </Button>
+    </Popover>
+  );
+};
+
+type PopoverStatusProps = {
+  statusBody: React.ReactNode;
+  onHide?: () => void;
+  onShow?: () => void;
+  title?: string;
+  hideHeader?: boolean;
+  isVisible?: boolean;
+  shouldClose?: (hideFunction: any) => void;
+};
+
+export default PopoverStatus;

package/src/ConsoleShared/src/components/status/Status.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
+import { DASH } from '../../constants';
+import { SuccessStatus } from './statuses';
+import StatusIconAndText from './StatusIconAndText';
+import { StatusComponentProps } from './types';
+
+export const Status: React.FC<StatusProps> = ({
+  status,
+  title,
+  iconOnly,
+  noTooltip,
+  className,
+}) => {
+  const statusProps = { title: title || status, iconOnly, noTooltip, className };
+  switch (status) {
+    case 'In Progress':
+      return <StatusIconAndText {...statusProps} icon={<SyncAltIcon />} />;
+
+    case 'Complete':
+      return <SuccessStatus {...statusProps} />;
+
+    default:
+      return <>{status || DASH}</>;
+  }
+};
+
+export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => (
+  <Status status={status} iconOnly />
+);
+
+type StatusIconProps = {
+  status: string;
+};
+
+type StatusProps = StatusComponentProps & {
+  status: string;
+};

package/src/ConsoleShared/src/components/status/StatusIconAndText.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { CamelCaseWrap } from '@console/internal/components/utils';
+import { DASH } from '../../constants';
+import { StatusComponentProps } from './types';
+
+type StatusIconAndTextProps = StatusComponentProps & {
+  icon?: React.ReactElement;
+  spin?: boolean;
+};
+
+const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({
+  icon,
+  title,
+  spin,
+  iconOnly,
+  noTooltip,
+  className,
+}) => {
+  if (!title) {
+    return <>{DASH}</>;
+  }
+
+  return (
+    <span
+      className={css('pfext-icon-and-text', className)}
+      title={iconOnly && !noTooltip ? title : undefined}
+    >
+      {icon &&
+        React.cloneElement(icon, {
+          className: css(
+            spin && 'fa-spin',
+            icon.props.className,
+            !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child',
+          ),
+        })}
+      {!iconOnly && <CamelCaseWrap value={title} dataTest="status-text" />}
+    </span>
+  );
+};
+
+export default StatusIconAndText;

package/src/ConsoleShared/src/components/status/icons.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+// import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+// import { global_default_color_200 as blueDefaultColor } from '@patternfly/react-tokens/dist/js/global_default_color_200';
+// import { global_disabled_color_100 as disabledColor } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
+import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+// import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+
+export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <CheckCircleIcon
+    data-test="success-icon"
+    size={size}
+    color={okColor.value}
+    className={className}
+    title={title}
+  />
+);
+
+export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
+  className,
+  title,
+  size,
+}) => (
+  <ExclamationCircleIcon
+    size={size}
+    color={dangerColor.value}
+    className={className}
+    title={title}
+  />
+);
+
+// export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({
+//   className,
+//   title,
+//   size,
+// }) => (
+//   <ExclamationTriangleIcon
+//     size={size}
+//     color={warningColor.value}
+//     className={className}
+//     title={title}
+//   />
+// );
+
+export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <InfoCircleIcon color={blueInfoColor.value} className={className} title={title} />
+);
+
+// export const GrayUnknownIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <UnknownIcon color={disabledColor.value} className={className} title={title} />
+// );
+
+// export const BlueSyncIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <SyncAltIcon color={blueInfoColor.value} className={className} title={title} />
+// );
+
+// export const RedResourcesFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <ResourcesFullIcon color={dangerColor.value} className={className} title={title} />
+// );
+
+// export const YellowResourcesAlmostFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <ResourcesAlmostFullIcon color={warningColor.value} className={className} title={title} />
+// );
+
+// export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+//   <ArrowCircleUpIcon color={blueDefaultColor.value} className={className} title={title} />
+// );
+
+export type ColoredIconProps = {
+  className?: string;
+  title?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+};

package/src/ConsoleShared/src/components/status/index.tsx

@@ -0,0 +1 @@
+export * from './Status';

package/src/ConsoleShared/src/components/status/statuses.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+// import HourglassHalfIcon from '@patternfly/react-icons/dist/js/icons/hourglass-half-icon';
+// import InProgressIcon from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+import GenericStatus from './GenericStatus';
+import { BlueInfoCircleIcon, GreenCheckCircleIcon, RedExclamationCircleIcon } from './icons';
+import { StatusComponentProps } from './types';
+
+export const ErrorStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={RedExclamationCircleIcon} title={props.title || 'Error'} />
+);
+ErrorStatus.displayName = 'ErrorStatus';
+
+export const InfoStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={BlueInfoCircleIcon} title={props.title || 'Information'} />
+);
+InfoStatus.displayName = 'InfoStatus';
+
+// export const PendingStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={HourglassHalfIcon} title={props.title || 'Pending'} />
+// );
+// PendingStatus.displayName = 'PendingStatus';
+
+// export const ProgressStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={InProgressIcon} title={props.title || 'In progress'} />
+// );
+// ProgressStatus.displayName = 'ProgressStatus';
+
+export const SuccessStatus: React.FC<StatusComponentProps> = (props) => (
+  <GenericStatus {...props} Icon={GreenCheckCircleIcon} title={props.title || 'Healthy'} />
+);
+SuccessStatus.displayName = 'SuccessStatus';
+
+// export const WarningStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={YellowExclamationTriangleIcon} title={props.title || 'Warning'} />
+// );
+// WarningStatus.displayName = 'WarningStatus';

package/src/ConsoleShared/src/components/status/types.ts

@@ -0,0 +1,7 @@
+export type StatusComponentProps = {
+  title?: string;
+  iconOnly?: boolean;
+  noTooltip?: boolean;
+  className?: string;
+  popoverTitle?: string;
+};

package/src/ConsoleShared/src/components/utils/FallbackImg.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+type FallbackImgProps = {
+  src: string;
+  alt?: string;
+  className?: string;
+  fallback?: React.ReactNode;
+};
+
+const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+
+  if (src && isSrcValid) {
+    return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;
+  }
+
+  return <>{fallback}</>;
+};
+
+export default FallbackImg;

package/src/ConsoleShared/src/components/utils/index.ts

@@ -0,0 +1 @@
+export { default as FallbackImg } from './FallbackImg';

package/src/ConsoleShared/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './ui';

package/src/ConsoleShared/src/constants/ui.ts

@@ -0,0 +1 @@
+export const DASH = '-';

package/src/ConsoleShared/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './scroll';
+export * from './useResizeObserver';
+export * from './useScrollShadows';
+export * from './useBoundingClientRect';
+export * from './useForceRender';
+export * from './useEventListener';

package/src/ConsoleShared/src/hooks/scroll.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+export enum ScrollDirection {
+  scrollingUp = 'scrolling-up',
+  scrollingDown = 'scrolling-down',
+  scrolledToBottom = 'scrolled-to-bottom',
+  scrolledToTop = 'scrolled-to-top',
+}
+
+export const getScrollDirection = (
+  prevScrollTop: number,
+  currentScrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+) => {
+  let direction;
+  if (scrollHeight - currentScrollTop === clientHeight) {
+    direction = ScrollDirection.scrolledToBottom;
+  } else if (currentScrollTop === 0) {
+    direction = ScrollDirection.scrolledToTop;
+  } else if (prevScrollTop > currentScrollTop) {
+    direction = ScrollDirection.scrollingUp;
+  } else if (prevScrollTop < currentScrollTop) {
+    direction = ScrollDirection.scrollingDown;
+  }
+  return direction;
+};
+
+export const useScrollDirection = (): [ScrollDirection, (event) => void] => {
+  const scrollPosition = React.useRef<number>(null);
+  const [scrollDirection, setScrollDirection] = React.useState<ScrollDirection>(null);
+  const handleScroll = React.useCallback(
+    (event) => {
+      const { scrollHeight, scrollTop, clientHeight } = event.target;
+      if (scrollPosition.current !== null) {
+        const direction = getScrollDirection(
+          scrollPosition.current,
+          scrollTop,
+          scrollHeight,
+          clientHeight,
+        );
+        if (direction && direction !== scrollDirection) {
+          setScrollDirection(direction);
+        }
+      }
+      scrollPosition.current = scrollTop;
+    },
+    [scrollDirection],
+  );
+
+  return [scrollDirection, handleScroll];
+};

package/src/ConsoleShared/src/hooks/useBoundingClientRect.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useResizeObserver } from './useResizeObserver';
+
+type BoundingClientRect = ClientRect | null;
+
+export const useBoundingClientRect = (targetElement: HTMLElement | null): BoundingClientRect => {
+  const [clientRect, setClientRect] = React.useState<BoundingClientRect>(() =>
+    targetElement ? targetElement.getBoundingClientRect() : null,
+  );
+
+  const observerCallback = React.useCallback(() => {
+    setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
+  }, [targetElement]);
+
+  useResizeObserver(observerCallback);
+
+  return clientRect;
+};

package/src/ConsoleShared/src/hooks/useEventListener.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+export const useEventListener = (
+  target: EventTarget,
+  event: keyof WindowEventMap,
+  callback: EventListener,
+) => {
+  useEffect(() => {
+    target.addEventListener(event, callback);
+    return () => {
+      target.removeEventListener(event, callback);
+    };
+  }, [target, event, callback]);
+};

package/src/ConsoleShared/src/hooks/useForceRender.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+/**
+ * React hook that forces component render.
+ */
+export const useForceRender = () => React.useReducer((s: boolean) => !s, false)[1] as VoidFunction;

package/src/ConsoleShared/src/hooks/useResizeObserver.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+// TODO: Remove the no-check
+import * as React from 'react';
+
+export const useResizeObserver = (
+  callback: ResizeObserverCallback,
+  targetElement?: HTMLElement | null,
+  observerOptions: ResizeObserverObserveOptions = undefined,
+): void => {
+  const element = React.useMemo(() => targetElement ?? document.querySelector('body'), [
+    targetElement,
+  ]);
+  React.useEffect(() => {
+    const observer = new ResizeObserver(callback);
+    observer.observe(element, observerOptions);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, observerOptions, element]);
+};

package/src/ConsoleShared/src/hooks/useScrollShadows.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useResizeObserver } from './useResizeObserver';
+
+export enum Shadows {
+  none = 'none',
+  both = 'both',
+  top = 'top',
+  bottom = 'bottom',
+}
+
+export const useScrollShadows = (node: HTMLElement): Shadows => {
+  const [shadows, setShadows] = React.useState(Shadows.none);
+  const computeShadows = React.useCallback(() => {
+    if (node) {
+      const { scrollTop, clientHeight, scrollHeight } = node;
+      const top = scrollTop !== 0;
+      const bottom = scrollTop + clientHeight < scrollHeight;
+      if (top && bottom) {
+        setShadows(Shadows.both);
+      } else if (top) {
+        setShadows(Shadows.top);
+      } else if (bottom) {
+        setShadows(Shadows.bottom);
+      } else {
+        setShadows(Shadows.none);
+      }
+    }
+  }, [node]);
+  // recompute when the scroll container changes in size
+  useResizeObserver(computeShadows, node);
+  React.useEffect(() => {
+    if (node) {
+      // compute initial shadows
+      computeShadows();
+      // listen for scroll events
+      node.addEventListener('scroll', computeShadows);
+    }
+    return () => {
+      if (node) {
+        node.removeEventListener('scroll', computeShadows);
+      }
+    };
+  }, [node, computeShadows]);
+  return shadows;
+};

package/src/ConsoleShared/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './constants';

package/src/ConsoleShared/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './useCombineRefs';