@instructure/ui-position 10.19.2-snapshot-3 → 10.19.2-snapshot-4

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

@@ -1,623 +0,0 @@
-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 { render, screen, waitFor } from '@testing-library/react';
-import { vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { within } from '@instructure/ui-utils';
-import { Position } from '../index';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-describe('<Position />', () => {
-  const parentDefaults = {
-    width: 500,
-    height: 150,
-    padding: 100,
-    overflow: 'auto'
-  };
-  it('should render', () => {
-    render(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _Position || (_Position = _jsx(Position, {
-          constrain: "window",
-          renderTarget: _jsx("button", {
-            "data-testid": "target-btn",
-            children: "Target"
-          }),
-          children: _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _Position2 || (_Position2 = _jsx(Position, {
-          constrain: "window",
-          renderTarget: _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          }),
-          children: _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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 = vi.fn();
-    render(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _jsx(Position, {
-          placement: "end",
-          onPositionChanged: onPositionChanged,
-          renderTarget: _button || (_button = _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          })),
-          children: _div || (_div = _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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 = vi.fn();
-    render(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _jsx(Position, {
-          placement: "bottom",
-          onPositionChanged: onPositionChanged,
-          renderTarget: _button2 || (_button2 = _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          })),
-          children: _div2 || (_div2 = _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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 = vi.fn();
-    render(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _jsx(Position, {
-          placement: "start",
-          onPositionChanged: onPositionChanged,
-          renderTarget: _button3 || (_button3 = _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          })),
-          children: _div3 || (_div3 = _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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 = vi.fn();
-    render(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _jsx(Position, {
-          placement: "top",
-          onPositionChanged: onPositionChanged,
-          renderTarget: _button4 || (_button4 = _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          })),
-          children: _div4 || (_div4 = _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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 = vi.fn();
-    render(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _jsx(Position, {
-          placement: "end",
-          onPositionChanged: onPositionChanged,
-          renderTarget: _button5 || (_button5 = _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          })),
-          children: _div5 || (_div5 = _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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 = vi.fn();
-    render(_jsx("div", {
-      style: {
-        padding: '50px'
-      },
-      children: _jsx("div", {
-        style: {
-          ...parentDefaults
-        },
-        children: _jsx(Position, {
-          placement: "bottom",
-          onPositionChanged: onPositionChanged,
-          renderTarget: _button6 || (_button6 = _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          })),
-          children: _div6 || (_div6 = _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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 = vi.fn();
-      render(_jsxs("div", {
-        style: {
-          padding: '50px'
-        },
-        children: [_div7 || (_div7 = _jsx("div", {
-          "data-testid": "mountNode",
-          children: "mount"
-        })), _jsx("div", {
-          style: {
-            width: '50px',
-            height: '50px',
-            overflow: 'scroll',
-            padding: '0 50px 50px 50px'
-          },
-          children: _jsx(Position, {
-            placement: "top",
-            constrain: "scroll-parent",
-            mountNode: () => document.getElementById('mountNode'),
-            onPositionChanged: onPositionChanged,
-            renderTarget: _button7 || (_button7 = _jsx("button", {
-              "data-testid": "target",
-              children: "Target"
-            })),
-            children: _div8 || (_div8 = _jsx("div", {
-              "data-testid": "content",
-              children: _jsx("div", {
-                children: "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 = vi.fn();
-      render(_jsxs("div", {
-        style: {
-          padding: '50px'
-        },
-        children: [_div9 || (_div9 = _jsx("div", {
-          id: "mountNode",
-          children: "mount"
-        })), _jsx("div", {
-          style: {
-            width: '50px',
-            height: '0px',
-            overflow: 'scroll',
-            padding: '50px 50px 0 50px'
-          },
-          children: _jsx(Position, {
-            placement: "bottom",
-            constrain: "scroll-parent",
-            mountNode: () => document.getElementById('mountNode'),
-            onPositionChanged: onPositionChanged,
-            renderTarget: _button8 || (_button8 = _jsx("button", {
-              "data-testid": "target",
-              children: "Target"
-            })),
-            children: _div10 || (_div10 = _jsx("div", {
-              "data-testid": "content",
-              children: _jsx("div", {
-                children: "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 = vi.fn();
-      render(_jsxs("div", {
-        style: {
-          padding: '50px'
-        },
-        children: [_div11 || (_div11 = _jsx("div", {
-          id: "mountNode",
-          children: "mount"
-        })), _jsx("div", {
-          style: {
-            width: '50px',
-            height: '50px',
-            overflow: 'scroll',
-            padding: '50px 80px 50px 0'
-          },
-          children: _jsx(Position, {
-            placement: "start",
-            constrain: "scroll-parent",
-            mountNode: () => document.getElementById('mountNode'),
-            onPositionChanged: onPositionChanged,
-            renderTarget: _button9 || (_button9 = _jsx("button", {
-              "data-testid": "target",
-              children: "Target"
-            })),
-            children: _div12 || (_div12 = _jsx("div", {
-              "data-testid": "content",
-              children: _jsx("div", {
-                children: "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 = vi.fn();
-      render(_jsxs("div", {
-        style: {
-          padding: '50px'
-        },
-        children: [_div13 || (_div13 = _jsx("div", {
-          id: "mountNode",
-          children: "mount"
-        })), _jsx("div", {
-          style: {
-            width: '50px',
-            height: '50px',
-            overflow: 'scroll',
-            padding: '50px 0px 50px 80px'
-          },
-          children: _jsx(Position, {
-            placement: "end",
-            constrain: "scroll-parent",
-            mountNode: () => document.getElementById('mountNode'),
-            onPositionChanged: onPositionChanged,
-            renderTarget: _button10 || (_button10 = _jsx("button", {
-              "data-testid": "target",
-              children: "Target"
-            })),
-            children: _div14 || (_div14 = _jsx("div", {
-              "data-testid": "content",
-              children: _jsx("div", {
-                children: "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(_jsx("div", {
-        style: {
-          padding: '100px'
-        },
-        children: _Position3 || (_Position3 = _jsx(Position, {
-          placement: "bottom",
-          renderTarget: _jsx("button", {
-            "data-testid": "target",
-            children: "Target"
-          }),
-          children: _jsx("div", {
-            "data-testid": "content",
-            children: _jsx("div", {
-              children: "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(_jsxs("div", {
-        style: {
-          padding: '100px'
-        },
-        children: [_div15 || (_div15 = _jsx("div", {
-          "data-testid": "mountNode",
-          children: "mount"
-        })), _jsx("div", {
-          style: {
-            width: '50px',
-            height: '50px',
-            overflow: 'scroll',
-            padding: '50px'
-          },
-          children: _jsx(Position, {
-            placement: "bottom",
-            constrain: "scroll-parent",
-            mountNode: () => document.getElementById('mountNode'),
-            renderTarget: _button11 || (_button11 = _jsx("button", {
-              "data-testid": "target",
-              children: "Target"
-            })),
-            children: _div16 || (_div16 = _jsx("div", {
-              "data-testid": "content",
-              children: _jsx("div", {
-                children: "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(_jsx("div", {
-          style: {
-            padding: '50px'
-          },
-          children: _jsx("div", {
-            style: {
-              ...parentDefaults
-            },
-            children: _Position4 || (_Position4 = _jsx(Position, {
-              constrain: "window",
-              renderTarget: _jsx("button", {
-                "data-testid": "target",
-                children: "Target"
-              }),
-              containerDisplay: "inline-block",
-              children: _jsx("div", {
-                "data-testid": "content",
-                children: _jsx("div", {
-                  children: "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(_jsx("div", {
-          style: {
-            padding: '50px'
-          },
-          children: _jsx("div", {
-            style: {
-              ...parentDefaults
-            },
-            children: _Position5 || (_Position5 = _jsx(Position, {
-              constrain: "window",
-              renderTarget: _jsx("button", {
-                "data-testid": "target",
-                children: "Target"
-              }),
-              containerDisplay: "block",
-              children: _jsx("div", {
-                "data-testid": "content",
-                children: _jsx("div", {
-                  children: "Content"
-                })
-              })
-            }))
-          })
-        })),
-        container = _render2.container;
-      const position = container.querySelector("span[class$='-position']");
-      const style = getComputedStyle(position);
-      expect(style.display).toEqual('block');
-    });
-  });
-});

package/es/Position/locator.js

@@ -1,28 +0,0 @@
-/*
- * 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 { PositionLocator } from './PositionLocator';
-export { PositionContentLocator, PositionTargetLocator, customMethods } from './PositionLocator';
-export { PositionLocator };
-export default PositionLocator;