@atlaskit/focus-ring 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/focus-ring
 
+## 1.3.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
+## 1.3.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/focus-ring",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/focus-ring",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/focus-ring",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -3,7 +3,7 @@ export interface FocusEventHandlers {
     onFocus: FocusEventHandler;
     onBlur: FocusEventHandler;
 }
-export declare type FocusState = 'on' | 'off';
+export type FocusState = 'on' | 'off';
 export interface FocusRingProps {
     /**
      * Makes the `FocusRing` a controlled component (opting out of native focus behavior). The focus ring

package/dist/types-ts4.5/focus-ring.d.ts

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import type { FocusRingProps } from './types';
+/**
+ * __Focus ring__
+ *
+ * A focus ring visually indicates the currently focused item.
+ *
+ * There are known accessibility issues with this component.
+ * Do not use without assistance from the Design System accessibility team.
+ *
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
+ *
+ * @example
+ * ```jsx
+ * import FocusRing from '@atlaskit/focus-ring';
+ *
+ * const InteractiveComponent = () => (
+ *   <FocusRing>
+ *     <button type="button">Hello</button>
+ *   </FocusRing>
+ * )
+ * ```
+ */
+declare const FocusRing: FC<FocusRingProps>;
+export default FocusRing;

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

@@ -0,0 +1,3 @@
+export { default } from './focus-ring';
+export { default as useFocusRing } from './use-focus-ring';
+export type { FocusRingProps, FocusEventHandlers, FocusState } from './types';

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

@@ -0,0 +1,22 @@
+import type { FocusEventHandler, ReactElement } from 'react';
+export interface FocusEventHandlers {
+    onFocus: FocusEventHandler;
+    onBlur: FocusEventHandler;
+}
+export type FocusState = 'on' | 'off';
+export interface FocusRingProps {
+    /**
+     * Makes the `FocusRing` a controlled component (opting out of native focus behavior). The focus ring
+     * will apply the visual focus indicator when the `focus` prop is set to `on`. This prop should be used
+     * in conjunction with `useFocusRing`.
+     */
+    focus?: FocusState;
+    /**
+     * Controls whether the focus ring should be applied around or within the composed element.
+     */
+    isInset?: boolean;
+    /**
+     * The focusable element to be rendered within the `FocusRing`.
+     */
+    children: ReactElement;
+}

package/dist/types-ts4.5/use-focus-ring.d.ts

@@ -0,0 +1,16 @@
+import type { FocusEventHandlers, FocusState } from './types';
+/**
+ * __Use focus ring__
+ *
+ * This component has accessibility issues that we are working to resolve.
+ * Do not use without support from the Atlassian Design System accessibility team.
+ *
+ * The useFocusRing hook manages focus in the rare cases where the focus ring’s visual application and the element that takes focus differ.
+ * This is not typically a good practice for accessibility, so don’t do this unless you’ve consulted with the accessibility team.
+ *
+ */
+declare const useFocusRing: (initialState?: FocusState) => {
+    readonly focusState: "on" | "off";
+    readonly focusProps: FocusEventHandlers;
+};
+export default useFocusRing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/focus-ring",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "A focus ring is used to indicate the currently focused item.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -20,13 +20,21 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -46,7 +54,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {