@atlaskit/focus-ring 1.0.7 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/focus-ring
 
+## 1.2.0
+
+### Minor Changes
+
+- [`71bf011db22`](https://bitbucket.org/atlassian/atlassian-frontend/commits/71bf011db22) - Focus ring inset styles are now applied via outline - consistent with offset styles.
+
+## 1.1.0
+
+### Minor Changes
+
+- [`b5d79ded842`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5d79ded842) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
 ## 1.0.7
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -0,0 +1,13 @@
+---
+order: 0
+---
+
+import FocusRingDefault from '../../examples/constellation/focus-ring-default';
+
+## Default
+
+A focus ring is used to indicate the currently focused item.
+
+<Example Component={FocusRingDefault} packageName="@atlaskit/focus-ring" />
+
+

package/dist/cjs/focus-ring.js

@@ -7,21 +7,21 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
-
-var _colors = require("@atlaskit/theme/colors");
+var _react2 = require("@emotion/react");
 
 /** @jsx jsx */
 var BORDER_WIDTH = 2;
-var baseFocusOutsideStyles = (0, _core.css)({
-  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, ".concat(_colors.B100, ")")),
+var baseFocusOutsideStyles = (0, _react2.css)({
+  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #4C9AFF)"),
   outlineOffset: BORDER_WIDTH
 });
-var baseInsetStyles = (0, _core.css)({
-  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B100, ")")),
-  outline: 'none'
+var baseInsetStyles = (0, _react2.css)({
+  outlineColor: "var(--ds-border-focused, #4C9AFF)",
+  outlineOffset: -BORDER_WIDTH,
+  outlineStyle: 'solid',
+  outlineWidth: BORDER_WIDTH
 });
-var focusRingStyles = (0, _core.css)({
+var focusRingStyles = (0, _react2.css)({
   '&:focus-visible': baseFocusOutsideStyles,
   '@supports not selector(*:focus-visible)': {
     '&:focus': baseFocusOutsideStyles
@@ -32,7 +32,7 @@ var focusRingStyles = (0, _core.css)({
     }
   }
 });
-var insetFocusRingStyles = (0, _core.css)({
+var insetFocusRingStyles = (0, _react2.css)({
   '&:focus-visible': baseInsetStyles,
   '@supports not selector(*:focus-visible)': {
     '&:focus': baseInsetStyles
@@ -70,7 +70,7 @@ var FocusRing = function FocusRing(_ref) {
   var controlledStyles = isInset ? baseInsetStyles : baseFocusOutsideStyles;
   var uncontrolledStyles = isInset ? insetFocusRingStyles : focusRingStyles;
   var focusCls = typeof focus === 'undefined' ? uncontrolledStyles : focus === 'on' && controlledStyles;
-  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
+  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

package/dist/cjs/version.json

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

package/dist/es2019/focus-ring.js

@@ -1,15 +1,16 @@
 /** @jsx jsx */
 import { Children, cloneElement } from 'react';
-import { ClassNames, css, jsx } from '@emotion/core';
-import { B100 } from '@atlaskit/theme/colors';
+import { ClassNames, css, jsx } from '@emotion/react';
 const BORDER_WIDTH = 2;
 const baseFocusOutsideStyles = css({
-  outline: `${BORDER_WIDTH}px solid ${`var(--ds-border-focused, ${B100})`}`,
+  outline: `${BORDER_WIDTH}px solid ${"var(--ds-border-focused, #4C9AFF)"}`,
   outlineOffset: BORDER_WIDTH
 });
 const baseInsetStyles = css({
-  boxShadow: `inset 0px 0px 0px ${BORDER_WIDTH}px ${`var(--ds-border-focused, ${B100})`}`,
-  outline: 'none'
+  outlineColor: "var(--ds-border-focused, #4C9AFF)",
+  outlineOffset: -BORDER_WIDTH,
+  outlineStyle: 'solid',
+  outlineWidth: BORDER_WIDTH
 });
 const focusRingStyles = css({
   '&:focus-visible': baseFocusOutsideStyles,

package/dist/es2019/version.json

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

package/dist/esm/focus-ring.js

@@ -1,15 +1,16 @@
 /** @jsx jsx */
 import { Children, cloneElement } from 'react';
-import { ClassNames, css, jsx } from '@emotion/core';
-import { B100 } from '@atlaskit/theme/colors';
+import { ClassNames, css, jsx } from '@emotion/react';
 var BORDER_WIDTH = 2;
 var baseFocusOutsideStyles = css({
-  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, ".concat(B100, ")")),
+  outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #4C9AFF)"),
   outlineOffset: BORDER_WIDTH
 });
 var baseInsetStyles = css({
-  boxShadow: "inset 0px 0px 0px ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B100, ")")),
-  outline: 'none'
+  outlineColor: "var(--ds-border-focused, #4C9AFF)",
+  outlineOffset: -BORDER_WIDTH,
+  outlineStyle: 'solid',
+  outlineWidth: BORDER_WIDTH
 });
 var focusRingStyles = css({
   '&:focus-visible': baseFocusOutsideStyles,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/focus-ring",
-  "version": "1.0.7",
+  "version": "1.2.0",
   "description": "A focus ring is used to indicate the currently focused item.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -8,6 +8,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -20,33 +21,25 @@
   "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": {
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/progress-indicator": "^9.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -2,90 +2,44 @@
 
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
-````ts
+<!--
+	Generated API Report version: 2.0
+-->
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+```ts
 import { FC } from 'react';
 import type { FocusEventHandler } from 'react';
 import type { ReactElement } from 'react';
 
-export declare interface FocusEventHandlers {
-  onFocus: FocusEventHandler;
+// @public (undocumented)
+export interface FocusEventHandlers {
+  // (undocumented)
   onBlur: FocusEventHandler;
+  // (undocumented)
+  onFocus: 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>;
+// @public
+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`.
-   */
+// @public (undocumented)
+export interface FocusRingProps {
+  children: ReactElement;
   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';
+// @public (undocumented)
+export 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,
-) => {
+// @public
+export const useFocusRing: (initialState?: FocusState) => {
   readonly focusState: 'on' | 'off';
   readonly focusProps: FocusEventHandlers;
 };
 
-export {};
-````
+// (No @packageDocumentation comment for this package)
+```

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

@@ -1,23 +0,0 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import type { FocusRingProps } from './types';
-/**
- * __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;

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

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

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

@@ -1,22 +0,0 @@
-import type { FocusEventHandler, ReactElement } from 'react';
-export interface FocusEventHandlers {
-    onFocus: FocusEventHandler;
-    onBlur: FocusEventHandler;
-}
-export declare 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.0/use-focus-ring.d.ts

@@ -1,34 +0,0 @@
-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.
- *
- * @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>
- *  );
- *
- * }
- * ```
- */
-declare const useFocusRing: (initialState?: FocusState) => {
-    readonly focusState: "on" | "off";
-    readonly focusProps: FocusEventHandlers;
-};
-export default useFocusRing;