@instructure/ui-position 9.0.1 → 9.0.2-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-1) (2024-05-22)
+
+**Note:** Version bump only for package @instructure/ui-position
+
+
+
+
+
 ## [9.0.1](https://github.com/instructure/instructure-ui/compare/v9.0.0...v9.0.1) (2024-05-09)
 
 **Note:** Version bump only for package @instructure/ui-position

package/es/Position/__new-tests__/Position.test.js

@@ -0,0 +1,506 @@
+var _Position, _Position2, _button, _div, _button2, _div2, _button3, _div3, _button4, _div4, _button5, _div5, _button6, _div6, _div7, _button7, _div8, _div9, _button8, _div10, _div11, _button9, _div12, _div13, _button10, _div14, _Position3, _div15, _button11, _div16, _Position4, _Position5;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { within } from '@instructure/ui-utils';
+import { Position } from '../index';
+describe('<Position />', () => {
+  const parentDefaults = {
+    width: 500,
+    height: 150,
+    padding: 100,
+    overflow: 'auto'
+  };
+  it('should render', () => {
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, _Position || (_Position = /*#__PURE__*/React.createElement(Position, {
+      constrain: "window",
+      renderTarget: /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target-btn"
+      }, "Target")
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const target = screen.getByTestId('target-btn');
+    const content = screen.getByTestId('content');
+    expect(target).toBeInTheDocument();
+    expect(target).toHaveTextContent('Target');
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveTextContent('Content');
+  });
+  it('should absolutely position content', () => {
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, _Position2 || (_Position2 = /*#__PURE__*/React.createElement(Position, {
+      constrain: "window",
+      renderTarget: /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target"
+      }, "Target")
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const content = screen.getByTestId('content');
+    const style = window.getComputedStyle(content);
+    expect(style.position).toBe('absolute');
+  });
+  it('should render right of target', async () => {
+    const onPositionChanged = jest.fn();
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, /*#__PURE__*/React.createElement(Position, {
+      placement: "end",
+      onPositionChanged: onPositionChanged,
+      renderTarget: _button || (_button = /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target"
+      }, "Target"))
+    }, _div || (_div = /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const target = screen.getByTestId('target');
+    const content = screen.getByTestId('content');
+    await waitFor(() => {
+      expect(onPositionChanged).toHaveBeenCalled();
+    });
+    const targetRect = target.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    expect(within(Math.floor(contentRect.left), Math.floor(targetRect.right))).toBe(true);
+  });
+  it('should render below target', async () => {
+    const onPositionChanged = jest.fn();
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, /*#__PURE__*/React.createElement(Position, {
+      placement: "bottom",
+      onPositionChanged: onPositionChanged,
+      renderTarget: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target"
+      }, "Target"))
+    }, _div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const target = screen.getByTestId('target');
+    const content = screen.getByTestId('content');
+    await waitFor(() => {
+      expect(onPositionChanged).toHaveBeenCalled();
+    });
+    const targetRect = target.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    expect(within(Math.floor(contentRect.top), Math.floor(targetRect.bottom), 1)).toBe(true);
+  });
+  it('should render left of target', async () => {
+    const onPositionChanged = jest.fn();
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, /*#__PURE__*/React.createElement(Position, {
+      placement: "start",
+      onPositionChanged: onPositionChanged,
+      renderTarget: _button3 || (_button3 = /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target"
+      }, "Target"))
+    }, _div3 || (_div3 = /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const target = screen.getByTestId('target');
+    const content = screen.getByTestId('content');
+    await waitFor(() => {
+      expect(onPositionChanged).toHaveBeenCalled();
+    });
+    const targetRect = target.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    expect(within(Math.floor(contentRect.right), Math.floor(targetRect.left))).toBe(true);
+  });
+  it('should render above target', async () => {
+    const onPositionChanged = jest.fn();
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, /*#__PURE__*/React.createElement(Position, {
+      placement: "top",
+      onPositionChanged: onPositionChanged,
+      renderTarget: _button4 || (_button4 = /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target"
+      }, "Target"))
+    }, _div4 || (_div4 = /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const target = screen.getByTestId('target');
+    const content = screen.getByTestId('content');
+    await waitFor(() => {
+      expect(onPositionChanged).toHaveBeenCalled();
+    });
+    const targetRect = target.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    expect(Math.floor(contentRect.bottom)).toEqual(Math.floor(targetRect.top));
+  });
+  it('should center vertically', async () => {
+    const onPositionChanged = jest.fn();
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, /*#__PURE__*/React.createElement(Position, {
+      placement: "end",
+      onPositionChanged: onPositionChanged,
+      renderTarget: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target"
+      }, "Target"))
+    }, _div5 || (_div5 = /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const target = screen.getByTestId('target');
+    const content = screen.getByTestId('content');
+    await waitFor(() => {
+      expect(onPositionChanged).toHaveBeenCalled();
+    });
+    const targetRect = target.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const top = Math.floor(contentRect.top);
+    const center = Math.floor(targetRect.top + (targetRect.height / 2 - contentRect.height / 2));
+    expect(within(top, center)).toBe(true);
+  });
+  it('should center horizontally', async () => {
+    const onPositionChanged = jest.fn();
+    render( /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...parentDefaults
+      }
+    }, /*#__PURE__*/React.createElement(Position, {
+      placement: "bottom",
+      onPositionChanged: onPositionChanged,
+      renderTarget: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", {
+        "data-testid": "target"
+      }, "Target"))
+    }, _div6 || (_div6 = /*#__PURE__*/React.createElement("div", {
+      "data-testid": "content"
+    }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+    const target = screen.getByTestId('target');
+    const content = screen.getByTestId('content');
+    await waitFor(() => {
+      expect(onPositionChanged).toHaveBeenCalled();
+    });
+    const targetRect = target.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const left = Math.floor(contentRect.left);
+    const targetCenter = targetRect.width / 2;
+    const contentCenter = contentRect.width / 2;
+    const center = Math.floor(targetRect.left + (targetCenter - contentCenter));
+    expect(within(left, center)).toBe(true);
+  });
+  describe('when constrained to scroll-parent', () => {
+    it('should re-position below target', async () => {
+      const onPositionChanged = jest.fn();
+      render( /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '50px'
+        }
+      }, _div7 || (_div7 = /*#__PURE__*/React.createElement("div", {
+        "data-testid": "mountNode"
+      }, "mount")), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '50px',
+          height: '50px',
+          overflow: 'scroll',
+          padding: '0 50px 50px 50px'
+        }
+      }, /*#__PURE__*/React.createElement(Position, {
+        placement: "top",
+        constrain: "scroll-parent",
+        mountNode: () => document.getElementById('mountNode'),
+        onPositionChanged: onPositionChanged,
+        renderTarget: _button7 || (_button7 = /*#__PURE__*/React.createElement("button", {
+          "data-testid": "target"
+        }, "Target"))
+      }, _div8 || (_div8 = /*#__PURE__*/React.createElement("div", {
+        "data-testid": "content"
+      }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+      const target = screen.getByTestId('target');
+      const content = screen.getByTestId('content');
+      await waitFor(() => {
+        expect(onPositionChanged).toHaveBeenCalled();
+      });
+      const targetRect = target.getBoundingClientRect();
+      const contentRect = content.getBoundingClientRect();
+      expect(within(Math.floor(contentRect.top), Math.floor(targetRect.bottom), 1)).toBe(true);
+    });
+    it('should re-position above target', async () => {
+      const onPositionChanged = jest.fn();
+      render( /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '50px'
+        }
+      }, _div9 || (_div9 = /*#__PURE__*/React.createElement("div", {
+        id: "mountNode"
+      }, "mount")), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '50px',
+          height: '0px',
+          overflow: 'scroll',
+          padding: '50px 50px 0 50px'
+        }
+      }, /*#__PURE__*/React.createElement(Position, {
+        placement: "bottom",
+        constrain: "scroll-parent",
+        mountNode: () => document.getElementById('mountNode'),
+        onPositionChanged: onPositionChanged,
+        renderTarget: _button8 || (_button8 = /*#__PURE__*/React.createElement("button", {
+          "data-testid": "target"
+        }, "Target"))
+      }, _div10 || (_div10 = /*#__PURE__*/React.createElement("div", {
+        "data-testid": "content"
+      }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+      const target = screen.getByTestId('target');
+      const content = screen.getByTestId('content');
+      await waitFor(() => {
+        expect(onPositionChanged).toHaveBeenCalled();
+      });
+      const targetRect = target.getBoundingClientRect();
+      const contentRect = content.getBoundingClientRect();
+      expect(within(Math.floor(contentRect.bottom), Math.floor(targetRect.top), 1)).toBe(true);
+    });
+    it('should re-position after target', async () => {
+      const onPositionChanged = jest.fn();
+      render( /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '50px'
+        }
+      }, _div11 || (_div11 = /*#__PURE__*/React.createElement("div", {
+        id: "mountNode"
+      }, "mount")), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '50px',
+          height: '50px',
+          overflow: 'scroll',
+          padding: '50px 80px 50px 0'
+        }
+      }, /*#__PURE__*/React.createElement(Position, {
+        placement: "start",
+        constrain: "scroll-parent",
+        mountNode: () => document.getElementById('mountNode'),
+        onPositionChanged: onPositionChanged,
+        renderTarget: _button9 || (_button9 = /*#__PURE__*/React.createElement("button", {
+          "data-testid": "target"
+        }, "Target"))
+      }, _div12 || (_div12 = /*#__PURE__*/React.createElement("div", {
+        "data-testid": "content"
+      }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+      const target = screen.getByTestId('target');
+      const content = screen.getByTestId('content');
+      await waitFor(() => {
+        expect(onPositionChanged).toHaveBeenCalled();
+      });
+      const targetRect = target.getBoundingClientRect();
+      const contentRect = content.getBoundingClientRect();
+      expect(within(Math.floor(contentRect.left), Math.floor(targetRect.right), 1)).toBe(true);
+    });
+    it('should re-position before target', async () => {
+      const onPositionChanged = jest.fn();
+      render( /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '50px'
+        }
+      }, _div13 || (_div13 = /*#__PURE__*/React.createElement("div", {
+        id: "mountNode"
+      }, "mount")), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '50px',
+          height: '50px',
+          overflow: 'scroll',
+          padding: '50px 0px 50px 80px'
+        }
+      }, /*#__PURE__*/React.createElement(Position, {
+        placement: "end",
+        constrain: "scroll-parent",
+        mountNode: () => document.getElementById('mountNode'),
+        onPositionChanged: onPositionChanged,
+        renderTarget: _button10 || (_button10 = /*#__PURE__*/React.createElement("button", {
+          "data-testid": "target"
+        }, "Target"))
+      }, _div14 || (_div14 = /*#__PURE__*/React.createElement("div", {
+        "data-testid": "content"
+      }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+      const target = screen.getByTestId('target');
+      const content = screen.getByTestId('content');
+      await waitFor(() => {
+        expect(onPositionChanged).toHaveBeenCalled();
+      });
+      const targetRect = target.getBoundingClientRect();
+      const contentRect = content.getBoundingClientRect();
+      expect(within(Math.floor(contentRect.right), Math.floor(targetRect.left), 1)).toBe(true);
+    });
+  });
+  describe('when the documentElement is offset', () => {
+    beforeEach(() => {
+      document.documentElement.style.position = 'fixed';
+      document.documentElement.style.top = '-100px';
+    });
+    afterEach(() => {
+      document.documentElement.style.position = '';
+      document.documentElement.style.top = '';
+    });
+    it('should position correctly', async () => {
+      render( /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '100px'
+        }
+      }, _Position3 || (_Position3 = /*#__PURE__*/React.createElement(Position, {
+        placement: "bottom",
+        renderTarget: /*#__PURE__*/React.createElement("button", {
+          "data-testid": "target"
+        }, "Target")
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": "content"
+      }, /*#__PURE__*/React.createElement("div", null, "Content"))))));
+      const target = screen.getByTestId('target');
+      const content = screen.getByTestId('content');
+      await waitFor(() => {
+        expect(content.getBoundingClientRect().top).toEqual(target.getBoundingClientRect().bottom);
+      });
+    });
+    it('should position correctly with mountNode', async () => {
+      render( /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '100px'
+        }
+      }, _div15 || (_div15 = /*#__PURE__*/React.createElement("div", {
+        "data-testid": "mountNode"
+      }, "mount")), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '50px',
+          height: '50px',
+          overflow: 'scroll',
+          padding: '50px'
+        }
+      }, /*#__PURE__*/React.createElement(Position, {
+        placement: "bottom",
+        constrain: "scroll-parent",
+        mountNode: () => document.getElementById('mountNode'),
+        renderTarget: _button11 || (_button11 = /*#__PURE__*/React.createElement("button", {
+          "data-testid": "target"
+        }, "Target"))
+      }, _div16 || (_div16 = /*#__PURE__*/React.createElement("div", {
+        "data-testid": "content"
+      }, /*#__PURE__*/React.createElement("div", null, "Content")))))));
+      const target = screen.getByTestId('target');
+      const content = screen.getByTestId('content');
+      await waitFor(() => {
+        expect(content.getBoundingClientRect().top).toEqual(target.getBoundingClientRect().bottom);
+      });
+    });
+  });
+  describe('containerDisplay prop', () => {
+    it('should apply "inline-block"', () => {
+      const _render = render( /*#__PURE__*/React.createElement("div", {
+          style: {
+            padding: '50px'
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            ...parentDefaults
+          }
+        }, _Position4 || (_Position4 = /*#__PURE__*/React.createElement(Position, {
+          constrain: "window",
+          renderTarget: /*#__PURE__*/React.createElement("button", {
+            "data-testid": "target"
+          }, "Target"),
+          containerDisplay: "inline-block"
+        }, /*#__PURE__*/React.createElement("div", {
+          "data-testid": "content"
+        }, /*#__PURE__*/React.createElement("div", null, "Content"))))))),
+        container = _render.container;
+      const position = container.querySelector("span[class$='-position']");
+      const style = getComputedStyle(position);
+      expect(style.display).toEqual('inline-block');
+    });
+    it('should apply "block"', () => {
+      const _render2 = render( /*#__PURE__*/React.createElement("div", {
+          style: {
+            padding: '50px'
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            ...parentDefaults
+          }
+        }, _Position5 || (_Position5 = /*#__PURE__*/React.createElement(Position, {
+          constrain: "window",
+          renderTarget: /*#__PURE__*/React.createElement("button", {
+            "data-testid": "target"
+          }, "Target"),
+          containerDisplay: "block"
+        }, /*#__PURE__*/React.createElement("div", {
+          "data-testid": "content"
+        }, /*#__PURE__*/React.createElement("div", null, "Content"))))))),
+        container = _render2.container;
+      const position = container.querySelector("span[class$='-position']");
+      const style = getComputedStyle(position);
+      expect(style.display).toEqual('block');
+    });
+  });
+});

package/es/__new-tests__/mirrorHorizontalPlacement.test.js

@@ -0,0 +1,68 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { mirrorHorizontalPlacement } from '../mirrorHorizontalPlacement';
+import { placementPropValues } from '../PositionPropTypes';
+import '@testing-library/jest-dom';
+const mirrorHorizontallyAsArrayMap = [['top'], ['bottom'], ['end'], ['start'], ['top', 'end'], ['top', 'center'], ['top', 'start'], ['top', 'stretch'], ['bottom', 'end'], ['bottom', 'center'], ['bottom', 'start'], ['bottom', 'stretch'], ['end', 'top'], ['end', 'center'], ['end', 'bottom'], ['end', 'stretch'], ['start', 'top'], ['start', 'center'], ['start', 'bottom'], ['start', 'stretch'], ['center', 'end'], ['center', 'start'], ['offscreen']];
+describe('mirrorHorizontalPlacement', () => {
+  describe('when string is passed', () => {
+    describe('without delimiter should return mirrored values as array', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorHorizontalPlacement(placement);
+          expect(mirrored[0]).toEqual(mirrorHorizontallyAsArrayMap[idx][0]);
+          expect(mirrored[1]).toEqual(mirrorHorizontallyAsArrayMap[idx][1]);
+        });
+      });
+    });
+    describe('with delimiter should return mirrored values as string', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorHorizontalPlacement(placement, ' ');
+          expect(mirrored).toEqual(mirrorHorizontallyAsArrayMap[idx].join(' '));
+        });
+      });
+    });
+  });
+  describe('when array is passed', () => {
+    describe('without delimiter should return mirrored values as array', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorHorizontalPlacement(placement.split(' '));
+          expect(mirrored[0]).toEqual(mirrorHorizontallyAsArrayMap[idx][0]);
+          expect(mirrored[1]).toEqual(mirrorHorizontallyAsArrayMap[idx][1]);
+        });
+      });
+    });
+    describe('with delimiter should return mirrored values as string', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorHorizontalPlacement(placement.split(' '), ' ');
+          expect(mirrored).toEqual(mirrorHorizontallyAsArrayMap[idx].join(' '));
+        });
+      });
+    });
+  });
+});

package/es/__new-tests__/mirrorPlacement.test.js

@@ -0,0 +1,68 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { mirrorPlacement } from '../mirrorPlacement';
+import { placementPropValues } from '../PositionPropTypes';
+import '@testing-library/jest-dom';
+const mirrorVertiallyAsArrayMap = [['bottom'], ['top'], ['end'], ['start'], ['bottom', 'start'], ['bottom', 'center'], ['bottom', 'end'], ['bottom', 'stretch'], ['top', 'start'], ['top', 'center'], ['top', 'end'], ['top', 'stretch'], ['end', 'top'], ['end', 'center'], ['end', 'bottom'], ['end', 'stretch'], ['start', 'top'], ['start', 'center'], ['start', 'bottom'], ['start', 'stretch'], ['center', 'start'], ['center', 'end'], ['offscreen']];
+describe('mirrorPlacement', () => {
+  describe('when string is passed', () => {
+    describe('without delimiter should return mirrored values as array', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorPlacement(placement);
+          expect(mirrored[0]).toEqual(mirrorVertiallyAsArrayMap[idx][0]);
+          expect(mirrored[1]).toEqual(mirrorVertiallyAsArrayMap[idx][1]);
+        });
+      });
+    });
+    describe('with delimiter should return mirrored values as string', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorPlacement(placement, ' ');
+          expect(mirrored).toEqual(mirrorVertiallyAsArrayMap[idx].join(' '));
+        });
+      });
+    });
+  });
+  describe('when array is passed', () => {
+    describe('without delimiter should return mirrored values as array', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorPlacement(placement.split(' '));
+          expect(mirrored[0]).toEqual(mirrorVertiallyAsArrayMap[idx][0]);
+          expect(mirrored[1]).toEqual(mirrorVertiallyAsArrayMap[idx][1]);
+        });
+      });
+    });
+    describe('with delimiter should return mirrored values as string', () => {
+      placementPropValues.forEach((placement, idx) => {
+        it(placement, () => {
+          const mirrored = mirrorPlacement(placement.split(' '), ' ');
+          expect(mirrored).toEqual(mirrorVertiallyAsArrayMap[idx].join(' '));
+        });
+      });
+    });
+  });
+});