@atlaskit/focus-ring 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types-ts4.5/focus-ring.d.ts +26 -0
- package/dist/types-ts4.5/index.d.ts +3 -0
- package/dist/types-ts4.5/types.d.ts +22 -0
- package/dist/types-ts4.5/use-focus-ring.d.ts +16 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/cjs/version.json
CHANGED
package/dist/es2019/version.json
CHANGED
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { FC } from 'react';
|
|
3
|
+
import type { FocusRingProps } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* __Focus ring__
|
|
6
|
+
*
|
|
7
|
+
* A focus ring visually indicates the currently focused item.
|
|
8
|
+
*
|
|
9
|
+
* There are known accessibility issues with this component.
|
|
10
|
+
* Do not use without assistance from the Design System accessibility team.
|
|
11
|
+
*
|
|
12
|
+
* - [Code](https://atlaskit.atlassian.com/packages/design-system/focus-ring)
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```jsx
|
|
16
|
+
* import FocusRing from '@atlaskit/focus-ring';
|
|
17
|
+
*
|
|
18
|
+
* const InteractiveComponent = () => (
|
|
19
|
+
* <FocusRing>
|
|
20
|
+
* <button type="button">Hello</button>
|
|
21
|
+
* </FocusRing>
|
|
22
|
+
* )
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
declare const FocusRing: FC<FocusRingProps>;
|
|
26
|
+
export default FocusRing;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { FocusEventHandler, ReactElement } from 'react';
|
|
2
|
+
export interface FocusEventHandlers {
|
|
3
|
+
onFocus: FocusEventHandler;
|
|
4
|
+
onBlur: FocusEventHandler;
|
|
5
|
+
}
|
|
6
|
+
export type FocusState = 'on' | 'off';
|
|
7
|
+
export interface FocusRingProps {
|
|
8
|
+
/**
|
|
9
|
+
* Makes the `FocusRing` a controlled component (opting out of native focus behavior). The focus ring
|
|
10
|
+
* will apply the visual focus indicator when the `focus` prop is set to `on`. This prop should be used
|
|
11
|
+
* in conjunction with `useFocusRing`.
|
|
12
|
+
*/
|
|
13
|
+
focus?: FocusState;
|
|
14
|
+
/**
|
|
15
|
+
* Controls whether the focus ring should be applied around or within the composed element.
|
|
16
|
+
*/
|
|
17
|
+
isInset?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* The focusable element to be rendered within the `FocusRing`.
|
|
20
|
+
*/
|
|
21
|
+
children: ReactElement;
|
|
22
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { FocusEventHandlers, FocusState } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* __Use focus ring__
|
|
4
|
+
*
|
|
5
|
+
* This component has accessibility issues that we are working to resolve.
|
|
6
|
+
* Do not use without support from the Atlassian Design System accessibility team.
|
|
7
|
+
*
|
|
8
|
+
* The useFocusRing hook manages focus in the rare cases where the focus ring’s visual application and the element that takes focus differ.
|
|
9
|
+
* This is not typically a good practice for accessibility, so don’t do this unless you’ve consulted with the accessibility team.
|
|
10
|
+
*
|
|
11
|
+
*/
|
|
12
|
+
declare const useFocusRing: (initialState?: FocusState) => {
|
|
13
|
+
readonly focusState: "on" | "off";
|
|
14
|
+
readonly focusProps: FocusEventHandlers;
|
|
15
|
+
};
|
|
16
|
+
export default useFocusRing;
|