@atlaskit/focus-ring 1.2.4 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/focus-ring
 
+## 1.2.6
+
+### Patch Changes
+
+- [`c23cf0b085d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c23cf0b085d) - Adds display name to component for React devtools debugging.
+
+## 1.2.5
+
+### Patch Changes
+
+- [`7f5f23dcb68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f5f23dcb68) - Introduce shape tokens to some packages.
+
 ## 1.2.4
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,8 @@
 # Focus ring
 
-A focus ring is used indicate the currently focused item.
+A focus ring is used to visually indicate the currently focused item.
+
+This component has accessibility issues that we are working to resolve. Do not use without support from the Atlassian Design System accessibility team.
 
 ## Usage
 

package/dist/cjs/focus-ring.js

@@ -46,7 +46,10 @@ var insetFocusRingStyles = (0, _react2.css)({
 /**
  * __Focus ring__
  *
- * A focus ring is used indicate the currently focused item.
+ * 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)
  *
@@ -61,7 +64,7 @@ var insetFocusRingStyles = (0, _react2.css)({
  * )
  * ```
  */
-var FocusRing = function FocusRing(_ref) {
+var FocusRing = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var children = _ref.children,
     isInset = _ref.isInset,
     focus = _ref.focus;
@@ -80,6 +83,7 @@ var FocusRing = function FocusRing(_ref) {
       className: cx([css(focusCls), children.props.className])
     }) : children);
   });
-};
+});
+FocusRing.displayName = 'FocusRing';
 var _default = FocusRing;
 exports.default = _default;

package/dist/cjs/use-focus-ring.js

@@ -10,30 +10,12 @@ var _react = require("react");
 /**
  * __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.
+ * This component has accessibility issues that we are working to resolve.
+ * Do not use without support from the Atlassian Design System accessibility team.
  *
- * @example
- * ```jsx
- * import VisuallyHidden from '@atlaskit/visuall-hidden';
- * import FocusRing, { useFocusRing } from '@atlaskit/focus-ring';
+ * 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.
  *
- * const InteractiveComponent = () => {
- *  const { focusState, focusProps } = useFocusRing();
- *
- *  return (
- *    <div>
- *      <VisuallHidden>
- *        <input {...focusProps} />
- *      </VisuallyHidden>
- *      <FocusRing focus={focusState}>
- *        <div role="button">Hello</div>
- *      </FocusRing>
- *    </div>
- *  );
- *
- * }
- * ```
  */
 var useFocusRing = function useFocusRing() {
   var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'off';

package/dist/cjs/version.json

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

package/dist/es2019/focus-ring.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Children, cloneElement } from 'react';
+import { Children, cloneElement, memo } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 const BORDER_WIDTH = 2;
 const baseFocusOutsideStyles = css({
@@ -39,7 +39,10 @@ const insetFocusRingStyles = css({
 /**
  * __Focus ring__
  *
- * A focus ring is used indicate the currently focused item.
+ * 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)
  *
@@ -54,7 +57,7 @@ const insetFocusRingStyles = css({
  * )
  * ```
  */
-const FocusRing = ({
+const FocusRing = /*#__PURE__*/memo(({
   children,
   isInset,
   focus
@@ -73,5 +76,6 @@ const FocusRing = ({
   cloneElement(children, {
     className: cx([css(focusCls), children.props.className])
   }) : children));
-};
+});
+FocusRing.displayName = 'FocusRing';
 export default FocusRing;

package/dist/es2019/use-focus-ring.js

@@ -2,30 +2,12 @@ import { useRef, useState } from 'react';
 /**
  * __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.
+ * This component has accessibility issues that we are working to resolve.
+ * Do not use without support from the Atlassian Design System accessibility team.
  *
- * @example
- * ```jsx
- * import VisuallyHidden from '@atlaskit/visuall-hidden';
- * import FocusRing, { useFocusRing } from '@atlaskit/focus-ring';
+ * 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.
  *
- * const InteractiveComponent = () => {
- *  const { focusState, focusProps } = useFocusRing();
- *
- *  return (
- *    <div>
- *      <VisuallHidden>
- *        <input {...focusProps} />
- *      </VisuallyHidden>
- *      <FocusRing focus={focusState}>
- *        <div role="button">Hello</div>
- *      </FocusRing>
- *    </div>
- *  );
- *
- * }
- * ```
  */
 const useFocusRing = (initialState = 'off') => {
   const [focusState, setFocusState] = useState(initialState);

package/dist/es2019/version.json

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

package/dist/esm/focus-ring.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Children, cloneElement } from 'react';
+import { Children, cloneElement, memo } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 var BORDER_WIDTH = 2;
 var baseFocusOutsideStyles = css({
@@ -39,7 +39,10 @@ var insetFocusRingStyles = css({
 /**
  * __Focus ring__
  *
- * A focus ring is used indicate the currently focused item.
+ * 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)
  *
@@ -54,7 +57,7 @@ var insetFocusRingStyles = css({
  * )
  * ```
  */
-var FocusRing = function FocusRing(_ref) {
+var FocusRing = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     isInset = _ref.isInset,
     focus = _ref.focus;
@@ -73,5 +76,6 @@ var FocusRing = function FocusRing(_ref) {
       className: cx([css(focusCls), children.props.className])
     }) : children);
   });
-};
+});
+FocusRing.displayName = 'FocusRing';
 export default FocusRing;

package/dist/esm/use-focus-ring.js

@@ -3,30 +3,12 @@ import { useRef, useState } from 'react';
 /**
  * __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.
+ * This component has accessibility issues that we are working to resolve.
+ * Do not use without support from the Atlassian Design System accessibility team.
  *
- * @example
- * ```jsx
- * import VisuallyHidden from '@atlaskit/visuall-hidden';
- * import FocusRing, { useFocusRing } from '@atlaskit/focus-ring';
+ * 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.
  *
- * const InteractiveComponent = () => {
- *  const { focusState, focusProps } = useFocusRing();
- *
- *  return (
- *    <div>
- *      <VisuallHidden>
- *        <input {...focusProps} />
- *      </VisuallyHidden>
- *      <FocusRing focus={focusState}>
- *        <div role="button">Hello</div>
- *      </FocusRing>
- *    </div>
- *  );
- *
- * }
- * ```
  */
 var useFocusRing = function useFocusRing() {
   var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'off';

package/dist/esm/version.json

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

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

@@ -4,7 +4,10 @@ import type { FocusRingProps } from './types';
 /**
  * __Focus ring__
  *
- * A focus ring is used indicate the currently focused item.
+ * 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)
  *

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

@@ -2,30 +2,12 @@ import type { FocusEventHandlers, FocusState } from './types';
 /**
  * __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.
+ * This component has accessibility issues that we are working to resolve.
+ * Do not use without support from the Atlassian Design System accessibility team.
  *
- * @example
- * ```jsx
- * import VisuallyHidden from '@atlaskit/visuall-hidden';
- * import FocusRing, { useFocusRing } from '@atlaskit/focus-ring';
+ * 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.
  *
- * const InteractiveComponent = () => {
- *  const { focusState, focusProps } = useFocusRing();
- *
- *  return (
- *    <div>
- *      <VisuallHidden>
- *        <input {...focusProps} />
- *      </VisuallyHidden>
- *      <FocusRing focus={focusState}>
- *        <div role="button">Hello</div>
- *      </FocusRing>
- *    </div>
- *  );
- *
- * }
- * ```
  */
 declare const useFocusRing: (initialState?: FocusState) => {
     readonly focusState: "on" | "off";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/focus-ring",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "A focus ring is used to indicate the currently focused item.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -8,7 +8,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -27,7 +26,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -35,9 +34,10 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/docs": "*",
     "@atlaskit/progress-indicator": "^9.4.0",
+    "@atlaskit/section-message": "^6.3.10",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/visual-regression": "*",
@@ -63,7 +63,9 @@
       ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "tokens",
+      "design-tokens": [
+        "color"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -50,3 +51,15 @@ export const useFocusRing: (initialState?: FocusState) => {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->