@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.
Files changed (64) hide show
  1. package/Avatar/package.json +1 -8
  2. package/AvatarItem/package.json +1 -8
  3. package/CHANGELOG.md +34 -0
  4. package/Presence/package.json +1 -8
  5. package/Skeleton/package.json +1 -8
  6. package/Status/package.json +1 -8
  7. package/avatar/package.json +1 -8
  8. package/avatar-content/package.json +1 -8
  9. package/avatar-context/package.json +1 -8
  10. package/avatar-item/package.json +1 -8
  11. package/avatar.docs.tsx +217 -215
  12. package/constants/package.json +1 -8
  13. package/dist/cjs/avatar.js +6 -2
  14. package/dist/cjs/size-utils.js +16 -0
  15. package/dist/cjs/skeleton.js +8 -2
  16. package/dist/es2019/avatar.js +6 -2
  17. package/dist/es2019/size-utils.js +11 -0
  18. package/dist/es2019/skeleton.js +14 -7
  19. package/dist/esm/avatar.js +6 -2
  20. package/dist/esm/size-utils.js +10 -0
  21. package/dist/esm/skeleton.js +8 -2
  22. package/dist/types/size-utils.d.ts +6 -0
  23. package/get-appearance/package.json +1 -8
  24. package/package.json +22 -26
  25. package/presence/package.json +1 -8
  26. package/skeleton/package.json +1 -8
  27. package/status/package.json +1 -8
  28. package/types/package.json +1 -8
  29. package/use-avatar-context/package.json +1 -8
  30. package/dist/types-ts4.5/avatar-content.d.ts +0 -21
  31. package/dist/types-ts4.5/avatar-context.d.ts +0 -14
  32. package/dist/types-ts4.5/avatar-item.d.ts +0 -64
  33. package/dist/types-ts4.5/avatar-radius.d.ts +0 -2
  34. package/dist/types-ts4.5/avatar-sizes.d.ts +0 -2
  35. package/dist/types-ts4.5/avatar.d.ts +0 -126
  36. package/dist/types-ts4.5/constants.d.ts +0 -2
  37. package/dist/types-ts4.5/entry-points/avatar-content.d.ts +0 -1
  38. package/dist/types-ts4.5/entry-points/avatar-context.d.ts +0 -2
  39. package/dist/types-ts4.5/entry-points/avatar-item.d.ts +0 -2
  40. package/dist/types-ts4.5/entry-points/avatar.d.ts +0 -2
  41. package/dist/types-ts4.5/entry-points/constants.d.ts +0 -3
  42. package/dist/types-ts4.5/entry-points/get-appearance.d.ts +0 -1
  43. package/dist/types-ts4.5/entry-points/presence-old.d.ts +0 -3
  44. package/dist/types-ts4.5/entry-points/presence.d.ts +0 -2
  45. package/dist/types-ts4.5/entry-points/skeleton.d.ts +0 -2
  46. package/dist/types-ts4.5/entry-points/status-old.d.ts +0 -3
  47. package/dist/types-ts4.5/entry-points/status.d.ts +0 -2
  48. package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
  49. package/dist/types-ts4.5/entry-points/use-avatar-context.d.ts +0 -1
  50. package/dist/types-ts4.5/get-appearance.d.ts +0 -3
  51. package/dist/types-ts4.5/index.d.ts +0 -19
  52. package/dist/types-ts4.5/internal/avatar-image.d.ts +0 -21
  53. package/dist/types-ts4.5/internal/content-context.d.ts +0 -29
  54. package/dist/types-ts4.5/internal/ensure-is-inside-avatar-context.d.ts +0 -5
  55. package/dist/types-ts4.5/internal/get-custom-element.d.ts +0 -3
  56. package/dist/types-ts4.5/internal/icon-wrapper.d.ts +0 -17
  57. package/dist/types-ts4.5/internal/presence-wrapper.d.ts +0 -19
  58. package/dist/types-ts4.5/internal/status-wrapper.d.ts +0 -19
  59. package/dist/types-ts4.5/internal/use-ensure-is-inside-avatar.d.ts +0 -1
  60. package/dist/types-ts4.5/presence.d.ts +0 -33
  61. package/dist/types-ts4.5/skeleton.d.ts +0 -34
  62. package/dist/types-ts4.5/status.d.ts +0 -32
  63. package/dist/types-ts4.5/types.d.ts +0 -8
  64. package/dist/types-ts4.5/use-avatar-context.d.ts +0 -2
@@ -1,2 +0,0 @@
1
- export type { AvatarPropTypes } from '../avatar';
2
- export { default } from '../avatar';
@@ -1,3 +0,0 @@
1
- export { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '../constants';
2
- export { AVATAR_RADIUS } from '../avatar-radius';
3
- export { AVATAR_SIZES } from '../avatar-sizes';
@@ -1 +0,0 @@
1
- export { default } from '../get-appearance';
@@ -1,3 +0,0 @@
1
- export { default } from '../presence';
2
- export type { PresenceProps } from '../presence';
3
- export type { Presence as PresenceType } from '../types';
@@ -1,2 +0,0 @@
1
- export { default } from '../presence';
2
- export type { PresenceProps } from '../presence';
@@ -1,2 +0,0 @@
1
- export type { SkeletonProps } from '../skeleton';
2
- export { default } from '../skeleton';
@@ -1,3 +0,0 @@
1
- export { default } from '../status';
2
- export type { StatusProps } from '../status';
3
- export type { Status as StatusType } from '../types';
@@ -1,2 +0,0 @@
1
- export { default } from '../status';
2
- export type { StatusProps } from '../status';
@@ -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,3 +0,0 @@
1
- import type { AppearanceType } from './types';
2
- declare const getAppearanceForAppType: (appType: string | null | undefined) => AppearanceType;
3
- export default getAppearanceForAppType;
@@ -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,5 +0,0 @@
1
- /**
2
- * Used to ensure Avatar sub-components are used within a Avatar component,
3
- * and provide a useful error message if not.
4
- */
5
- export declare const EnsureIsInsideAvatarContext: import('react').Context<boolean>;
@@ -1,3 +0,0 @@
1
- import { type MouseEventHandler } from 'react';
2
- declare const getCustomElement: (isDisabled?: boolean, href?: string, onClick?: MouseEventHandler, ariaHasPopup?: boolean | 'dialog') => 'a' | 'button' | 'span';
3
- export default getCustomElement;
@@ -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';
@@ -1,2 +0,0 @@
1
- import { type AvatarContextProps } from './avatar-context';
2
- export declare const useAvatarContext: () => AvatarContextProps | undefined;