@coinbase/cds-common 0.0.0 → 8.13.2

package/esm/hooks/useEventHandler.js

@@ -0,0 +1,54 @@
+import { useCallback, useContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { EventHandlerContext } from '../system/EventHandlerProvider';
+const noOp = () => {};
+export const useEventHandler = (component, action, eventConfig, analyticsId) => {
+  const config = useContext(EventHandlerContext);
+  return useCallback(() => {
+    var _actionMapping$action, _handler$convertedAct;
+    if (!config.handlers || !(eventConfig !== null && eventConfig !== void 0 && eventConfig.actions.length) && !analyticsId) {
+      return noOp();
+    }
+    const handler = config === null || config === void 0 ? void 0 : config.handlers[component];
+    if (!handler) {
+      return noOp();
+    }
+    const {
+      actionMapping
+    } = config;
+
+    /**
+     * Handler can provide an actionMapping object that maps
+     * CDS events (onClick, onHover) to its event names.
+     * If actionMapping is provided we convert CDS action into the handler one
+     * if the mapping between the two values exists
+     */
+    const convertedAction = (_actionMapping$action = actionMapping === null || actionMapping === void 0 ? void 0 : actionMapping[action]) !== null && _actionMapping$action !== void 0 ? _actionMapping$action : action;
+    const callback = (_handler$convertedAct = handler[convertedAction]) !== null && _handler$convertedAct !== void 0 ? _handler$convertedAct : noOp;
+    const params = {};
+
+    /**
+     * AnalyticsId is a generic way of autologging events without any meta
+     * information besides the ID, giving a way to log events without having
+     * engineers to manually include any contextual information. AnalyticsId
+     * would be used to identify the component that fires the event.
+     * Providing an analyticsId would take precendence over eventConfig
+     */
+    if (analyticsId) {
+      params.analyticsId = analyticsId;
+    }
+
+    /**
+     * the component event config provides a list of actions to track.
+     * If the current action is not listed we return a noOp
+     */
+    if (eventConfig !== null && eventConfig !== void 0 && eventConfig.actions.includes(convertedAction)) {
+      params.componentName = eventConfig.componentName;
+      params.data = eventConfig.data;
+    }
+    if (isEmpty(params)) {
+      return noOp();
+    }
+    return callback(params);
+  }, [action, component, config, eventConfig, analyticsId]);
+};

package/esm/hooks/useFallbackShape.js

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { shapeBorderRadius } from '../tokens/borderRadius';
+const WIDTH_MODIFIERS = [0.5, 0, 0.6, 0.8, 0.1, 0.9, 0.4, 0.2, 0.7, 0.3];
+export function useFallbackShape(shape, baseWidth, options) {
+  const width = useMemo(() => {
+    // When rectangle, lets vary the width a bit so things are
+    // a little less... uniform. Variety is nice.
+    if (shape === 'rectangle' && typeof baseWidth === 'number' && (!(options !== null && options !== void 0 && options.disableRandomRectWidth) || (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined)) {
+      const modifier = (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined ? WIDTH_MODIFIERS[options.rectWidthVariant % WIDTH_MODIFIERS.length] : Math.random();
+      const quarter = Math.round(baseWidth / 4);
+      const min = Math.max(baseWidth - quarter, 1);
+      const max = baseWidth + quarter;
+      return Math.floor(modifier * (max - min + 1)) + min;
+    }
+
+    // All other shapes need a fixed aspect ratio
+    return baseWidth;
+  }, [baseWidth, options, shape]);
+  const borderRadius = useMemo(() => {
+    if (shape === 'circle' && Number.isInteger(width)) {
+      return Number(width) / 2;
+    }
+    return shape === 'squircle' ? shapeBorderRadius.squircle : 0;
+  }, [shape, width]);
+  return useMemo(() => ({
+    borderRadius,
+    width
+  }), [borderRadius, width]);
+}

package/esm/hooks/useGroupToggler.js

@@ -0,0 +1,105 @@
+// internal to CDS, each platform customizes on top of this hook.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/**
+ *
+ * @param values - An array of all possible options. Make sure the array doesn't change if it's the same values so that the handlers will also stay the same.
+ * @param initialState - Initial checked option values.
+ * @returns [
+ *  selectedValues,
+    {
+      select,
+      unselect,
+      toggle,
+      isAllSelected,
+    }
+  ]
+ */
+
+/** @deprecated Do not use this. */
+export const useGroupToggler = (values, initialState) => {
+  // The function inside useState will still run on every render.
+  // This makes sure that we are not creating new Sets on every render
+  // and just throwing it away immediately.
+  const initialStateSet = useMemo(() => new Set(initialState), [initialState]);
+  const [state, setState] = useState(initialStateSet);
+  const lastMixedStateRef = useRef();
+  useEffect(() => {
+    const isStateMixed = state.size !== 0 && state.size !== values.length;
+    if (isStateMixed) {
+      lastMixedStateRef.current = state;
+    }
+  }, [state, values.length, lastMixedStateRef]);
+  const select = useCallback(value => {
+    setState(prevState => {
+      if (!value) {
+        // select all
+        return new Set(values);
+      }
+      const nextState = new Set(prevState).add(value);
+      if (nextState.size === values.length) {
+        lastMixedStateRef.current = undefined;
+      }
+      return nextState;
+    });
+  }, [setState, values]);
+  const unselect = useCallback(value => {
+    setState(prevState => {
+      if (!value) {
+        // unselect all
+        return new Set();
+      }
+      const nextState = new Set(prevState);
+      if (nextState.size === 0) {
+        lastMixedStateRef.current = undefined;
+      }
+      return nextState;
+    });
+  }, [setState]);
+  const toggle = useCallback(value => {
+    setState(prevState => {
+      // group
+      if (!value) {
+        const isAllSelected = prevState.size === values.length;
+        const isAllUnSelected = prevState.size === 0;
+        if (isAllSelected) {
+          return new Set();
+        }
+        if (isAllUnSelected) {
+          // last mixed values if any
+          return lastMixedStateRef.current ? lastMixedStateRef.current : new Set(values);
+        }
+        // mixed
+        return new Set(values);
+      }
+
+      // individual value
+      const nextState = new Set(prevState);
+      if (nextState.delete(value)) {
+        if (nextState.size === 0) {
+          lastMixedStateRef.current = undefined;
+        }
+        return nextState;
+      }
+      nextState.add(value);
+      if (nextState.size === values.length) {
+        lastMixedStateRef.current = undefined;
+      }
+      return nextState;
+    });
+  }, [setState, values]);
+  const isAllSelected = useMemo(() => {
+    if (state.size === 0) {
+      return false;
+    }
+    if (state.size === values.length) {
+      return true;
+    }
+    return 'mixed';
+  }, [state, values.length]);
+  return [state, {
+    select,
+    unselect,
+    toggle,
+    isAllSelected
+  }];
+};

package/esm/hooks/useHasMounted.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export const useHasMounted = () => {
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => setHasMounted(true), []);
+  return hasMounted;
+};

package/esm/hooks/useIndexCounter.js

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, useState } from 'react';
+import { noop } from '@coinbase/cds-utils';
+export function useIndexCounter(_ref) {
+  let {
+    length,
+    startIndex = 0,
+    onDecrement = noop,
+    onIncrement = noop,
+    onMinDecrement = noop,
+    onMaxIncrement = noop
+  } = _ref;
+  const [activeIndex, setActiveIndex] = useState(startIndex);
+  const isAtMin = activeIndex === 0;
+  const isAtMax = activeIndex === length - 1;
+  const handleDecrement = useCallback(() => {
+    if (isAtMin) {
+      onMinDecrement();
+    } else {
+      setActiveIndex(curr => {
+        const newactiveIndex = curr - 1;
+        onDecrement(newactiveIndex);
+        return newactiveIndex;
+      });
+    }
+  }, [isAtMin, onDecrement, onMinDecrement]);
+  const handleIncrement = useCallback(() => {
+    if (isAtMax) {
+      onMaxIncrement();
+    } else {
+      setActiveIndex(curr => {
+        const newactiveIndex = curr + 1;
+        onIncrement(newactiveIndex);
+        return newactiveIndex;
+      });
+    }
+  }, [isAtMax, onMaxIncrement, onIncrement]);
+  return useMemo(() => {
+    return {
+      activeIndex,
+      setActiveIndex,
+      isAtMin,
+      isAtMax,
+      handleDecrement,
+      handleIncrement
+    };
+  }, [activeIndex, handleDecrement, handleIncrement, isAtMin, isAtMax]);
+}

package/esm/hooks/useInputVariant.js

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+export const useInputVariant = (focused, variant) => {
+  return useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
+};

package/esm/hooks/useLogo.js

@@ -0,0 +1,60 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useMemo } from 'react';
+export const blue = '#0052FF';
+export const black = '#0A0B0D';
+export const white = '#FFFFFF';
+const logoMarkData = {
+  16: {
+    viewBox: '0 0 16 16',
+    path: 'M8,12c-2.21,0-4-1.79-4-4c0-2.21,1.79-4,4-4c1.86,0,3.41,1.28,3.86,3h4.07C15.44,3.05,12.08,0,8,0 C3.58,0,0,3.58,0,8c0,4.42,3.58,8,8,8c4.08,0,7.44-3.05,7.93-7h-4.07C11.41,10.72,9.86,12,8,12z'
+  },
+  24: {
+    viewBox: '0 0 24 24',
+    path: 'M12.0225 18C8.70131 18 6.01127 15.315 6.01127 12C6.01127 8.685 8.70131 6 12.0225 6C14.9981 6 17.4678 8.165 17.9436 11H24C23.489 4.84 18.3244 0 12.0225 0C5.3851 0 0 5.375 0 12C0 18.625 5.3851 24 12.0225 24C18.3244 24 23.489 19.16 24 13H17.9436C17.4678 15.835 14.9981 18 12.0225 18Z'
+  },
+  32: {
+    viewBox: '0 0 48 48',
+    path: 'M24,36c-6.63,0-12-5.37-12-12s5.37-12,12-12c5.94,0,10.87,4.33,11.82,10h12.09C46.89,9.68,36.58,0,24,0 C10.75,0,0,10.75,0,24s10.75,24,24,24c12.58,0,22.89-9.68,23.91-22H35.82C34.87,31.67,29.94,36,24,36z'
+  }
+};
+const wordmarkData = {
+  viewBox: '0 0 688 123',
+  path: 'M138.857 34.3392C113.863 34.3392 94.3343 53.3277 94.3343 78.7477C94.3343 104.168 113.37 122.994 138.857 122.994C164.343 122.994 183.71 103.843 183.71 78.5852C183.71 53.4902 164.674 34.3392 138.857 34.3392ZM139.025 104.674C124.792 104.674 114.363 93.611 114.363 78.754C114.363 63.7282 124.624 52.6714 138.857 52.6714C153.258 52.6714 163.681 63.897 163.681 78.754C163.681 93.611 153.258 104.674 139.025 104.674ZM189.168 53.659H201.584V121.35H221.443V35.9893H189.168V53.659ZM44.3536 52.6652C54.7832 52.6652 63.0581 59.103 66.1995 68.6785H87.2209C83.4113 48.2087 66.5305 34.3392 44.5223 34.3392C19.5288 34.3392 0 53.3277 0 78.754C0 104.18 19.0355 123 44.5223 123C66.0371 123 83.249 109.131 87.0586 88.492H66.1995C63.2205 98.0675 54.9456 104.674 44.516 104.674C30.1145 104.674 20.0222 93.611 20.0222 78.754C20.0285 63.7282 29.9584 52.6652 44.3536 52.6652ZM566.518 70.4973L551.954 68.3535C545.003 67.3659 540.038 65.0533 540.038 59.603C540.038 53.659 546.495 50.6901 555.264 50.6901C564.863 50.6901 570.989 54.8153 572.313 61.5844H591.511C589.357 44.4148 576.117 34.3455 555.763 34.3455C534.742 34.3455 520.84 45.0773 520.84 60.2656C520.84 74.7913 529.946 83.2167 548.313 85.8544L562.877 87.9982C569.996 88.9858 573.968 91.7984 573.968 97.0799C573.968 103.849 567.017 106.655 557.418 106.655C545.665 106.655 539.045 101.868 538.052 94.6048H518.523C520.347 111.281 533.418 123 557.25 123C578.933 123 593.328 113.093 593.328 96.0861C593.328 80.8979 582.905 72.9725 566.518 70.4973ZM211.514 0.825042C204.232 0.825042 198.767 6.10656 198.767 13.3694C198.767 20.6323 204.225 25.9138 211.514 25.9138C218.796 25.9138 224.26 20.6323 224.26 13.3694C224.26 6.10656 218.796 0.825042 211.514 0.825042ZM502.966 65.2158C502.966 46.7274 491.712 34.3455 467.88 34.3455C445.373 34.3455 432.795 45.7398 430.309 63.2407H450.007C451 56.4716 456.296 50.8588 467.549 50.8588C477.648 50.8588 482.613 55.3153 482.613 60.7656C482.613 67.866 473.507 69.6785 462.253 70.8349C447.028 72.4849 428.161 77.7664 428.161 97.58C428.161 112.937 439.583 122.837 457.788 122.837C472.021 122.837 480.958 116.893 485.43 107.48C486.092 115.9 492.38 121.35 501.155 121.35H512.74V103.687H502.972V65.2158H502.966ZM483.437 86.6794C483.437 98.0737 473.507 106.493 461.423 106.493C453.972 106.493 447.683 103.355 447.683 96.7549C447.683 88.3357 457.782 86.0231 467.05 85.0356C475.987 84.2105 480.952 82.2292 483.437 78.429V86.6794ZM378.012 34.3392C366.92 34.3392 357.652 38.9645 351.032 46.7211V0H331.172V121.35H350.701V110.124C357.321 118.212 366.758 123 378.012 123C401.843 123 419.886 104.18 419.886 78.754C419.886 53.3277 401.512 34.3392 378.012 34.3392ZM375.033 104.674C360.8 104.674 350.37 93.611 350.37 78.754C350.37 63.897 360.962 52.6714 375.195 52.6714C389.596 52.6714 399.689 63.7345 399.689 78.754C399.689 93.611 389.265 104.674 375.033 104.674ZM283.671 34.3392C270.762 34.3392 262.319 39.6208 257.354 47.0524V35.9893H237.656V121.344H257.516V74.9538C257.516 61.9094 265.791 52.6652 278.038 52.6652C289.46 52.6652 296.574 60.7531 296.574 72.4787V121.35H316.434V70.9974C316.44 49.5275 305.354 34.3392 283.671 34.3392ZM688 75.9476C688 51.5151 670.126 34.3455 646.126 34.3455C620.639 34.3455 601.934 53.4965 601.934 78.754C601.934 105.337 621.963 123 646.457 123C667.147 123 683.366 110.781 687.5 93.4485H666.81C663.831 101.043 656.549 105.337 646.781 105.337C634.035 105.337 624.436 97.4112 622.288 83.5417H687.994V75.9476H688ZM623.449 69.341C626.597 57.4529 635.534 51.6776 645.795 51.6776C657.049 51.6776 665.655 58.1155 667.641 69.341H623.449Z'
+};
+export const useLogoWordmark = _ref => {
+  let {
+    foreground,
+    colorScheme
+  } = _ref;
+  const color = colorScheme === 'dark' ? white : foreground ? black : blue;
+  return useMemo(() => {
+    return _objectSpread(_objectSpread({}, wordmarkData), {}, {
+      color
+    });
+  }, [color]);
+};
+export const useLogoMark = _ref2 => {
+  let {
+    size = 32,
+    foreground,
+    colorScheme
+  } = _ref2;
+  const {
+    viewBox,
+    path
+  } = logoMarkData[size];
+  const color = colorScheme === 'dark' ? white : foreground ? black : blue;
+  return useMemo(() => {
+    return {
+      color,
+      path,
+      viewBox,
+      width: size,
+      height: size
+    };
+  }, [color, path, size, viewBox]);
+};

package/esm/hooks/useMergeRefs.js

@@ -0,0 +1,14 @@
+export const useMergeRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+};

package/esm/hooks/usePrefixedId.js

@@ -0,0 +1,25 @@
+import { useId } from 'react';
+
+// We use generics to ensure the return type is inferred correctly
+
+/**
+ * Returns a prefixed id or array of prefixed ids from React.useId
+ * that are SSR safe and unique across the application.
+ * @param IdentifierPrefix - A string or array of strings to prefix the id with (optional).
+ * @link https://react.dev/reference/react/useId#useid
+ * @returns string | string[]
+ */
+export const usePrefixedId = identifierPrefix => {
+  const id = useId();
+
+  // If no prefix is provided, return a random id
+  if (!identifierPrefix) return id;
+
+  // If the prefix is a string, return a single prefixed id
+  if (typeof identifierPrefix === 'string') {
+    return "".concat(identifierPrefix, "-").concat(id);
+  }
+
+  // If the prefix is an array of strings, return an array of prefixed ids
+  return identifierPrefix.map(prefix => "".concat(prefix, "-").concat(id));
+};

package/esm/hooks/usePreviousValue.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react';
+export const usePreviousValue = value => {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+    // Cleanup on unmount
+    return () => {
+      ref.current = undefined;
+    };
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+};

package/esm/hooks/usePreviousValues.js

@@ -0,0 +1,26 @@
+import { useCallback, useRef } from 'react';
+
+// keeps track of all unique previous values
+// it's up to the user to add previous values
+export function usePreviousValues() {
+  let initialValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const previousValues = useRef(initialValues !== null && initialValues !== void 0 ? initialValues : []);
+  const addPreviousValue = useCallback(newValue => {
+    if (previousValues.current.length === 0 || previousValues.current[previousValues.current.length - 1] !== newValue) {
+      previousValues.current = [...previousValues.current, newValue];
+    }
+  }, [previousValues]);
+  const getPreviousValue = useCallback(allowDuplicates => {
+    if (previousValues.current.length > 1 && !allowDuplicates) {
+      return previousValues.current[previousValues.current.length - 2];
+    }
+    if (previousValues.current.length > 0) {
+      return previousValues.current[previousValues.current.length - 1];
+    }
+    return undefined;
+  }, [previousValues]);
+  return {
+    addPreviousValue,
+    getPreviousValue
+  };
+}

package/esm/hooks/useRefMap.js

@@ -0,0 +1,17 @@
+import { useCallback, useMemo, useRef } from 'react';
+export const useRefMap = function () {
+  let {
+    initialRefMap = {}
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const refs = useRef(initialRefMap);
+  const getRef = useCallback(id => id in refs.current ? refs.current[id] : null, []);
+  const registerRef = useCallback((id, ref) => {
+    refs.current[id] = ref;
+  }, []);
+  const api = useMemo(() => ({
+    refs: refs.current,
+    getRef,
+    registerRef
+  }), [refs, getRef, registerRef]);
+  return api;
+};

package/esm/hooks/useSort.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import get from 'lodash/get';
+export const useSort = _ref => {
+  let {
+    data,
+    sortBy,
+    sortDirection
+  } = _ref;
+  // TODO remove in the next major bump
+  // @ts-expect-error ensure old implementations don't fail
+  if (sortDirection === 'ASC') sortDirection = 'ascending';
+  // @ts-expect-error ensure old implementations don't fail
+  if (sortDirection === 'DESC') sortDirection = 'descending';
+  return useMemo(() => {
+    // Spread to avoid overwriting in place
+    return [...data].sort((a, b) => {
+      // Descending
+      if (sortDirection === 'descending') {
+        return (sortBy ? get(a, sortBy) : a) > (sortBy ? get(b, sortBy) : b) ? -1 : 1;
+      }
+
+      // Ascending (Default)
+      return (sortBy ? get(b, sortBy) : b) > (sortBy ? get(a, sortBy) : a) ? -1 : 1;
+    });
+  }, [data, sortDirection, sortBy]);
+};