@atlaskit/focus-ring 1.2.3 → 1.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/focus-ring
 
+## 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
+
+- Updated dependencies
+
 ## 1.2.3
 
 ### 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

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 /** @jsx jsx */
+
 var BORDER_WIDTH = 2;
 var baseFocusOutsideStyles = (0, _react2.css)({
   outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #4C9AFF)"),
@@ -44,10 +42,14 @@ 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 assisitance from the Design System accessibility team.
  *
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
  *
@@ -62,18 +64,18 @@ var insetFocusRingStyles = (0, _react2.css)({
  * )
  * ```
  */
-
 var FocusRing = function FocusRing(_ref) {
   var children = _ref.children,
-      isInset = _ref.isInset,
-      focus = _ref.focus;
+    isInset = _ref.isInset,
+    focus = _ref.focus;
   var controlledStyles = isInset ? baseInsetStyles : baseFocusOutsideStyles;
   var uncontrolledStyles = isInset ? insetFocusRingStyles : focusRingStyles;
   var focusCls = typeof focus === 'undefined' ? uncontrolledStyles : focus === 'on' && controlledStyles;
   return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref2) {
     var css = _ref2.css,
-        cx = _ref2.cx;
-    return _react.Children.only( // This may look unwieldy but means we skip applying styles / cloning if no className is applicable
+      cx = _ref2.cx;
+    return _react.Children.only(
+    // This may look unwieldy but means we skip applying styles / cloning if no className is applicable
     focusCls ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element
@@ -82,6 +84,5 @@ var FocusRing = function FocusRing(_ref) {
     }) : children);
   });
 };
-
 var _default = FocusRing;
 exports.default = _default;

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "useFocusRing", {
     return _useFocusRing.default;
   }
 });
-
 var _focusRing = _interopRequireDefault(require("./focus-ring"));
-
 var _useFocusRing = _interopRequireDefault(require("./use-focus-ring"));

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

@@ -1,52 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 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.
- *
- * @example
- * ```jsx
- * import VisuallyHidden from '@atlaskit/visuall-hidden';
- * import FocusRing, { useFocusRing } from '@atlaskit/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.
  *
- * const InteractiveComponent = () => {
- *  const { focusState, focusProps } = useFocusRing();
+ * 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.
  *
- *  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';
-
   var _useState = (0, _react.useState)(initialState),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      focusState = _useState2[0],
-      setFocusState = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    focusState = _useState2[0],
+    setFocusState = _useState2[1];
   var focusProps = (0, _react.useRef)({
     onFocus: function onFocus() {
       return setFocusState('on');
@@ -60,6 +36,5 @@ var useFocusRing = function useFocusRing() {
     focusProps: focusProps.current
   };
 };
-
 var _default = useFocusRing;
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/focus-ring.js

@@ -35,10 +35,14 @@ 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 assisitance from the Design System accessibility team.
  *
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
  *
@@ -53,7 +57,6 @@ const insetFocusRingStyles = css({
  * )
  * ```
  */
-
 const FocusRing = ({
   children,
   isInset,
@@ -65,7 +68,8 @@ const FocusRing = ({
   return jsx(ClassNames, null, ({
     css,
     cx
-  }) => Children.only( // This may look unwieldy but means we skip applying styles / cloning if no className is applicable
+  }) => Children.only(
+  // This may look unwieldy but means we skip applying styles / cloning if no className is applicable
   focusCls ?
   /*#__PURE__*/
   // eslint-disable-next-line @repo/internal/react/no-clone-element
@@ -73,5 +77,4 @@ const FocusRing = ({
     className: cx([css(focusCls), children.props.className])
   }) : children));
 };
-
 export default FocusRing;

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

@@ -1,32 +1,13 @@
 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);
@@ -39,5 +20,4 @@ const useFocusRing = (initialState = 'off') => {
     focusProps: focusProps.current
   };
 };
-
 export default useFocusRing;

package/dist/es2019/version.json

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

package/dist/esm/focus-ring.js

@@ -35,10 +35,14 @@ 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 assisitance from the Design System accessibility team.
  *
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
  *
@@ -53,18 +57,18 @@ var insetFocusRingStyles = css({
  * )
  * ```
  */
-
 var FocusRing = function FocusRing(_ref) {
   var children = _ref.children,
-      isInset = _ref.isInset,
-      focus = _ref.focus;
+    isInset = _ref.isInset,
+    focus = _ref.focus;
   var controlledStyles = isInset ? baseInsetStyles : baseFocusOutsideStyles;
   var uncontrolledStyles = isInset ? insetFocusRingStyles : focusRingStyles;
   var focusCls = typeof focus === 'undefined' ? uncontrolledStyles : focus === 'on' && controlledStyles;
   return jsx(ClassNames, null, function (_ref2) {
     var css = _ref2.css,
-        cx = _ref2.cx;
-    return Children.only( // This may look unwieldy but means we skip applying styles / cloning if no className is applicable
+      cx = _ref2.cx;
+    return Children.only(
+    // This may look unwieldy but means we skip applying styles / cloning if no className is applicable
     focusCls ?
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-clone-element
@@ -73,5 +77,4 @@ var FocusRing = function FocusRing(_ref) {
     }) : children);
   });
 };
-
 export default FocusRing;

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

@@ -1,42 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
-
   var _useState = useState(initialState),
-      _useState2 = _slicedToArray(_useState, 2),
-      focusState = _useState2[0],
-      setFocusState = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    focusState = _useState2[0],
+    setFocusState = _useState2[1];
   var focusProps = useRef({
     onFocus: function onFocus() {
       return setFocusState('on');
@@ -50,5 +29,4 @@ var useFocusRing = function useFocusRing() {
     focusProps: focusProps.current
   };
 };
-
 export default useFocusRing;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/focus-ring",
-	"version": "1.2.3",
+	"version": "1.2.5",
 	"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 assisitance 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.3",
+  "version": "1.2.5",
   "description": "A focus ring is used to indicate the currently focused item.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -38,6 +38,7 @@
     "@atlaskit/button": "^16.5.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 +64,9 @@
       ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "tokens",
+      "design-tokens": [
+        "color"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/focus-ring"