@instructure/ui-buttons 10.16.1-snapshot-0 → 10.16.1

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

@@ -23,30 +23,31 @@ var _circle, _Button, _Button2, _Button3, _Button4, _Button5, _Button6, _Button7
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { Button } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Button/>', () => {
   var _Button9;
   let consoleWarningMock;
   let consoleErrorMock;
   const iconSelector = 'svg[data-title="myIcon"]';
-  const icon = /*#__PURE__*/React.createElement("svg", {
+  const icon = _jsx("svg", {
     "data-title": "myIcon",
     height: "1em",
     width: "1em",
     style: {
       fill: 'currentcolor'
-    }
-  }, _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
-    cx: "0.5em",
-    cy: "0.5em",
-    r: "0.5em"
-  })));
+    },
+    children: _circle || (_circle = _jsx("circle", {
+      cx: "0.5em",
+      cy: "0.5em",
+      r: "0.5em"
+    }))
+  });
   beforeEach(() => {
     // Mocking console to prevent test output pollution
     consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
@@ -58,13 +59,17 @@ describe('<Button/>', () => {
   });
   it('should render children', () => {
     const children = 'Hello world';
-    render(/*#__PURE__*/React.createElement(Button, null, children));
+    render(_jsx(Button, {
+      children: children
+    }));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent(children);
   });
   it('should render a button', async () => {
-    render(_Button || (_Button = /*#__PURE__*/React.createElement(Button, null, "Hello World")));
+    render(_Button || (_Button = _jsx(Button, {
+      children: "Hello World"
+    })));
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('type', 'button');
@@ -73,13 +78,14 @@ describe('<Button/>', () => {
   it('should provide a focused getter', () => {
     var _componentRef;
     let componentRef;
-    render(/*#__PURE__*/React.createElement(Button
+    render(_jsx(Button
     //@ts-expect-error TODO this is coming from ReactComponentWrapper
     , {
       ref: component => {
         componentRef = component;
-      }
-    }, "Hello"));
+      },
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
@@ -89,13 +95,14 @@ describe('<Button/>', () => {
   it('should provide a focus function', () => {
     var _componentRef2;
     let componentRef;
-    render(/*#__PURE__*/React.createElement(Button
+    render(_jsx(Button
     //@ts-expect-error TODO this is coming from ReactComponentWrapper
     , {
       ref: component => {
         componentRef = component;
-      }
-    }, "Hello"));
+      },
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
@@ -103,9 +110,10 @@ describe('<Button/>', () => {
     expect(document.activeElement).toBe(button);
   });
   it('should pass the type attribute', () => {
-    render(_Button2 || (_Button2 = /*#__PURE__*/React.createElement(Button, {
-      type: "submit"
-    }, "Hello")));
+    render(_Button2 || (_Button2 = _jsx(Button, {
+      type: "submit",
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
@@ -114,18 +122,20 @@ describe('<Button/>', () => {
   });
   it('should pass the `elementRef` prop', () => {
     const elementRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(Button, {
-      elementRef: elementRef
-    }, "Hello"));
+    render(_jsx(Button, {
+      elementRef: elementRef,
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(elementRef).toHaveBeenCalledWith(button);
   });
   it('should pass the `as` prop', () => {
-    const _render = render(_Button3 || (_Button3 = /*#__PURE__*/React.createElement(Button, {
-        as: "li"
-      }, "Hello"))),
+    const _render = render(_Button3 || (_Button3 = _jsx(Button, {
+        as: "li",
+        children: "Hello"
+      }))),
       container = _render.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -133,45 +143,50 @@ describe('<Button/>', () => {
     expect(button.tagName).toBe('LI');
   });
   it('should set the disabled attribute when `interaction` is set to disabled', () => {
-    render(_Button4 || (_Button4 = /*#__PURE__*/React.createElement(Button, {
-      interaction: "disabled"
-    }, "Hello")));
+    render(_Button4 || (_Button4 = _jsx(Button, {
+      interaction: "disabled",
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `disabled` is set', () => {
-    render(_Button5 || (_Button5 = /*#__PURE__*/React.createElement(Button, {
-      disabled: true
-    }, "Hello")));
+    render(_Button5 || (_Button5 = _jsx(Button, {
+      disabled: true,
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `interaction` is set to readonly', () => {
-    render(_Button6 || (_Button6 = /*#__PURE__*/React.createElement(Button, {
-      interaction: "readonly"
-    }, "Hello")));
+    render(_Button6 || (_Button6 = _jsx(Button, {
+      interaction: "readonly",
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `readOnly` is set', () => {
-    render(_Button7 || (_Button7 = /*#__PURE__*/React.createElement(Button, {
-      readOnly: true
-    }, "Hello")));
+    render(_Button7 || (_Button7 = _jsx(Button, {
+      readOnly: true,
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should pass the `href` prop', () => {
-    render(_Button8 || (_Button8 = /*#__PURE__*/React.createElement(Button, {
-      href: "#"
-    }, "Hello")));
+    render(_Button8 || (_Button8 = _jsx(Button, {
+      href: "#",
+      children: "Hello"
+    })));
     const linkButton = screen.getByRole('link', {
       name: 'Hello'
     });
@@ -179,9 +194,10 @@ describe('<Button/>', () => {
     expect(linkButton).toHaveAttribute('href', '#');
   });
   it('should pass the `renderIcon` prop', () => {
-    render(_Button9 || (_Button9 = /*#__PURE__*/React.createElement(Button, {
-      renderIcon: icon
-    }, "Hello")));
+    render(_Button9 || (_Button9 = _jsx(Button, {
+      renderIcon: icon,
+      children: "Hello"
+    })));
     const svgIcon = document.querySelector(iconSelector);
     const button = screen.getByRole('button', {
       name: 'Hello'
@@ -191,9 +207,10 @@ describe('<Button/>', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Button, {
-      onClick: onClick
-    }, "Hello"));
+    render(_jsx(Button, {
+      onClick: onClick,
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
@@ -203,22 +220,27 @@ describe('<Button/>', () => {
     });
   });
   it('should render the children as button text', () => {
-    render(_Button10 || (_Button10 = /*#__PURE__*/React.createElement(Button, null, "Hello World")));
+    render(_Button10 || (_Button10 = _jsx(Button, {
+      children: "Hello World"
+    })));
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('Hello World');
   });
   it('should not error with a null child', () => {
-    render(_Button11 || (_Button11 = /*#__PURE__*/React.createElement(Button, null, "Hello World", null)));
+    render(_Button11 || (_Button11 = _jsxs(Button, {
+      children: ["Hello World", null]
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello World'
     });
     expect(button).toBeInTheDocument();
   });
   it('should render a link styled as a button if href is provided', () => {
-    render(_Button12 || (_Button12 = /*#__PURE__*/React.createElement(Button, {
-      href: "example.html"
-    }, "Hello World")));
+    render(_Button12 || (_Button12 = _jsx(Button, {
+      href: "example.html",
+      children: "Hello World"
+    })));
     const button = screen.getAllByRole('link', {
       name: 'Hello World'
     });
@@ -226,18 +248,20 @@ describe('<Button/>', () => {
     expect(button[0]).toHaveAttribute('href', 'example.html');
   });
   it('should render as a link when `to` prop is provided', () => {
-    const _render2 = render(_Button13 || (_Button13 = /*#__PURE__*/React.createElement(Button, {
-        to: "/example"
-      }, "Test"))),
+    const _render2 = render(_Button13 || (_Button13 = _jsx(Button, {
+        to: "/example",
+        children: "Test"
+      }))),
       container = _render2.container;
     const linkButton = container.querySelector('a');
     expect(linkButton).toBeInTheDocument();
     expect(linkButton).toHaveAttribute('to', '/example');
   });
   it('should render designated tag if `as` prop is specified', () => {
-    const _render3 = render(_Button14 || (_Button14 = /*#__PURE__*/React.createElement(Button, {
-        as: "span"
-      }, "Hello World"))),
+    const _render3 = render(_Button14 || (_Button14 = _jsx(Button, {
+        as: "span",
+        children: "Hello World"
+      }))),
       container = _render3.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -246,10 +270,11 @@ describe('<Button/>', () => {
   });
   it('should set role="button"', () => {
     const onClick = vi.fn();
-    const _render4 = render(/*#__PURE__*/React.createElement(Button, {
+    const _render4 = render(_jsx(Button, {
         as: "span",
-        onClick: onClick
-      }, "Hello World")),
+        onClick: onClick,
+        children: "Hello World"
+      })),
       container = _render4.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -257,29 +282,32 @@ describe('<Button/>', () => {
   });
   it('should set tabIndex="0"', () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Button, {
+    render(_jsx(Button, {
       as: "span",
-      onClick: onClick
-    }, "Hello World"));
+      onClick: onClick,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('tabIndex', '0');
   });
   it('should pass down the type prop to the button element', () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(Button, {
+    render(_jsx(Button, {
       type: "submit",
-      onClick: onClick
-    }, "Hello World"));
+      onClick: onClick,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('type', 'submit');
   });
   it('focuses with the focus helper', () => {
     const onFocus = vi.fn();
-    render(/*#__PURE__*/React.createElement(Button, {
-      onFocus: onFocus
-    }, "Hello World"));
+    render(_jsx(Button, {
+      onFocus: onFocus,
+      children: "Hello World"
+    }));
     const button = screen.getByRole('button');
     button.focus();
     expect(onFocus).toHaveBeenCalled();
@@ -288,9 +316,10 @@ describe('<Button/>', () => {
   describe('onClick', () => {
     it('should call onClick when clicked', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
-        onClick: onClick
-      }, "Hello World"));
+      render(_jsx(Button, {
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -301,10 +330,11 @@ describe('<Button/>', () => {
     });
     it('should not call onClick when button is disabled', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
+      render(_jsx(Button, {
         disabled: true,
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -315,10 +345,11 @@ describe('<Button/>', () => {
     });
     it('should not call onClick when button is readOnly', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
+      render(_jsx(Button, {
         readOnly: true,
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -329,9 +360,10 @@ describe('<Button/>', () => {
     });
     it('should not call onClick when button is disabled and an href prop is provided', async () => {
       const onClick = vi.fn();
-      render(_Button15 || (_Button15 = /*#__PURE__*/React.createElement(Button, {
-        href: "#"
-      }, "Hello World")));
+      render(_Button15 || (_Button15 = _jsx(Button, {
+        href: "#",
+        children: "Hello World"
+      })));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -342,11 +374,12 @@ describe('<Button/>', () => {
     });
     it('should not call onClick when button is readOnly and an href prop is provided', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
+      render(_jsx(Button, {
         readOnly: true,
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -357,10 +390,11 @@ describe('<Button/>', () => {
     });
     it('should call onClick when space key is pressed if href is provided', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
+      render(_jsx(Button, {
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -371,10 +405,11 @@ describe('<Button/>', () => {
     });
     it('should call onClick when enter key is pressed when not a button or link', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
+      render(_jsx(Button, {
         as: "span",
-        onClick: onClick
-      }, "Hello World"));
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -385,11 +420,12 @@ describe('<Button/>', () => {
     });
     it('should not call onClick when button is disabled and space key is pressed', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
+      render(_jsx(Button, {
         disabled: true,
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -400,11 +436,12 @@ describe('<Button/>', () => {
     });
     it('should not call onClick when button is readOnly and space key is pressed', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
+      render(_jsx(Button, {
         readOnly: true,
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
+        href: "#",
+        children: "Hello World"
+      }));
       const button = screen.getByRole('link', {
         name: 'Hello World'
       });
@@ -417,9 +454,10 @@ describe('<Button/>', () => {
   describe('for a11y', () => {
     it('should meet standards when onClick is given', async () => {
       const onClick = vi.fn();
-      render(/*#__PURE__*/React.createElement(Button, {
-        onClick: onClick
-      }, "Hello World"));
+      render(_jsx(Button, {
+        onClick: onClick,
+        children: "Hello World"
+      }));
       const button = screen.getByRole('button', {
         name: 'Hello World'
       });
@@ -431,9 +469,10 @@ describe('<Button/>', () => {
     });
     describe('when disabled', () => {
       it('sets the disabled attribute so that the button is not in tab order', () => {
-        render(_Button16 || (_Button16 = /*#__PURE__*/React.createElement(Button, {
-          disabled: true
-        }, "Hello World")));
+        render(_Button16 || (_Button16 = _jsx(Button, {
+          disabled: true,
+          children: "Hello World"
+        })));
         const button = screen.getByRole('button', {
           name: 'Hello World'
         });
@@ -442,9 +481,10 @@ describe('<Button/>', () => {
     });
     describe('when readOnly', () => {
       it('sets the disabled attribute so that the button is not in tab order', () => {
-        render(_Button17 || (_Button17 = /*#__PURE__*/React.createElement(Button, {
-          readOnly: true
-        }, "Hello World")));
+        render(_Button17 || (_Button17 = _jsx(Button, {
+          readOnly: true,
+          children: "Hello World"
+        })));
         const button = screen.getByRole('button', {
           name: 'Hello World'
         });

package/es/Button/index.js

@@ -25,13 +25,14 @@ var _dec, _dec2, _class, _Button;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { getInteraction, passthroughProps } from '@instructure/ui-react-utils';
 import { withStyle } from '@instructure/emotion';
 import generateComponentTheme from './theme';
 import { BaseButton } from '../BaseButton';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -99,7 +100,10 @@ let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable()
       renderIcon,
       themeOverride
     };
-    return /*#__PURE__*/React.createElement(BaseButton, buttonProps, children);
+    return _jsx(BaseButton, {
+      ...buttonProps,
+      children: children
+    });
   }
 }, _Button.displayName = "Button", _Button.componentId = 'Button', _Button.propTypes = propTypes, _Button.allowedProps = allowedProps, _Button.defaultProps = {
   type: 'button',

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

@@ -23,12 +23,12 @@ var _CloseButton;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CloseButton } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<CloseButton />', () => {
   let consoleWarningMock;
   beforeEach(() => {
@@ -39,7 +39,7 @@ describe('<CloseButton />', () => {
     consoleWarningMock.mockRestore();
   });
   it('should render with x icon', async () => {
-    render(_CloseButton || (_CloseButton = /*#__PURE__*/React.createElement(CloseButton, {
+    render(_CloseButton || (_CloseButton = _jsx(CloseButton, {
       screenReaderLabel: "Close"
     })));
     const button = screen.getByRole('button');
@@ -51,7 +51,7 @@ describe('<CloseButton />', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(CloseButton, {
+    render(_jsx(CloseButton, {
       onClick: onClick,
       screenReaderLabel: "Hello"
     }));

package/es/CloseButton/index.js

@@ -25,17 +25,17 @@ var _dec, _dec2, _class, _CloseButton;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { IconXSolid } from '@instructure/ui-icons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { testable } from '@instructure/ui-testable';
 import { getInteraction, passthroughProps } from '@instructure/ui-react-utils';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { BaseButton } from '../BaseButton';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -85,25 +85,30 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       tabIndex = _this$props3.tabIndex,
       styles = _this$props3.styles,
       props = _objectWithoutProperties(_this$props3, _excluded);
-    return jsx("span", Object.assign({}, passthroughProps(props), {
+    return _jsx("span", {
+      ...passthroughProps(props),
       css: styles === null || styles === void 0 ? void 0 : styles.closeButton,
-      ref: el => this.ref = el
-    }), jsx(BaseButton, {
-      renderIcon: IconXSolid,
-      elementRef: this.handleRef,
-      interaction: this.interaction,
-      type: type,
-      color: this.color,
-      size: size,
-      onClick: onClick,
-      margin: margin,
-      withBorder: false,
-      withBackground: false,
-      as: as,
-      href: href,
-      cursor: cursor,
-      tabIndex: tabIndex
-    }, jsx(ScreenReaderContent, null, screenReaderLabel)));
+      ref: el => this.ref = el,
+      children: _jsx(BaseButton, {
+        renderIcon: IconXSolid,
+        elementRef: this.handleRef,
+        interaction: this.interaction,
+        type: type,
+        color: this.color,
+        size: size,
+        onClick: onClick,
+        margin: margin,
+        withBorder: false,
+        withBackground: false,
+        as: as,
+        href: href,
+        cursor: cursor,
+        tabIndex: tabIndex,
+        children: _jsx(ScreenReaderContent, {
+          children: screenReaderLabel
+        })
+      })
+    });
   }
 }, _CloseButton.displayName = "CloseButton", _CloseButton.componentId = 'CloseButton', _CloseButton.propTypes = propTypes, _CloseButton.allowedProps = allowedProps, _CloseButton.defaultProps = {
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied