@telus-uds/components-web 2.43.0 → 3.0.0

package/lib-module/utils/theming/with-server-theme.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getThemeTokens, getTokensPropType } from '@telus-uds/components-base/server';
-import getTheme from './get-theme-from-server';
-import { jsx as _jsx } from "react/jsx-runtime";
-const withServerTheme = (Component, componentName) => {
-  const UdsStyledComponent = async _ref => {
-    let {
-      tokens: tokenOverrides,
-      variant,
-      ...props
-    } = _ref;
-    const componentTheme = await getTheme(componentName);
-    const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant);
-    return /*#__PURE__*/_jsx(Component, {
-      theme: themeTokens,
-      ...props
-    });
-  };
-  UdsStyledComponent.propTypes = {
-    tokens: getTokensPropType(componentName),
-    variant: PropTypes.string
-  };
-  return UdsStyledComponent;
-};
-export default withServerTheme;

package/lib-module/utils/transforms.js

@@ -1,4 +0,0 @@
-export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
-export default {
-  transformGradient
-};

package/lib-module/utils/useOverlaidPosition.js

@@ -1,216 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-// TODO: add react-native as a peer dep and support native apps too.
-// That requires some fiddling with Allium repo storybook config, babel, etc,
-// unless ADS gets merged back into UDS monorepo.
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
-  const offset = Math.max(0, initialOffset);
-  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
-  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
-  const adjusted = {
-    offset: Math.max(0, offset - otherEdgeOverflow)
-  };
-  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
-  return adjusted;
-};
-const getPosition = _ref => {
-  let {
-    edge,
-    fromEdge,
-    sourceSize
-  } = _ref;
-  switch (edge) {
-    case 'near':
-      return fromEdge;
-    case 'mid':
-      return fromEdge + sourceSize / 2;
-    case 'far':
-      return fromEdge + sourceSize;
-    default:
-      return 0;
-  }
-};
-const getEdgeType = (align, alignSide) => {
-  const alignTo = align[alignSide];
-  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
-  return edge;
-};
-
-/**
- * Based on UDS's private getTooltipPosition but generalised.
- *
- * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
- * to the source (button) and we have a limited set of positions, an easy and consistent way
- * of positioning it is to check all of the possible positions and pick one that will be rendered
- * within the window bounds. This way we can also rely on the tooltip being actually rendered
- * before it is shown, which makes it account for the width being limiting in styles, custom font
- * rendering, etc.
- */
-function getOverlaidPosition(_ref2) {
-  let {
-    sourceLayout,
-    targetDimensions,
-    windowDimensions,
-    offsets = {},
-    align
-  } = _ref2;
-  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
-  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
-  // that can be passed to the appropriate ScrollView?
-  const {
-    scrollX = 0,
-    scrollY = 0
-  } = typeof window === 'object' ? window : {};
-
-  // Will have top, bottom, left and/or right offsets depending on `align`
-  const positioning = {};
-  if (align.top) positioning.top = getPosition({
-    edge: getEdgeType(align, 'top'),
-    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
-    sourceSize: sourceLayout.height
-  });
-  if (align.middle) positioning.top = getPosition({
-    edge: getEdgeType(align, 'middle'),
-    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
-    sourceSize: sourceLayout.height
-  });
-  if (align.bottom) positioning.bottom = getPosition({
-    edge: getEdgeType(align, 'bottom'),
-    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
-    sourceSize: sourceLayout.height
-  });
-  if (align.left) positioning.left = getPosition({
-    edge: getEdgeType(align, 'left'),
-    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
-    sourceSize: sourceLayout.width
-  });
-  if (align.center) positioning.left = getPosition({
-    edge: getEdgeType(align, 'center'),
-    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
-    sourceSize: sourceLayout.width
-  });
-  if (align.right) positioning.right = getPosition({
-    edge: getEdgeType(align, 'right'),
-    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
-    sourceSize: sourceLayout.width
-  });
-  if (!(align.left && align.right)) {
-    // Check if the position and/or width need adjusting to fit on the screen
-    const side = align.right ? 'right' : 'left';
-    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
-    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
-    if (typeof adjusted.offset === 'number') {
-      positioning[side] = adjusted.offset;
-    }
-  }
-  return positioning;
-}
-
-/**
- * Positions an element in a modal or portal so that it appears tooltip-like below the
- * target element.
- *
- * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
- * a small task because UDS's tooltip logic only really works for short text - it might be
- * better to use a third-party library).
- */
-const useOverlaidPosition = _ref3 => {
-  let {
-    isShown = false,
-    offsets,
-    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
-    align = {
-      center: 'center',
-      top: 'bottom'
-    }
-  } = _ref3;
-  // Element in main document flow that the targetRef element is positioned around
-  const sourceRef = useRef(null);
-  const [sourceLayout, setSourceLayout] = useState(null);
-
-  // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
-  const targetRef = useRef(null);
-  const [targetDimensions, setTargetDimensions] = useState(null);
-  const [windowDimensions, setWindowDimensions] = useState(null);
-  const onTargetLayout = useCallback(_ref4 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width,
-          height
-        }
-      }
-    } = _ref4;
-    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
-    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
-    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
-    setTargetDimensions(previousDimensions => {
-      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
-      // if user scrolls while a slidedown animation is changing the height and recalculating position.
-      if (!previousDimensions && width && height) {
-        return {
-          width,
-          height
-        };
-      }
-      return previousDimensions;
-    });
-  }, []);
-  const readyToShow = Boolean(isShown && sourceRef.current);
-  useEffect(() => {
-    const handleDimensionsChange = _ref5 => {
-      var _sourceRef$current;
-      let {
-        window
-      } = _ref5;
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
-        // Could add a debouncer here if there's too many rerenders during gradual resizes
-        setWindowDimensions(window);
-        setSourceLayout({
-          x,
-          y,
-          width,
-          height
-        });
-      });
-    };
-    let subscription;
-    const unsubscribe = () => {
-      var _subscription;
-      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
-        // React Native >=0.65.0
-        subscription.remove();
-      } else if (typeof Dimensions.remove === 'function') {
-        // React Native <0.65.0
-        Dimensions.remove('change', handleDimensionsChange);
-      }
-      setSourceLayout(null);
-      setTargetDimensions(null);
-    };
-    if (readyToShow) {
-      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
-      handleDimensionsChange({
-        window: Dimensions.get('window')
-      });
-    } else {
-      unsubscribe();
-    }
-    return unsubscribe;
-  }, [readyToShow]);
-  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
-  const overlaidPosition = isReady ? getOverlaidPosition({
-    sourceLayout,
-    targetDimensions,
-    windowDimensions,
-    offsets,
-    align
-  }) : {};
-  return {
-    overlaidPosition,
-    sourceRef,
-    targetRef,
-    onTargetLayout,
-    isReady
-  };
-};
-export default useOverlaidPosition;

package/lib-module/utils/useTypographyTheme.js

@@ -1,24 +0,0 @@
-import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base';
-const useTypographyTheme = (variant, tokens) => {
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Typography', tokens, variant, {
-    viewport
-  });
-  const {
-    themeOptions
-  } = useTheme();
-  const {
-    fontSize,
-    lineHeight,
-    ...rnStyles
-  } = applyTextStyles({
-    ...themeTokens,
-    themeOptions
-  });
-  return {
-    ...rnStyles,
-    fontSize: `${fontSize}px`,
-    lineHeight: `${lineHeight}px`
-  };
-};
-export default useTypographyTheme;