@atlaskit/focus-ring 1.0.3 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/focus-ring
 
+## 1.0.6
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.4
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
 ## 1.0.3
 
 ### Patch Changes

package/dist/cjs/focus-ring.js

@@ -14,11 +14,11 @@ var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 var BORDER_WIDTH = 2;
 var baseFocusOutsideStyles = (0, _core.css)({
-  outline: "".concat(BORDER_WIDTH, "px solid ").concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, ".concat(_colors.B100, ")")),
   outlineOffset: BORDER_WIDTH
 });
 var baseInsetStyles = (0, _core.css)({
-  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B100, ")")),
   outline: 'none'
 });
 var focusRingStyles = (0, _core.css)({

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/focus-ring.js

@@ -4,11 +4,11 @@ import { ClassNames, css, jsx } from '@emotion/core';
 import { B100 } from '@atlaskit/theme/colors';
 var BORDER_WIDTH = 2;
 var baseFocusOutsideStyles = css({
-  outline: "".concat(BORDER_WIDTH, "px solid ").concat("var(--ds-border-focused, ".concat(B100, ")")),
+  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, ".concat(B100, ")")),
   outlineOffset: BORDER_WIDTH
 });
 var baseInsetStyles = css({
-  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focused, ".concat(B100, ")")),
+  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B100, ")")),
   outline: 'none'
 });
 var focusRingStyles = css({

package/dist/esm/version.json

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

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

@@ -28,7 +28,7 @@ import type { FocusEventHandlers, FocusState } from './types';
  * ```
  */
 declare const useFocusRing: (initialState?: FocusState) => {
-    readonly focusState: FocusState;
+    readonly focusState: "on" | "off";
     readonly focusProps: FocusEventHandlers;
 };
 export default useFocusRing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/focus-ring",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "A focus ring is used to indicate the currently focused item.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -11,10 +11,11 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Focus ring"
+      "name": "Focus ring",
+      "category": "Components"
     }
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -26,7 +27,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -34,7 +35,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/progress-indicator": "^9.2.0",
     "@atlaskit/ssr": "*",
@@ -45,7 +46,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^8.0.1",
     "react-dom": "^16.8.0",
-    "typescript": "3.9.10",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -54,6 +55,7 @@
       "circular-dependencies": "file-and-folder-level"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",
@@ -65,5 +67,6 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "homepage": "https://atlaskit.atlassian.com/packages/design-system/focus-ring",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }

package/report.api.md

@@ -0,0 +1,91 @@
+## API Report File for "@atlaskit/focus-ring"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+````ts
+import { FC } from 'react';
+import type { FocusEventHandler } from 'react';
+import type { ReactElement } from 'react';
+
+export declare interface FocusEventHandlers {
+  onFocus: FocusEventHandler;
+  onBlur: FocusEventHandler;
+}
+
+/**
+ * __Focus ring__
+ *
+ * A focus ring is used indicate the currently focused item.
+ *
+ * - [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;
+
+export declare 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;
+}
+
+export declare type FocusState = 'on' | 'off';
+
+/**
+ * __Use focus ring__
+ *
+ * The `useFocusRing` hook is designed to manage focus for the `FocusRing` in cases where the `FocusRing`'s visual application
+ * and the element that takes focus, differ. See the `focus` prop of `FocusRing` for more information.
+ *
+ * @example
+ * ```jsx
+ * import VisuallyHidden from '@atlaskit/visuall-hidden';
+ * import FocusRing, { useFocusRing } from '@atlaskit/focus-ring';
+ *
+ * const InteractiveComponent = () => {
+ *  const { focusState, focusProps } = useFocusRing();
+ *
+ *  return (
+ *    <div>
+ *      <VisuallHidden>
+ *        <input {...focusProps} />
+ *      </VisuallyHidden>
+ *      <FocusRing focus={focusState}>
+ *        <div role="button">Hello</div>
+ *      </FocusRing>
+ *    </div>
+ *  );
+ *
+ * }
+ * ```
+ */
+export declare const useFocusRing: (
+  initialState?: FocusState,
+) => {
+  readonly focusState: 'on' | 'off';
+  readonly focusProps: FocusEventHandlers;
+};
+
+export {};
+````