@bitrise/bitkit 10.35.2-alpha-chakra.1 → 10.36.0

package/src/Old/Base/Base.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import './Base.css';
+
+export type TypeBorderRadius = 'x1' | 'x2' | 'x4' | 'rounded';
+
+export const newToOld = {
+  'neutral.100': 'white',
+  'neutral.10': 'black',
+  'neutral.95': 'gray-1',
+  'neutral.93': 'gray-2',
+  'neutral.90': 'gray-3',
+  'neutral.80': 'gray-4',
+  'neutral.70': 'gray-5',
+  'neutral.50': 'gray-6',
+  'neutral.40': 'gray-7',
+  'neutral.30': 'gray-8',
+  'turquoise.95': 'aqua-1',
+  'turquoise.80': 'aqua-2',
+  'turquoise.70': 'aqua-3',
+  'turquoise.60': 'aqua-4',
+  'turquoise.50': 'aqua-5',
+  'purple.95': 'grape-1',
+  'purple.70': 'grape-2',
+  'purple.50': 'grape-3',
+  'purple.30': 'grape-4',
+  'purple.10': 'grape-5',
+  'purple.40': 'eggplant',
+  'red.93': 'red-1',
+  'red.70': 'red-2',
+  'red.50': 'red-3',
+  'red.40': 'red-4',
+  'red.30': 'red-5',
+  'yellow.95': 'yellow-1',
+  'yellow.90': 'yellow-2',
+  'yellow.80': 'yellow-3',
+  'yellow.70': 'yellow-4',
+  'yellow.40': 'yellow-5',
+  'green.95': 'green-1',
+  'green.80': 'green-2',
+  'green.60': 'green-3',
+  'green.50': 'green-4',
+  'green.40': 'green-5',
+  'blue.93': 'blue-1',
+  'blue.95': 'blue-95',
+  'blue.70': 'blue-2',
+  'blue.50': 'blue-3',
+  'blue.40': 'blue-4',
+  'blue.30': 'blue-5',
+  'blue.60': 'darkblue-2',
+  'blue.20': 'darkblue-4',
+  'blue.10': 'darkblue-5',
+  'purple.20': 'violet-5',
+  'red.95': 'red-95',
+  'orange-3': 'orange-3',
+  'turquoise.40': 'turquoise-40',
+} as const;
+
+export type TypeColors = keyof typeof newToOld;
+
+export type TypeSizes = 'x0' | 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x8' | 'x10' | 'x12' | 'x16';
+
+export interface Props {
+  /**
+   * Sets the type of component to be rendered. Can be a
+   * string for an HTML tag or a React component.
+   * */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component?: string | React.ComponentType<any>;
+  /** Absolute positioning, useful for quick centering in a relative surrounding. */
+  absolute?: boolean | 'center';
+  /** Sets the background color of any of the valid swatch colors. */
+  backgroundColor?: TypeColors;
+  /** Sets the border color of any of the valid swatch colors. */
+  borderColor?: TypeColors;
+  /** Sets the border radius to a multiple value. E.g. 'x1'. */
+  borderRadius?: TypeBorderRadius;
+  /** Sets the border radius to a multiple value. E.g. 'x1'. */
+  borderWidth?: 'x1' | 'x2' | 'x3';
+  /** Standard class name property. */
+  className?: string;
+  /** Sets the border radius to a multiple value. E.g. x1 */
+  clickable?: boolean;
+  /** Sets relative positioning */
+  container?: boolean;
+  /** Sets an elevated style with box-shadow, with a multiple value. E.g. x1 */
+  elevation?: 'x1' | 'x2' | 'x3';
+  /** Sets inline height styling  */
+  height?: number | string;
+  /** Similar to other libraries, an alias to pass a ref to the final React element. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  innerRef?: React.Ref<any>;
+  /** Sets the margin to a multiple value. E.g. 'x1'. */
+  margin?: TypeSizes;
+  /** Sets inline max-height styling  */
+  maxHeight?: number | string;
+  /** Sets inline max-width styling  */
+  maxWidth?: number | string;
+  /** Sets inline min-height styling  */
+  minHeight?: number | string;
+  /** Sets inline min-width styling  */
+  minWidth?: number | string;
+  /** Sets the vertical and horizontal padding to a multiple value. E.g. 'x1'. */
+  padding?: TypeSizes;
+  /** Sets the horizontal padding to a multiple value. E.g. 'x1'. */
+  paddingHorizontal?: TypeSizes;
+  /** Sets the vertical padding to a multiple value. E.g. 'x1'. */
+  paddingVertical?: TypeSizes;
+  /** Sets the overflow */
+  overflow?: 'hidden' | 'scroll' | 'auto';
+  /** Standard style property. */
+  style?: React.CSSProperties | { [key: string]: number | string };
+  /** @ignore */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref?: React.Ref<any>;
+  /** Sets the font color of any of the valid swatch colors. */
+  textColor?: TypeColors;
+  /** Sets inline width styling  */
+  width?: number | string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+/**
+ * The Base component is the end of the line for all components and
+ * provides general and utility like styling.
+ * */
+const Base: React.FunctionComponent<Props> = (props: Props) => {
+  const {
+    Component,
+    absolute,
+    backgroundColor,
+    borderColor,
+    borderWidth = borderColor ? 'x1' : undefined,
+    borderRadius,
+    children,
+    className,
+    clickable,
+    container,
+    elevation,
+    height,
+    innerRef,
+    margin,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding,
+    paddingHorizontal = padding,
+    paddingVertical = padding,
+    overflow,
+    style,
+    textColor,
+    width,
+    ...rest
+  } = props;
+
+  const FinalComponent = Component || 'div';
+  const classes = classnames(
+    'Base',
+    {
+      'Base--absolute': absolute === true,
+      [`Base--absolute-${absolute}`]: typeof absolute === 'string',
+      [`Base--background-color-${newToOld[backgroundColor!]}`]: backgroundColor,
+      [`Base--border-radius-${borderRadius}`]: borderRadius,
+      [`Base--border-color-${newToOld[borderColor!]}`]: borderColor,
+      [`Base--border-width-${borderWidth}`]: borderWidth,
+      'Base--clickable': clickable,
+      'Base--container': container,
+      [`Base--elevation-${elevation}`]: elevation,
+      [`Base--margin-${margin}`]: margin,
+      'Base--max-width': maxWidth,
+      [`Base--overflow-${overflow}`]: overflow,
+      [`Base--padding-horizontal-${paddingHorizontal}`]: paddingHorizontal,
+      [`Base--padding-vertical-${paddingVertical}`]: paddingVertical,
+      [`Base--text-color-${newToOld[textColor!]}`]: textColor,
+    },
+    className,
+  );
+
+  // Work around for findDOMNode area causing constant renders. Forwards
+  // refs for component compositions.
+  if (typeof FinalComponent === 'string') {
+    rest.ref = innerRef;
+    delete rest.innerRef;
+  }
+
+  return (
+    <FinalComponent
+      {...rest}
+      className={classes}
+      style={{ ...style, height, maxHeight, maxWidth, minHeight, minWidth, width }}
+    >
+      {children}
+    </FinalComponent>
+  );
+};
+
+export default Base;

package/src/Old/Flex/Flex.css

@@ -0,0 +1,105 @@
+/* stylelint-disable selector-max-universal */
+
+.Flex { flex: 0 0 auto; }
+
+.Flex--grow,
+.Flex--grow-x1 {
+  flex-grow: 1;
+}
+
+.Flex--grow-x2 { flex-grow: 2; }
+.Flex--grow-x3 { flex-grow: 3; }
+.Flex--grow-x4 { flex-grow: 4; }
+
+.Flex--shrink,
+.Flex--shrink-x1,
+.Flex--shrink-x2,
+.Flex--shrink-x3,
+.Flex--shrink-x4 {
+  min-width: 0;
+}
+
+.Flex--shrink,
+.Flex--shrink-x1 {
+  flex-shrink: 1;
+}
+
+.Flex--shrink-x2 { flex-shrink: 2; }
+.Flex--shrink-x3 { flex-shrink: 3; }
+.Flex--shrink-x4 { flex-shrink: 4; }
+
+.Flex--initial-none      { flex-basis: 0%; }
+.Flex--initial-content   { flex-basis: auto; }
+.Flex--initial-container { flex-basis: 100%; }
+
+.Flex--horizontal,
+.Flex--vertical {
+  display: flex;
+}
+
+.Flex--wrap { flex-wrap: wrap; }
+
+.Flex--horizontal > .Flex--initial-none { width: 0; }
+.Flex--vertical > .Flex--initial-none { height: 0; }
+
+.Flex--horizontal { flex-direction: row; }
+.Flex--vertical   { flex-direction: column; }
+.Flex--horizontal.Flex--reverse { flex-direction: row-reverse; }
+.Flex--vertical.Flex--reverse   { flex-direction: column-reverse; }
+
+.Flex--align-self-start  { align-self: flex-start; }
+.Flex--align-self-middle { align-self: center; }
+.Flex--align-self-end    { align-self: flex-end; }
+
+.Flex--horizontal.Flex--align-horz-start   { justify-content: flex-start; }
+.Flex--horizontal.Flex--align-horz-middle  { justify-content: center; }
+.Flex--horizontal.Flex--align-horz-end     { justify-content: flex-end; }
+.Flex--horizontal.Flex--align-horz-around  { justify-content: space-around; }
+.Flex--horizontal.Flex--align-horz-between { justify-content: space-between; }
+
+.Flex--horizontal.Flex--align-vert-start    { align-items: flex-start; }
+.Flex--horizontal.Flex--align-vert-middle   { align-items: center; }
+.Flex--horizontal.Flex--align-vert-end      { align-items: flex-end; }
+.Flex--horizontal.Flex--align-vert-baseline { align-items: baseline; }
+
+.Flex--vertical.Flex--align-horz-start  { align-items: flex-start; }
+.Flex--vertical.Flex--align-horz-middle { align-items: center; }
+.Flex--vertical.Flex--align-horz-end    { align-items: flex-end; }
+
+.Flex--vertical.Flex--align-vert-start   { justify-content: flex-start; }
+.Flex--vertical.Flex--align-vert-middle  { justify-content: center; }
+.Flex--vertical.Flex--align-vert-end     { justify-content: flex-end; }
+.Flex--vertical.Flex--align-vert-around  { justify-content: space-around; }
+.Flex--vertical.Flex--align-vert-between { justify-content: space-between; }
+
+.Flex--vertical.Flex--gap-x1 > * { margin: calc(var(--size--x1) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x2 > * { margin: calc(var(--size--x2) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x3 > * { margin: calc(var(--size--x3) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x4 > * { margin: calc(var(--size--x4) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x5 > * { margin: calc(var(--size--x5) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x6 > * { margin: calc(var(--size--x6) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x8 > * { margin: calc(var(--size--x8) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x10 > * { margin: calc(var(--size--x10) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x12 > * { margin: calc(var(--size--x12) * 0.5) 0; }
+.Flex--vertical.Flex--gap-x16 > * { margin: calc(var(--size--x16) * 0.5) 0; }
+
+.Flex--horizontal.Flex--gap-x1 > * { margin: 0 calc(var(--size--x1) * 0.5); }
+.Flex--horizontal.Flex--gap-x2 > * { margin: 0 calc(var(--size--x2) * 0.5); }
+.Flex--horizontal.Flex--gap-x3 > * { margin: 0 calc(var(--size--x3) * 0.5); }
+.Flex--horizontal.Flex--gap-x4 > * { margin: 0 calc(var(--size--x4) * 0.5); }
+.Flex--horizontal.Flex--gap-x5 > * { margin: 0 calc(var(--size--x5) * 0.5); }
+.Flex--horizontal.Flex--gap-x6 > * { margin: 0 calc(var(--size--x6) * 0.5); }
+.Flex--horizontal.Flex--gap-x8 > * { margin: 0 calc(var(--size--x8) * 0.5); }
+.Flex--horizontal.Flex--gap-x10 > * { margin: 0 calc(var(--size--x10) * 0.5); }
+.Flex--horizontal.Flex--gap-x12 > * { margin: 0 calc(var(--size--x12) * 0.5); }
+.Flex--horizontal.Flex--gap-x16 > * { margin: 0 calc(var(--size--x16) * 0.5); }
+
+.Flex--gapped.Flex--vertical:not(.Flex--reverse) > *:first-child { margin-top: 0; }
+.Flex--gapped.Flex--vertical:not(.Flex--reverse) > *:last-child { margin-bottom: 0; }
+.Flex--gapped.Flex--vertical.Flex--reverse > *:first-child { margin-bottom: 0; }
+.Flex--gapped.Flex--vertical.Flex--reverse > *:last-child { margin-top: 0; }
+
+.Flex--gapped.Flex--horizontal:not(.Flex--reverse) > *:first-child { margin-left: 0; }
+.Flex--gapped.Flex--horizontal:not(.Flex--reverse) > *:last-child { margin-right: 0; }
+.Flex--gapped.Flex--horizontal.Flex--reverse > *:first-child { margin-right: 0; }
+.Flex--gapped.Flex--horizontal.Flex--reverse > *:last-child { margin-left: 0; }

package/src/Old/Flex/Flex.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Base, { Props as BaseProps, TypeSizes } from '../Base/Base';
+import './Flex.css';
+
+export interface Props extends BaseProps {
+  /**
+   * Used on a parent, sets both the horizontal and vertical alignment of flex children.
+   * Must be used in conjuction with the 'direction' prop.
+   * */
+  alignChildren?: 'start' | 'middle' | 'end';
+  /**
+   * Used on a parent, sets both the horizontal alignment of flex children.
+   * Must be used in conjuction with the 'direction' prop.
+   * */
+  alignChildrenHorizontal?: 'start' | 'middle' | 'end' | 'around' | 'between';
+  /**
+   * Used on a parent, sets both the vertical alignment of flex children.
+   * Must be used in conjuction with the 'direction' prop.
+   * */
+  alignChildrenVertical?: 'start' | 'middle' | 'end' | 'around' | 'between' | 'baseline';
+  /**
+   * Set the alignment of a flex child. Must be used inside a parent
+   * using the 'direction' prop.
+   */
+  alignSelf?: 'start' | 'middle' | 'end';
+  /** @ignore */
+  className?: string;
+  /** Used on a parent, activates flex behaviour for children. */
+  direction?: 'horizontal' | 'vertical';
+  /** Used on a parent, reverses the layout direction  */
+  reverse?: boolean;
+  /**
+   * Used on a parent, sets the distances between flex children to
+   * a multiple value. E.g. 'x1'.
+   */
+  gap?: TypeSizes;
+  /** Sets a child to grow from it's initial width. (flex-grow: 1;) */
+  grow?: boolean | 'x1' | 'x2' | 'x3' | 'x4';
+  /** Sets a childs initial width before flex calculations. (flex-basis)  */
+  initial?: 'content' | 'container' | 'none';
+  /** Sets a child to shrink from it's initial width. (flex-shrink: 1;) */
+  shrink?: boolean | 'x1' | 'x2' | 'x3' | 'x4';
+  /** Used on a parent, allows it's children to wrap onto new rows.. */
+  wrap?: boolean;
+}
+
+/**
+ * A useful and quick Flex component for handling
+ * frequent and common layouts of all sizes.
+ */
+const Flex: React.FunctionComponent<Props> = (props: Props) => {
+  const {
+    alignChildren,
+    alignChildrenHorizontal = alignChildren,
+    alignChildrenVertical = alignChildren,
+    alignSelf,
+    className,
+    direction,
+    reverse,
+    grow,
+    gap,
+    initial,
+    shrink,
+    wrap,
+    ...rest
+  } = props;
+
+  const classes = classnames(
+    'Flex',
+    {
+      [`Flex--align-horz-${alignChildrenHorizontal}`]: alignChildrenHorizontal,
+      [`Flex--align-self-${alignSelf}`]: alignSelf,
+      [`Flex--align-vert-${alignChildrenVertical}`]: alignChildrenVertical,
+      [`Flex--${direction}`]: direction,
+      [`Flex--initial-${initial}`]: initial,
+      'Flex--gapped': gap,
+      [`Flex--gap-${gap}`]: gap,
+      'Flex--reverse': reverse,
+      'Flex--grow': grow === true,
+      [`Flex--grow-${grow}`]: typeof grow === 'string',
+      'Flex--shrink': shrink === true,
+      [`Flex--shrink-${shrink}`]: typeof shrink === 'string',
+      'Flex--wrap': wrap,
+    },
+    className,
+  );
+
+  return <Base {...rest} className={classes} />;
+};
+
+export default Flex;

package/src/Old/Placement/Placement.css

@@ -0,0 +1,100 @@
+
+.Placement {
+  position: absolute;
+  z-index: var(--z-index-Placement--below-modal);
+}
+
+.Placement--above-modal {
+  z-index: var(--z-index-Placement--above-modal);
+}
+
+.Placement--top .Placement__content { transform: translateY(calc(var(--size--x4) * -1)); }
+.Placement--bottom .Placement__content { transform: translateY(var(--size--x4)); }
+
+.Placement .Placement__content-appear-active,
+.Placement .Placement__content-appear-done,
+.Placement .Placement__content-enter-active,
+.Placement .Placement__content-enter-done,
+.Placement .Placement__content-exit {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: all;
+}
+
+.Placement--top .Placement__content-appear,
+.Placement--top .Placement__content-enter,
+.Placement--top .Placement__content-exit-active,
+.Placement--top .Placement__content-exit-done {
+  transform: translateY(calc(var(--size--x4) * -1));
+  opacity: 0;
+}
+
+.Placement--bottom .Placement__content-appear,
+.Placement--bottom .Placement__content-enter,
+.Placement--bottom .Placement__content-exit-active,
+.Placement--bottom .Placement__content-exit-done {
+  transform: translateY(var(--size--x4));
+  opacity: 0;
+}
+
+.Placement__shadow {
+  border-radius: var(--size--x2);
+  filter: drop-shadow(0 0.125rem 0.3125rem rgba(199, 205, 207, 0.7));
+}
+
+.Placement__area--horizontal .Placement__area:not(:last-child) {
+  border-right: 0.0625rem solid var(--color-gray--2);
+}
+
+.Placement__area--vertical .Placement__area:not(:last-child) {
+  border-top: 0.0625rem solid var(--color-gray--2);
+}
+
+.Placement__arrow,
+.Placement__arrow::before {
+  position: absolute;
+  width: var(--size--x3);
+  height: var(--size--x3);
+}
+
+.Placement__arrow,
+.Placement__arrow:first-child,
+.Placement__arrow:last-child {
+  visibility: hidden;
+}
+
+.Placement__arrow::before {
+  content: '';
+  display: block;
+  transform: rotate(45deg);
+  background: inherit;
+  visibility: visible;
+}
+
+.Placement--top .Placement__arrow,
+.Placement--top-start .Placement__arrow,
+.Placement--top-end .Placement__arrow {
+  top: 100%;
+  margin-top: -0.375rem;
+}
+
+.Placement--right .Placement__arrow,
+.Placement--right-start .Placement__arrow,
+.Placement--right-end .Placement__arrow {
+  right: 100%;
+  margin-right: -0.375rem;
+}
+
+.Placement--bottom .Placement__arrow,
+.Placement--bottom-start .Placement__arrow,
+.Placement--bottom-end .Placement__arrow {
+  bottom: 100%;
+  margin-bottom: -0.375rem;
+}
+
+.Placement--left .Placement__arrow,
+.Placement--left-start .Placement__arrow,
+.Placement--left-end .Placement__arrow {
+  left: 100%;
+  margin-left: -0.375rem;
+}

package/src/Old/Placement/Placement.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Placement as TypePlacement } from '@popperjs/core';
+import { Props as BaseProps } from '../Base/Base';
+import PlacementPopper from './PlacementPopper';
+import './Placement.css';
+
+export interface Props extends BaseProps {
+  /**
+   * Flag that enables CSS animations ont he top level
+   * transform positioning.
+   */
+  animatePosition?: boolean;
+  /**
+   * A render callback function that provides a
+   * update function to trigger a reposition,
+   * and the width of the target that is being positioned
+   * around.
+   */
+  children: (props: { update: () => void; width?: number }) => React.ReactNode;
+  /**
+   * Flag that disables repositioning on scroll and resize events.
+   */
+  disableReposition?: boolean;
+  /**
+   * Flag that enables flipping the positioned content to the
+   * other side when there is not enough room on the screen.
+   */
+  flip?: boolean;
+  /**
+   * A callback that is called when the component is
+   * in a visible state and the area around it has been clicked on.
+   */
+  onClose?: (event: MouseEvent) => void;
+  /**
+   * The desired placement of the positioned content, note that if there
+   * is not sufficient room and an a better alternative is available it
+   * might not be used.
+   */
+  placement?: TypePlacement;
+  /**
+   * An optional reference element to be used as the target.
+   */
+  referenceElement?: any;
+  sameWidth?: boolean;
+  /**
+   * The visibilty of the positioned content.
+   */
+  visible?: boolean;
+  /**
+   * The desired animation speed on milliseconds.
+   */
+  timeout?: number;
+}
+
+/**
+ * The Placement component is used to absolutely position content on the
+ * screen around another target. Under the hood it uses the positioning
+ * engine library called Popper.js.
+ *
+ * When the positioning target is another DOM element on the screen the
+ * Placement component should be used in conjunction with PlacementManager
+ * and PlacementReference. If the target is an existing reference element
+ * it can be used by iteself by using the referenceElement prop.
+ */
+const Placement: React.FunctionComponent<Props> = (props: Props) => (
+  <PlacementPopper {...props} closeElement={null} isInsideModal={false} />
+);
+
+Placement.defaultProps = {
+  flip: true,
+  visible: true,
+};
+
+export default Placement;

package/src/Old/Placement/PlacementArea.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import PlacementArrow from './PlacementArrow';
+
+export interface Props extends FlexProps {
+  /**
+   * When used as a container for multiple PlacementAreas
+   * the direction can be set to split with a dividing line
+   * either horizontally or vertically.
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * Inserts the dynamically positioned arrow/tip.
+   */
+  withArrow?: boolean;
+}
+
+/**
+ * The content area(s) of the placed element. This acts as the main
+ * container for the content as well as the optional arrow that is dynamically
+ * positioned. This component can also act as a parent to other PlacementAreas
+ * when the content should be divided (see direction prop).
+ */
+const PlacementArea: React.FunctionComponent<Props> = (props: Props) => {
+  const { children, direction, padding, paddingHorizontal, paddingVertical, withArrow, ...rest } = props;
+
+  const classes = classnames('Placement__area', {
+    [`Placement__area--${direction}`]: direction,
+  });
+
+  return (
+    <Flex {...rest} className={classes}>
+      {withArrow && <PlacementArrow />}
+
+      <Flex
+        className="Placement__area-content"
+        direction={direction}
+        padding={padding}
+        paddingHorizontal={paddingHorizontal}
+        paddingVertical={paddingVertical}
+      >
+        {children}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default PlacementArea;

package/src/Old/Placement/PlacementArrow.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Base, { Props as BaseProps } from '../Base/Base';
+import { PlacementArrowPropsContext } from './PlacementArrowPropsContext';
+
+export type Props = BaseProps;
+
+/**
+ * The dynamically positioned arrow/tip.
+ */
+const PlacementArrow: React.FunctionComponent<Props> = (props: Props) => {
+  return (
+    <PlacementArrowPropsContext.Consumer>
+      {({ backgroundColor, ref, style }) => (
+        <Base {...props} backgroundColor={backgroundColor} className="Placement__arrow" innerRef={ref} style={style} />
+      )}
+    </PlacementArrowPropsContext.Consumer>
+  );
+};
+
+export default PlacementArrow;

package/src/Old/Placement/PlacementArrowPropsContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { PopperArrowProps } from 'react-popper';
+import { TypeColors } from '../Base/Base';
+
+export const PlacementArrowPropsContext = createContext<PopperArrowProps & { backgroundColor?: TypeColors }>({
+  backgroundColor: 'neutral.95',
+  ref: () => {},
+  style: {},
+});

package/src/Old/Placement/PlacementManager.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Manager, ManagerProps } from 'react-popper';
+import { PlacementManagerContext } from './PlacementManagerContext';
+
+const { useState } = React;
+
+export type Props = ManagerProps;
+
+/**
+ * The manager component handles the ref communication between
+ * the Placement and PlacementReference components.
+ */
+const PlacementManager: React.FunctionComponent<Props> = (props: Props) => {
+  const [referenceNode, setReferenceNode] = useState<null | HTMLElement>(null);
+
+  return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <PlacementManagerContext.Provider value={{ referenceNode, setReferenceNode }}>
+      <Manager {...props} />
+    </PlacementManagerContext.Provider>
+  );
+};
+
+export default PlacementManager;

package/src/Old/Placement/PlacementManagerContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export const PlacementManagerContext = createContext<{
+  referenceNode: HTMLElement | null;
+  setReferenceNode(referenceNode: HTMLElement | null): void;
+}>({
+  referenceNode: null,
+  setReferenceNode: () => {},
+});