@atlaskit/visually-hidden 1.0.2 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/visually-hidden
 
+## 1.1.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 1.1.0
+
+### Minor Changes
+
+- [`86b6aecec17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/86b6aecec17) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/visually-hidden",
-	"version": "1.0.2",
+	"version": "1.1.1",
 	"sideEffects": false
 }

package/dist/cjs/visually-hidden.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
-var visuallyHiddenStyles = (0, _core.css)({
+var visuallyHiddenStyles = (0, _react.css)({
   width: '1px',
   height: '1px',
   padding: '0',
@@ -43,7 +43,7 @@ var VisuallyHidden = function VisuallyHidden(_ref) {
       testId = _ref.testId,
       role = _ref.role,
       id = _ref.id;
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     id: id,
     "data-testid": testId,
     css: visuallyHiddenStyles,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/visually-hidden",
-	"version": "1.0.2",
+	"version": "1.1.1",
 	"sideEffects": false
 }

package/dist/es2019/visually-hidden.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 const visuallyHiddenStyles = css({
   width: '1px',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/visually-hidden",
-	"version": "1.0.2",
+	"version": "1.1.1",
 	"sideEffects": false
 }

package/dist/esm/visually-hidden.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 var visuallyHiddenStyles = css({
   width: '1px',

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './visually-hidden';
+export type { VisuallyHiddenProps } from './types';

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export declare type VisuallyHiddenProps = {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * The element or elements that should be hidden.
+     */
+    children: ReactNode;
+    /**
+     * Role attribute is passed on to the span to aid screen readers.
+     */
+    role?: string;
+    /**
+     * An id may be appropriate for this component if used in conjunction with `aria-describedby`
+     * on a paired element.
+     */
+    id?: string;
+};

package/dist/types-ts4.0/visually-hidden.d.ts

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import type { VisuallyHiddenProps } from './types';
+/**
+ * __Visually hidden__
+ *
+ * A composable element to apply a visually hidden effect to children.
+ * Useful for accessibility compliance.
+ *
+ * @example
+ * ```jsx
+ * import VisuallyHidden from '@atlaskit/visually-hidden';
+ *
+ * export default () => (
+ *   <div style={{ border: '1px solid black' }}>
+ *      There is text hidden between the brackets [
+ *      <VisuallyHidden>Can't see me!</VisuallyHidden>]
+ *   </div>
+ * );
+ * ```
+ */
+declare const VisuallyHidden: FC<VisuallyHiddenProps>;
+export default VisuallyHidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/visually-hidden",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "A composable element that hides elements from the screen while keeping them accessible.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -21,6 +21,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
@@ -28,20 +35,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "^0.8.0",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {