@instructure/ui-tray 10.11.0 → 10.11.1-snapshot-2

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.
 
+## [10.11.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-2) (2025-02-05)
+
+**Note:** Version bump only for package @instructure/ui-tray
+
+
+
+
+
 # [10.11.0](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.11.0) (2025-02-03)
 
 **Note:** Version bump only for package @instructure/ui-tray

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

@@ -0,0 +1,175 @@
+var _Tray, _Tray2, _Tray3, _input, _input2;
+/*
+ * 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 { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { Tray } from '../index';
+describe('<Tray />', async () => {
+  it('should render nothing and have a node with no parent when closed', async () => {
+    render(_Tray || (_Tray = /*#__PURE__*/React.createElement(Tray, {
+      label: "Tray Example"
+    }, "Hello Tray")));
+    const trayContent = screen.queryByText('Hello Tray');
+    expect(trayContent).not.toBeInTheDocument();
+  });
+  it('should render children and have a node with a parent when open', async () => {
+    render(_Tray2 || (_Tray2 = /*#__PURE__*/React.createElement(Tray, {
+      label: "Tray Example",
+      open: true
+    }, "Hello Tray")));
+    const trayContent = screen.getByText('Hello Tray');
+    expect(trayContent).toBeInTheDocument();
+  });
+  it('should apply the a11y attributes', async () => {
+    render(_Tray3 || (_Tray3 = /*#__PURE__*/React.createElement(Tray, {
+      label: "Tray Example",
+      open: true
+    }, "Hello Tray")));
+    const tray = screen.getByRole('dialog');
+    expect(tray).toHaveAttribute('aria-label', 'Tray Example');
+  });
+  it('should support onOpen prop', async () => {
+    const onOpen = vi.fn();
+    render(/*#__PURE__*/React.createElement(Tray, {
+      label: "Tray Example",
+      open: true,
+      onOpen: onOpen
+    }, "Hello Tray"));
+    await waitFor(() => {
+      expect(onOpen).toHaveBeenCalled();
+    });
+  });
+  it('should support onClose prop', async () => {
+    const onClose = vi.fn();
+    const _render = render(/*#__PURE__*/React.createElement(Tray, {
+        label: "Tray Example",
+        open: true,
+        onClose: onClose
+      }, "Hello Tray")),
+      rerender = _render.rerender;
+
+    // Set prop: open
+    rerender(/*#__PURE__*/React.createElement(Tray, {
+      label: "Tray Example",
+      open: false,
+      onClose: onClose
+    }, "Hello Tray"));
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+  it('should take a prop for finding default focus', async () => {
+    render(/*#__PURE__*/React.createElement(Tray, {
+      label: "Tray Example",
+      open: true,
+      defaultFocusElement: () => document.getElementById('my-input')
+    }, "Hello Tray", _input || (_input = /*#__PURE__*/React.createElement("input", {
+      type: "text"
+    })), _input2 || (_input2 = /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      id: "my-input",
+      "aria-label": "my-input-label"
+    }))));
+    const input = screen.getByLabelText('my-input-label');
+    await waitFor(() => {
+      expect(document.activeElement).toBe(input);
+    });
+  });
+  describe('transition()', () => {
+    const placements = {
+      ltr: {
+        enteringPlacements: {
+          start: 'slide-left',
+          end: 'slide-right',
+          top: 'slide-up',
+          bottom: 'slide-down'
+        },
+        exitingPlacements: {
+          start: 'slide-left',
+          end: 'slide-right',
+          top: 'slide-up',
+          bottom: 'slide-down'
+        }
+      },
+      rtl: {
+        enteringPlacements: {
+          start: 'slide-right',
+          end: 'slide-left'
+        },
+        exitingPlacements: {
+          start: 'slide-right',
+          end: 'slide-left'
+        }
+      }
+    };
+    for (const dir in placements) {
+      describe(`when text direction is '${dir}'`, () => {
+        for (const placement in placements[dir].enteringPlacements) {
+          const val = placements[dir].enteringPlacements[placement];
+          it(`returns ${val} for ${placement} when entering`, async () => {
+            const onEntered = vi.fn();
+            document.documentElement.setAttribute('dir', dir);
+            render(/*#__PURE__*/React.createElement(Tray, {
+              open: true,
+              label: "Tray Example",
+              placement: placement,
+              onEntered: onEntered
+            }, "Hello"));
+            await waitFor(() => {
+              expect(onEntered).toHaveBeenCalled();
+            });
+          });
+        }
+        for (const placement in placements[dir].exitingPlacements) {
+          const val = placements[dir].exitingPlacements[placement];
+          it(`returns ${val} for ${placement} when exiting`, async () => {
+            const onExited = vi.fn();
+            document.documentElement.setAttribute('dir', dir);
+            const _render2 = render(/*#__PURE__*/React.createElement(Tray, {
+                open: true,
+                label: "Tray Example",
+                placement: placement,
+                onExited: onExited
+              }, "Hello")),
+              rerender = _render2.rerender;
+
+            // Set prop: open
+            rerender(/*#__PURE__*/React.createElement(Tray, {
+              open: false,
+              label: "Tray Example",
+              placement: placement,
+              onExited: onExited
+            }, "Hello"));
+            await waitFor(() => {
+              expect(onExited).toHaveBeenCalled();
+            });
+          });
+        }
+      });
+    }
+  });
+});

package/lib/Tray/__new-tests__/Tray.test.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _Tray, _Tray2, _Tray3, _input, _input2;
+/*
+ * 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.
+ */
+describe('<Tray />', async () => {
+  it('should render nothing and have a node with no parent when closed', async () => {
+    (0, _react2.render)(_Tray || (_Tray = /*#__PURE__*/_react.default.createElement(_index.Tray, {
+      label: "Tray Example"
+    }, "Hello Tray")));
+    const trayContent = _react2.screen.queryByText('Hello Tray');
+    expect(trayContent).not.toBeInTheDocument();
+  });
+  it('should render children and have a node with a parent when open', async () => {
+    (0, _react2.render)(_Tray2 || (_Tray2 = /*#__PURE__*/_react.default.createElement(_index.Tray, {
+      label: "Tray Example",
+      open: true
+    }, "Hello Tray")));
+    const trayContent = _react2.screen.getByText('Hello Tray');
+    expect(trayContent).toBeInTheDocument();
+  });
+  it('should apply the a11y attributes', async () => {
+    (0, _react2.render)(_Tray3 || (_Tray3 = /*#__PURE__*/_react.default.createElement(_index.Tray, {
+      label: "Tray Example",
+      open: true
+    }, "Hello Tray")));
+    const tray = _react2.screen.getByRole('dialog');
+    expect(tray).toHaveAttribute('aria-label', 'Tray Example');
+  });
+  it('should support onOpen prop', async () => {
+    const onOpen = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
+      label: "Tray Example",
+      open: true,
+      onOpen: onOpen
+    }, "Hello Tray"));
+    await (0, _react2.waitFor)(() => {
+      expect(onOpen).toHaveBeenCalled();
+    });
+  });
+  it('should support onClose prop', async () => {
+    const onClose = _vitest.vi.fn();
+    const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
+        label: "Tray Example",
+        open: true,
+        onClose: onClose
+      }, "Hello Tray")),
+      rerender = _render.rerender;
+
+    // Set prop: open
+    rerender(/*#__PURE__*/_react.default.createElement(_index.Tray, {
+      label: "Tray Example",
+      open: false,
+      onClose: onClose
+    }, "Hello Tray"));
+    await (0, _react2.waitFor)(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+  it('should take a prop for finding default focus', async () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
+      label: "Tray Example",
+      open: true,
+      defaultFocusElement: () => document.getElementById('my-input')
+    }, "Hello Tray", _input || (_input = /*#__PURE__*/_react.default.createElement("input", {
+      type: "text"
+    })), _input2 || (_input2 = /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      id: "my-input",
+      "aria-label": "my-input-label"
+    }))));
+    const input = _react2.screen.getByLabelText('my-input-label');
+    await (0, _react2.waitFor)(() => {
+      expect(document.activeElement).toBe(input);
+    });
+  });
+  describe('transition()', () => {
+    const placements = {
+      ltr: {
+        enteringPlacements: {
+          start: 'slide-left',
+          end: 'slide-right',
+          top: 'slide-up',
+          bottom: 'slide-down'
+        },
+        exitingPlacements: {
+          start: 'slide-left',
+          end: 'slide-right',
+          top: 'slide-up',
+          bottom: 'slide-down'
+        }
+      },
+      rtl: {
+        enteringPlacements: {
+          start: 'slide-right',
+          end: 'slide-left'
+        },
+        exitingPlacements: {
+          start: 'slide-right',
+          end: 'slide-left'
+        }
+      }
+    };
+    for (const dir in placements) {
+      describe(`when text direction is '${dir}'`, () => {
+        for (const placement in placements[dir].enteringPlacements) {
+          const val = placements[dir].enteringPlacements[placement];
+          it(`returns ${val} for ${placement} when entering`, async () => {
+            const onEntered = _vitest.vi.fn();
+            document.documentElement.setAttribute('dir', dir);
+            (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
+              open: true,
+              label: "Tray Example",
+              placement: placement,
+              onEntered: onEntered
+            }, "Hello"));
+            await (0, _react2.waitFor)(() => {
+              expect(onEntered).toHaveBeenCalled();
+            });
+          });
+        }
+        for (const placement in placements[dir].exitingPlacements) {
+          const val = placements[dir].exitingPlacements[placement];
+          it(`returns ${val} for ${placement} when exiting`, async () => {
+            const onExited = _vitest.vi.fn();
+            document.documentElement.setAttribute('dir', dir);
+            const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Tray, {
+                open: true,
+                label: "Tray Example",
+                placement: placement,
+                onExited: onExited
+              }, "Hello")),
+              rerender = _render2.rerender;
+
+            // Set prop: open
+            rerender(/*#__PURE__*/_react.default.createElement(_index.Tray, {
+              open: false,
+              label: "Tray Example",
+              placement: placement,
+              onExited: onExited
+            }, "Hello"));
+            await (0, _react2.waitFor)(() => {
+              expect(onExited).toHaveBeenCalled();
+            });
+          });
+        }
+      });
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tray",
-  "version": "10.11.0",
+  "version": "10.11.1-snapshot-2",
   "description": "Tray component for secondary/menu content",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,26 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.11.0",
-    "@instructure/emotion": "10.11.0",
-    "@instructure/shared-types": "10.11.0",
-    "@instructure/ui-dialog": "10.11.0",
-    "@instructure/ui-i18n": "10.11.0",
-    "@instructure/ui-motion": "10.11.0",
-    "@instructure/ui-overlays": "10.11.0",
-    "@instructure/ui-portal": "10.11.0",
-    "@instructure/ui-position": "10.11.0",
-    "@instructure/ui-prop-types": "10.11.0",
-    "@instructure/ui-react-utils": "10.11.0",
-    "@instructure/ui-testable": "10.11.0",
-    "@instructure/ui-utils": "10.11.0",
+    "@instructure/console": "10.11.1-snapshot-2",
+    "@instructure/emotion": "10.11.1-snapshot-2",
+    "@instructure/shared-types": "10.11.1-snapshot-2",
+    "@instructure/ui-dialog": "10.11.1-snapshot-2",
+    "@instructure/ui-i18n": "10.11.1-snapshot-2",
+    "@instructure/ui-motion": "10.11.1-snapshot-2",
+    "@instructure/ui-overlays": "10.11.1-snapshot-2",
+    "@instructure/ui-portal": "10.11.1-snapshot-2",
+    "@instructure/ui-position": "10.11.1-snapshot-2",
+    "@instructure/ui-prop-types": "10.11.1-snapshot-2",
+    "@instructure/ui-react-utils": "10.11.1-snapshot-2",
+    "@instructure/ui-testable": "10.11.1-snapshot-2",
+    "@instructure/ui-utils": "10.11.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.11.0",
-    "@instructure/ui-test-locator": "10.11.0",
-    "@instructure/ui-test-utils": "10.11.0",
-    "@instructure/ui-themes": "10.11.0"
+    "@instructure/ui-babel-preset": "10.11.1-snapshot-2",
+    "@instructure/ui-themes": "10.11.1-snapshot-2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"

package/src/Tray/__new-tests__/Tray.test.tsx

@@ -0,0 +1,204 @@
+/*
+ * 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 { vi } from 'vitest'
+import '@testing-library/jest-dom'
+
+import { Tray } from '../index'
+import type { TrayProps } from '../props'
+
+describe('<Tray />', async () => {
+  it('should render nothing and have a node with no parent when closed', async () => {
+    render(<Tray label="Tray Example">Hello Tray</Tray>)
+
+    const trayContent = screen.queryByText('Hello Tray')
+    expect(trayContent).not.toBeInTheDocument()
+  })
+
+  it('should render children and have a node with a parent when open', async () => {
+    render(
+      <Tray label="Tray Example" open>
+        Hello Tray
+      </Tray>
+    )
+    const trayContent = screen.getByText('Hello Tray')
+
+    expect(trayContent).toBeInTheDocument()
+  })
+
+  it('should apply the a11y attributes', async () => {
+    render(
+      <Tray label="Tray Example" open>
+        Hello Tray
+      </Tray>
+    )
+    const tray = screen.getByRole('dialog')
+
+    expect(tray).toHaveAttribute('aria-label', 'Tray Example')
+  })
+
+  it('should support onOpen prop', async () => {
+    const onOpen = vi.fn()
+    render(
+      <Tray label="Tray Example" open onOpen={onOpen}>
+        Hello Tray
+      </Tray>
+    )
+
+    await waitFor(() => {
+      expect(onOpen).toHaveBeenCalled()
+    })
+  })
+
+  it('should support onClose prop', async () => {
+    const onClose = vi.fn()
+
+    const { rerender } = render(
+      <Tray label="Tray Example" open onClose={onClose}>
+        Hello Tray
+      </Tray>
+    )
+
+    // Set prop: open
+    rerender(
+      <Tray label="Tray Example" open={false} onClose={onClose}>
+        Hello Tray
+      </Tray>
+    )
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('should take a prop for finding default focus', async () => {
+    render(
+      <Tray
+        label="Tray Example"
+        open
+        defaultFocusElement={() => document.getElementById('my-input')}
+      >
+        Hello Tray
+        <input type="text" />
+        <input type="text" id="my-input" aria-label="my-input-label" />
+      </Tray>
+    )
+    const input = screen.getByLabelText('my-input-label')
+
+    await waitFor(() => {
+      expect(document.activeElement).toBe(input)
+    })
+  })
+
+  describe('transition()', () => {
+    const placements: Record<string, any> = {
+      ltr: {
+        enteringPlacements: {
+          start: 'slide-left',
+          end: 'slide-right',
+          top: 'slide-up',
+          bottom: 'slide-down'
+        },
+        exitingPlacements: {
+          start: 'slide-left',
+          end: 'slide-right',
+          top: 'slide-up',
+          bottom: 'slide-down'
+        }
+      },
+      rtl: {
+        enteringPlacements: {
+          start: 'slide-right',
+          end: 'slide-left'
+        },
+        exitingPlacements: {
+          start: 'slide-right',
+          end: 'slide-left'
+        }
+      }
+    }
+
+    for (const dir in placements) {
+      describe(`when text direction is '${dir}'`, () => {
+        for (const placement in placements[dir].enteringPlacements) {
+          const val = placements[dir].enteringPlacements[placement]
+          it(`returns ${val} for ${placement} when entering`, async () => {
+            const onEntered = vi.fn()
+            document.documentElement.setAttribute('dir', dir)
+
+            render(
+              <Tray
+                open
+                label="Tray Example"
+                placement={placement as TrayProps['placement']}
+                onEntered={onEntered}
+              >
+                Hello
+              </Tray>
+            )
+            await waitFor(() => {
+              expect(onEntered).toHaveBeenCalled()
+            })
+          })
+        }
+
+        for (const placement in placements[dir].exitingPlacements) {
+          const val = placements[dir].exitingPlacements[placement]
+          it(`returns ${val} for ${placement} when exiting`, async () => {
+            const onExited = vi.fn()
+            document.documentElement.setAttribute('dir', dir)
+
+            const { rerender } = render(
+              <Tray
+                open
+                label="Tray Example"
+                placement={placement as TrayProps['placement']}
+                onExited={onExited}
+              >
+                Hello
+              </Tray>
+            )
+
+            // Set prop: open
+            rerender(
+              <Tray
+                open={false}
+                label="Tray Example"
+                placement={placement as TrayProps['placement']}
+                onExited={onExited}
+              >
+                Hello
+              </Tray>
+            )
+            await waitFor(() => {
+              expect(onExited).toHaveBeenCalled()
+            })
+          })
+        }
+      })
+    }
+  })
+})

package/tsconfig.build.json

@@ -21,8 +21,6 @@
     { "path": "../ui-overlays/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-babel-preset/tsconfig.build.json" },
-    { "path": "../ui-test-locator/tsconfig.build.json" },
-    { "path": "../ui-test-utils/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" }
   ]
 }