@atlaskit/avatar 25.15.0 → 26.0.0
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/Avatar/package.json +1 -8
- package/AvatarItem/package.json +1 -8
- package/CHANGELOG.md +34 -0
- package/Presence/package.json +1 -8
- package/Skeleton/package.json +1 -8
- package/Status/package.json +1 -8
- package/avatar/package.json +1 -8
- package/avatar-content/package.json +1 -8
- package/avatar-context/package.json +1 -8
- package/avatar-item/package.json +1 -8
- package/avatar.docs.tsx +217 -215
- package/constants/package.json +1 -8
- package/dist/cjs/avatar.js +6 -2
- package/dist/cjs/size-utils.js +16 -0
- package/dist/cjs/skeleton.js +8 -2
- package/dist/es2019/avatar.js +6 -2
- package/dist/es2019/size-utils.js +11 -0
- package/dist/es2019/skeleton.js +14 -7
- package/dist/esm/avatar.js +6 -2
- package/dist/esm/size-utils.js +10 -0
- package/dist/esm/skeleton.js +8 -2
- package/dist/types/size-utils.d.ts +6 -0
- package/get-appearance/package.json +1 -8
- package/package.json +22 -26
- package/presence/package.json +1 -8
- package/skeleton/package.json +1 -8
- package/status/package.json +1 -8
- package/types/package.json +1 -8
- package/use-avatar-context/package.json +1 -8
- package/dist/types-ts4.5/avatar-content.d.ts +0 -21
- package/dist/types-ts4.5/avatar-context.d.ts +0 -14
- package/dist/types-ts4.5/avatar-item.d.ts +0 -64
- package/dist/types-ts4.5/avatar-radius.d.ts +0 -2
- package/dist/types-ts4.5/avatar-sizes.d.ts +0 -2
- package/dist/types-ts4.5/avatar.d.ts +0 -126
- package/dist/types-ts4.5/constants.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/avatar-content.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/avatar-context.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/avatar-item.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/avatar.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/constants.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/get-appearance.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/presence-old.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/presence.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/skeleton.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/status-old.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/status.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/use-avatar-context.d.ts +0 -1
- package/dist/types-ts4.5/get-appearance.d.ts +0 -3
- package/dist/types-ts4.5/index.d.ts +0 -19
- package/dist/types-ts4.5/internal/avatar-image.d.ts +0 -21
- package/dist/types-ts4.5/internal/content-context.d.ts +0 -29
- package/dist/types-ts4.5/internal/ensure-is-inside-avatar-context.d.ts +0 -5
- package/dist/types-ts4.5/internal/get-custom-element.d.ts +0 -3
- package/dist/types-ts4.5/internal/icon-wrapper.d.ts +0 -17
- package/dist/types-ts4.5/internal/presence-wrapper.d.ts +0 -19
- package/dist/types-ts4.5/internal/status-wrapper.d.ts +0 -19
- package/dist/types-ts4.5/internal/use-ensure-is-inside-avatar.d.ts +0 -1
- package/dist/types-ts4.5/presence.d.ts +0 -33
- package/dist/types-ts4.5/skeleton.d.ts +0 -34
- package/dist/types-ts4.5/status.d.ts +0 -32
- package/dist/types-ts4.5/types.d.ts +0 -8
- package/dist/types-ts4.5/use-avatar-context.d.ts +0 -2
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from '../get-appearance';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { AppearanceType, AvatarClickEventHandler, AvatarSizeMap, IndicatorSizeType, Presence as PresenceType, SizeType, Status as StatusType, } from '../types';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useAvatarContext } from '../use-avatar-context';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export { default } from './avatar';
|
|
2
|
-
export type { AvatarPropTypes } from './avatar';
|
|
3
|
-
export { AvatarContent } from './avatar-content';
|
|
4
|
-
export { default as AvatarItem } from './avatar-item';
|
|
5
|
-
export type { AvatarItemProps } from './avatar-item';
|
|
6
|
-
export { default as Presence } from './presence';
|
|
7
|
-
export type { PresenceProps } from './presence';
|
|
8
|
-
export { default as Status } from './status';
|
|
9
|
-
export type { StatusProps } from './status';
|
|
10
|
-
export { default as Skeleton } from './skeleton';
|
|
11
|
-
export type { SkeletonProps } from './skeleton';
|
|
12
|
-
export { default as getAppearanceForAppType } from './get-appearance';
|
|
13
|
-
export { AvatarContext } from './avatar-context';
|
|
14
|
-
export type { AvatarContextProps } from './avatar-context';
|
|
15
|
-
export { useAvatarContext } from './use-avatar-context';
|
|
16
|
-
export { BORDER_WIDTH, ACTIVE_SCALE_FACTOR } from './constants';
|
|
17
|
-
export { AVATAR_SIZES } from './avatar-sizes';
|
|
18
|
-
export { AVATAR_RADIUS } from './avatar-radius';
|
|
19
|
-
export type { AvatarClickEventHandler, AppearanceType, SizeType, Presence as PresenceType, Status as StatusType, IndicatorSizeType, } from './types';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC } from 'react';
|
|
6
|
-
import { type AppearanceType, type SizeType } from '../types';
|
|
7
|
-
interface AvatarImageProps {
|
|
8
|
-
appearance: AppearanceType;
|
|
9
|
-
size: SizeType;
|
|
10
|
-
alt?: string;
|
|
11
|
-
src?: string;
|
|
12
|
-
testId?: string;
|
|
13
|
-
imgLoading?: 'lazy' | 'eager';
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* __Avatar image__
|
|
17
|
-
*
|
|
18
|
-
* An avatar image is an internal component used to control the rendering phases of an image.
|
|
19
|
-
*/
|
|
20
|
-
declare const AvatarImage: FC<AvatarImageProps>;
|
|
21
|
-
export default AvatarImage;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { type ForwardedRef, type MouseEventHandler, type ReactNode } from 'react';
|
|
2
|
-
import { type AppearanceType, type SizeType } from '../types';
|
|
3
|
-
type AvatarContentContextProps = {
|
|
4
|
-
as: 'a' | 'button' | 'span';
|
|
5
|
-
appearance: AppearanceType;
|
|
6
|
-
avatarImage: ReactNode;
|
|
7
|
-
borderColor?: string;
|
|
8
|
-
href?: string;
|
|
9
|
-
isDisabled?: boolean;
|
|
10
|
-
label?: string;
|
|
11
|
-
onClick?: MouseEventHandler;
|
|
12
|
-
ref: ForwardedRef<HTMLElement>;
|
|
13
|
-
tabIndex?: number;
|
|
14
|
-
target?: '_blank' | '_self' | '_top' | '_parent';
|
|
15
|
-
testId?: string;
|
|
16
|
-
size: SizeType;
|
|
17
|
-
stackIndex?: number;
|
|
18
|
-
'aria-controls'?: string;
|
|
19
|
-
'aria-expanded'?: boolean;
|
|
20
|
-
'aria-haspopup'?: boolean | 'dialog';
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* __Avatar content context__
|
|
24
|
-
*
|
|
25
|
-
* This context provides the props for the AvatarContent component, enabling
|
|
26
|
-
* consumers to compose the AvatarContent with the Avatar component.
|
|
27
|
-
*/
|
|
28
|
-
export declare const AvatarContentContext: import('react').Context<AvatarContentContextProps>;
|
|
29
|
-
export {};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC, type ReactNode } from 'react';
|
|
6
|
-
interface IconWrapperProps {
|
|
7
|
-
bgColor?: string;
|
|
8
|
-
children?: ReactNode;
|
|
9
|
-
label?: string;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* __Icon wrapper__
|
|
13
|
-
*
|
|
14
|
-
* An icon wrapper is used internally only.
|
|
15
|
-
*/
|
|
16
|
-
declare const IconWrapper: FC<IconWrapperProps>;
|
|
17
|
-
export default IconWrapper;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC } from 'react';
|
|
6
|
-
import { type PresenceProps } from '../presence';
|
|
7
|
-
import { type AppearanceType, type IndicatorSizeType } from '../types';
|
|
8
|
-
interface PresenceWrapperProps extends PresenceProps {
|
|
9
|
-
appearance: AppearanceType;
|
|
10
|
-
size: IndicatorSizeType;
|
|
11
|
-
testId?: string;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* __Presence wrapper__
|
|
15
|
-
*
|
|
16
|
-
* A presence wrapper is used internally to position presence ontop of the avatar.
|
|
17
|
-
*/
|
|
18
|
-
declare const PresenceWrapper: FC<PresenceWrapperProps>;
|
|
19
|
-
export default PresenceWrapper;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC } from 'react';
|
|
6
|
-
import { type StatusProps } from '../status';
|
|
7
|
-
import { type AppearanceType, type IndicatorSizeType } from '../types';
|
|
8
|
-
interface StatusWrapperProps extends StatusProps {
|
|
9
|
-
appearance: AppearanceType;
|
|
10
|
-
size: IndicatorSizeType;
|
|
11
|
-
testId?: string;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* __Status wrapper__
|
|
15
|
-
*
|
|
16
|
-
* A status wrapper is used internally to position status on top of the avatar.
|
|
17
|
-
*/
|
|
18
|
-
declare const StatusWrapper: FC<StatusWrapperProps>;
|
|
19
|
-
export default StatusWrapper;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useEnsureIsInsideAvatar: () => void;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC, type ReactNode } from 'react';
|
|
6
|
-
import { type Presence } from './types';
|
|
7
|
-
export interface PresenceProps {
|
|
8
|
-
/**
|
|
9
|
-
* Used to override the default border color of the presence indicator.
|
|
10
|
-
* Accepts any color argument that the border-color CSS property accepts.
|
|
11
|
-
*/
|
|
12
|
-
borderColor?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Content to use as a custom presence indicator (usually not required if
|
|
15
|
-
* consuming Presence separate to Avatar).
|
|
16
|
-
*/
|
|
17
|
-
children?: ReactNode;
|
|
18
|
-
/**
|
|
19
|
-
* The type of presence indicator to show.
|
|
20
|
-
*/
|
|
21
|
-
presence?: Presence;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* __Avatar presence__
|
|
25
|
-
*
|
|
26
|
-
* A presence shows an avatar’s availability.
|
|
27
|
-
*
|
|
28
|
-
* - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
|
|
29
|
-
* - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
|
|
30
|
-
* - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
|
|
31
|
-
*/
|
|
32
|
-
declare const AvatarPresence: FC<PresenceProps>;
|
|
33
|
-
export default AvatarPresence;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC } from 'react';
|
|
6
|
-
import { type AppearanceType, type SizeType } from './types';
|
|
7
|
-
export interface SkeletonProps {
|
|
8
|
-
/**
|
|
9
|
-
* Indicates the shape of the avatar skeleton. Most avatars are circular, but square avatars can be used for container objects.
|
|
10
|
-
*/
|
|
11
|
-
appearance?: AppearanceType;
|
|
12
|
-
/**
|
|
13
|
-
* Color of the skeleton. By default, it will inherit the current text color.
|
|
14
|
-
*/
|
|
15
|
-
color?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Defines the size of the avatar skeleton.
|
|
18
|
-
*/
|
|
19
|
-
size?: SizeType;
|
|
20
|
-
/**
|
|
21
|
-
* Defines the opacity of the avatar skeleton. Use `weight="normal"` for the default opacity, or `weight="strong"` for a bolder opacity.
|
|
22
|
-
*/
|
|
23
|
-
weight?: 'normal' | 'strong';
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* __Skeleton__
|
|
27
|
-
*
|
|
28
|
-
* A skeleton is the loading state for the avatar component.
|
|
29
|
-
*
|
|
30
|
-
* - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
|
|
31
|
-
* - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
|
|
32
|
-
*/
|
|
33
|
-
declare const Skeleton: FC<SkeletonProps>;
|
|
34
|
-
export default Skeleton;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC, type ReactNode } from 'react';
|
|
6
|
-
import { type Status } from './types';
|
|
7
|
-
export interface StatusProps {
|
|
8
|
-
/**
|
|
9
|
-
* Override the default border color of the status indicator. This accepts
|
|
10
|
-
* any color argument that the CSS property `border-color` accepts.
|
|
11
|
-
*/
|
|
12
|
-
borderColor?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Content to use as a custom status indicator. Not needed if consuming
|
|
15
|
-
* `Status` separate to `Avatar`.
|
|
16
|
-
*/
|
|
17
|
-
children?: ReactNode;
|
|
18
|
-
/**
|
|
19
|
-
* The type of status indicator to show.
|
|
20
|
-
*/
|
|
21
|
-
status?: Status;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* __Avatar status__
|
|
25
|
-
*
|
|
26
|
-
* An avatar status shows contextual information, such as if someone approves or declines something.
|
|
27
|
-
*
|
|
28
|
-
* - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
|
|
29
|
-
* - [Code](https://atlassian.design/components/avatar/avatar-status/code)
|
|
30
|
-
*/
|
|
31
|
-
declare const AvatarStatus: FC<StatusProps>;
|
|
32
|
-
export default AvatarStatus;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
2
|
-
export type AvatarSizeMap = Record<SizeType, number>;
|
|
3
|
-
export type AppearanceType = 'circle' | 'square' | 'hexagon';
|
|
4
|
-
export type SizeType = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
|
|
5
|
-
export type IndicatorSizeType = 'small' | 'medium' | 'large' | 'xlarge';
|
|
6
|
-
export type AvatarClickEventHandler = (event: React.MouseEvent, analyticsEvent?: UIAnalyticsEvent) => void;
|
|
7
|
-
export type Status = 'approved' | 'declined' | 'locked' | 'warning';
|
|
8
|
-
export type Presence = 'online' | 'busy' | 'focus' | 'offline';
|