@atlaskit/avatar-group 9.1.0 → 9.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 9.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.1.1
+
+### Patch Changes
+
+- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+
 ## 9.1.0
 
 ### Minor Changes

package/dist/cjs/components/grid.js

@@ -17,20 +17,26 @@ var gutter = gridSize / 2;
 var listStyles = (0, _react2.css)({
   // removes default ul styles. Needs !important to override contextual styles in product.
   display: 'flex',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: -gutter,
   marginLeft: -gutter,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   justifyContent: 'flex-start',
   flexWrap: 'wrap',
   lineHeight: 1,
   listStyleType: 'none !important'
 });
 var listItemStyles = (0, _react2.css)({
-  margin: 0,
-  marginBottom: gridSize,
-  paddingRight: gutter,
-  paddingLeft: gutter
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize`
+  marginBottom: "var(--ds-scale-100, 8px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gutter`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gutter`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 
 var Grid = function Grid(_ref) {

package/dist/cjs/components/stack.js

@@ -17,14 +17,17 @@ var _constants = require("@atlaskit/theme/constants");
 var gutter = _avatar.BORDER_WIDTH * 2 + (0, _constants.gridSize)() / 2;
 var listStyles = (0, _react2.css)({
   display: 'flex',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: gutter,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   lineHeight: 1,
   listStyleType: 'none !important'
 });
 var listItemStyles = (0, _react2.css)({
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: -gutter
 });
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.1.0",
+	"version": "9.1.2",
 	"sideEffects": false
 }

package/dist/es2019/components/grid.js

@@ -7,20 +7,26 @@ const gutter = gridSize / 2;
 const listStyles = css({
   // removes default ul styles. Needs !important to override contextual styles in product.
   display: 'flex',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: -gutter,
   marginLeft: -gutter,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   justifyContent: 'flex-start',
   flexWrap: 'wrap',
   lineHeight: 1,
   listStyleType: 'none !important'
 });
 const listItemStyles = css({
-  margin: 0,
-  marginBottom: gridSize,
-  paddingRight: gutter,
-  paddingLeft: gutter
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize`
+  marginBottom: "var(--ds-scale-100, 8px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gutter`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gutter`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 
 const Grid = ({

package/dist/es2019/components/stack.js

@@ -6,14 +6,17 @@ import { gridSize } from '@atlaskit/theme/constants';
 const gutter = BORDER_WIDTH * 2 + gridSize() / 2;
 const listStyles = css({
   display: 'flex',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: gutter,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   lineHeight: 1,
   listStyleType: 'none !important'
 });
 const listItemStyles = css({
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: -gutter
 });
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.1.0",
+	"version": "9.1.2",
 	"sideEffects": false
 }

package/dist/esm/components/grid.js

@@ -7,20 +7,26 @@ var gutter = gridSize / 2;
 var listStyles = css({
   // removes default ul styles. Needs !important to override contextual styles in product.
   display: 'flex',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: -gutter,
   marginLeft: -gutter,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   justifyContent: 'flex-start',
   flexWrap: 'wrap',
   lineHeight: 1,
   listStyleType: 'none !important'
 });
 var listItemStyles = css({
-  margin: 0,
-  marginBottom: gridSize,
-  paddingRight: gutter,
-  paddingLeft: gutter
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize`
+  marginBottom: "var(--ds-scale-100, 8px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gutter`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gutter`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 
 var Grid = function Grid(_ref) {

package/dist/esm/components/stack.js

@@ -6,14 +6,17 @@ import { gridSize } from '@atlaskit/theme/constants';
 var gutter = BORDER_WIDTH * 2 + gridSize() / 2;
 var listStyles = css({
   display: 'flex',
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: gutter,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   lineHeight: 1,
   listStyleType: 'none !important'
 });
 var listItemStyles = css({
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   marginRight: -gutter
 });
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.1.0",
+	"version": "9.1.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.1.0",
+  "version": "9.1.2",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,16 +12,10 @@
   "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",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -34,10 +28,10 @@
   },
   "dependencies": {
     "@atlaskit/avatar": "^21.1.0",
-    "@atlaskit/menu": "^1.3.0",
+    "@atlaskit/menu": "^1.4.0",
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -47,11 +41,11 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/code": "^14.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.1",
-    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/form": "^8.7.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/section-message": "^6.3.0",
@@ -81,6 +75,7 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/avatar-group".
+## API Report File for "@atlaskit/avatar-group"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -13,16 +17,8 @@ import { MouseEventHandler } from 'react';
 import type { ReactNode } from 'react';
 import { SizeType } from '@atlaskit/avatar';
 
-/**
- * __Avatar group__
- *
- * An avatar group displays a number of avatars grouped together in a stack or grid.
- *
- * - [Examples](https://atlassian.design/components/avatar-group/examples)
- * - [Code](https://atlassian.design/components/avatar-group/code)
- * - [Usage](https://atlassian.design/components/avatar-group/usage)
- */
-declare const AvatarGroup: ({
+// @public
+const AvatarGroup: ({
   appearance,
   avatar,
   borderColor,
@@ -40,131 +36,73 @@ declare const AvatarGroup: ({
 }: AvatarGroupProps) => jsx.JSX.Element;
 export default AvatarGroup;
 
-declare interface AvatarGroupItemProps {
+// @public (undocumented)
+interface AvatarGroupItemProps {
+  // (undocumented)
   avatar: AvatarProps;
+  // (undocumented)
+  index: number;
+  // (undocumented)
   isActive?: boolean;
+  // (undocumented)
   isHover?: boolean;
-  index: number;
+  // (undocumented)
   onAvatarClick?: onAvatarClickHandler;
+  // (undocumented)
   testId?: string;
 }
 
-declare interface AvatarGroupOverrides {
-  AvatarGroupItem?: {
+// @public (undocumented)
+interface AvatarGroupOverrides {
+  // (undocumented)
+  Avatar?: {
     render?: (
-      Component: ElementType<AvatarGroupItemProps>,
-      props: AvatarGroupItemProps,
+      Component: ElementType<AvatarProps>,
+      props: AvatarProps,
       index: number,
     ) => ReactNode;
   };
-  Avatar?: {
+  // (undocumented)
+  AvatarGroupItem?: {
     render?: (
-      Component: ElementType<AvatarProps>,
-      props: AvatarProps,
+      Component: ElementType<AvatarGroupItemProps>,
+      props: AvatarGroupItemProps,
       index: number,
     ) => ReactNode;
   };
 }
 
-export declare interface AvatarGroupProps {
-  /**
-   * Indicates the layout of the avatar-group.
-   * Avatars will either be overlapped in a stack, or
-   * laid out in an even grid formation
-   * Defaults to "stack".
-   */
+// @public (undocumented)
+export interface AvatarGroupProps {
   appearance?: 'grid' | 'stack';
-  /**
-   * Component used to render each avatar
-   */
   avatar?: ElementType<AvatarProps>;
-  /**
-   * The maximum number of avatars allowed in the list.
-   * Defaults to 5 when displayed as a stack,
-   * and 11 when displayed as a grid.
-   */
-  maxCount?: number;
-  /**
-   * Defines the size of the avatar.
-   * Defaults to "medium".
-   */
-  size?: SizeType;
-  /**
-   * Typically the background color that the avatar is presented on.
-   * Accepts any color argument that the CSS border-color property accepts.
-   */
   borderColor?: string;
-  /**
-   * Array of avatar data passed to each `avatar` component.
-   * These props will be spread on to the component passed into avatar.
-   */
+  boundariesElement?: 'viewport' | 'window' | 'scrollParent';
   data: Array<AvatarProps>;
-  /**
-   * Handle the click event on the avatar item.
-   * Note that if an onClick prop is provided as part of avatar data, it will take precedence over onAvatarClick.
-   */
+  isTooltipDisabled?: boolean;
+  label?: string;
+  maxCount?: number;
   onAvatarClick?: onAvatarClickHandler;
-  /**
-   * Take control of the click event on the more indicator.
-   * This will cancel the default dropdown behavior.
-   */
   onMoreClick?: MouseEventHandler;
-  /**
-   * Provide additional props to the MoreButton.
-   * Example use cases: altering tab order by providing tabIndex;
-   * adding onClick behaviour without losing the default dropdown
-   */
+  overrides?: AvatarGroupOverrides;
   showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
-  /**
-   * Element the overflow popup should be attached to.
-   * Defaults to "viewport".
-   */
-  boundariesElement?: 'viewport' | 'window' | 'scrollParent';
-  /**
-   * A `testId` prop is provided for specified elements,
-   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests.
-   */
-  /**
-   * Will set these elements when defined:
-   * - Container element - `{testId}--avatar-group`
-   * - Avatar items - `{testId}--avatar-{index}`
-   * - Overflow menu button - `{testId}--overflow-menu--trigger`
-   * - Overflow menu content - `{testId}--overflow-menu--content`
-   */
+  size?: SizeType;
   testId?: string;
-  /**
-   * Custom overrides for the composed components.
-   */
-  overrides?: AvatarGroupOverrides;
-  /**
-   * Disables tooltips
-   */
-  isTooltipDisabled?: boolean;
-  /**
-     Text to be used as aria-label for the list of avatars.
-     Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
-
-     The label should describe the `AvatarGroup`'s entities, for instance:
-     - `label="team members"`, screen reader announcement would be `list team members, X items`
-     - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
-
-     When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
-     */
-  label?: string;
 }
 
-export declare type AvatarProps = AvatarPropTypes & {
+// @public (undocumented)
+export type AvatarProps = AvatarPropTypes & {
   name: string;
   enableTooltip?: boolean;
   key?: string | number;
 };
 
-declare type onAvatarClickHandler = (
+// @public (undocumented)
+type onAvatarClickHandler = (
   event: React.MouseEvent,
   analyticsEvent: AnalyticsEvent | undefined,
   index: number,
 ) => void;
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/dist/types-ts4.0/components/avatar-group-item.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { AvatarProps, onAvatarClickHandler } from './types';
-export interface AvatarGroupItemProps {
-    avatar: AvatarProps;
-    isActive?: boolean;
-    isHover?: boolean;
-    index: number;
-    onAvatarClick?: onAvatarClickHandler;
-    testId?: string;
-}
-declare const AvatarGroupItem: FC<AvatarGroupItemProps>;
-export default AvatarGroupItem;

package/dist/types-ts4.0/components/avatar-group.d.ts

@@ -1,103 +0,0 @@
-/** @jsx jsx */
-import { ElementType, MouseEventHandler } from 'react';
-import { jsx } from '@emotion/react';
-import { SizeType } from '@atlaskit/avatar';
-import { AvatarGroupOverrides, AvatarProps, onAvatarClickHandler } from './types';
-export interface AvatarGroupProps {
-    /**
-     * Indicates the layout of the avatar-group.
-     * Avatars will either be overlapped in a stack, or
-     * laid out in an even grid formation
-     * Defaults to "stack".
-     */
-    appearance?: 'grid' | 'stack';
-    /**
-     * Component used to render each avatar
-     */
-    avatar?: ElementType<AvatarProps>;
-    /**
-     * The maximum number of avatars allowed in the list.
-     * Defaults to 5 when displayed as a stack,
-     * and 11 when displayed as a grid.
-     */
-    maxCount?: number;
-    /**
-     * Defines the size of the avatar.
-     * Defaults to "medium".
-     */
-    size?: SizeType;
-    /**
-     * Typically the background color that the avatar is presented on.
-     * Accepts any color argument that the CSS border-color property accepts.
-     */
-    borderColor?: string;
-    /**
-     * Array of avatar data passed to each `avatar` component.
-     * These props will be spread on to the component passed into avatar.
-     */
-    data: Array<AvatarProps>;
-    /**
-     * Handle the click event on the avatar item.
-     * Note that if an onClick prop is provided as part of avatar data, it will take precedence over onAvatarClick.
-     */
-    onAvatarClick?: onAvatarClickHandler;
-    /**
-     * Take control of the click event on the more indicator.
-     * This will cancel the default dropdown behavior.
-     */
-    onMoreClick?: MouseEventHandler;
-    /**
-     * Provide additional props to the MoreButton.
-     * Example use cases: altering tab order by providing tabIndex;
-     * adding onClick behaviour without losing the default dropdown
-     */
-    showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
-    /**
-     * Element the overflow popup should be attached to.
-     * Defaults to "viewport".
-     */
-    boundariesElement?: 'viewport' | 'window' | 'scrollParent';
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    /**
-     * Will set these elements when defined:
-     * - Container element - `{testId}--avatar-group`
-     * - Avatar items - `{testId}--avatar-{index}`
-     * - Overflow menu button - `{testId}--overflow-menu--trigger`
-     * - Overflow menu content - `{testId}--overflow-menu--content`
-     */
-    testId?: string;
-    /**
-     * Custom overrides for the composed components.
-     */
-    overrides?: AvatarGroupOverrides;
-    /**
-     * Disables tooltips
-     */
-    isTooltipDisabled?: boolean;
-    /**
-      Text to be used as aria-label for the list of avatars.
-      Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
-  
-      The label should describe the `AvatarGroup`'s entities, for instance:
-      - `label="team members"`, screen reader announcement would be `list team members, X items`
-      - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
-  
-      When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
-     */
-    label?: string;
-}
-/**
- * __Avatar group__
- *
- * An avatar group displays a number of avatars grouped together in a stack or grid.
- *
- * - [Examples](https://atlassian.design/components/avatar-group/examples)
- * - [Code](https://atlassian.design/components/avatar-group/code)
- * - [Usage](https://atlassian.design/components/avatar-group/usage)
- */
-declare const AvatarGroup: ({ appearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, }: AvatarGroupProps) => jsx.JSX.Element;
-export default AvatarGroup;

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

@@ -1,8 +0,0 @@
-/** @jsx jsx */
-import { FC, ReactNode } from 'react';
-declare const Grid: FC<{
-    children: ReactNode;
-    testId?: string;
-    'aria-label': string;
-}>;
-export default Grid;

package/dist/types-ts4.0/components/more-indicator.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { AvatarClickEventHandler, AvatarPropTypes } from '@atlaskit/avatar';
-export interface MoreIndicatorProps extends AvatarPropTypes {
-    count: number;
-    'aria-controls'?: string;
-    'aria-expanded'?: boolean;
-    'aria-haspopup'?: boolean;
-    buttonProps: Partial<React.HTMLAttributes<HTMLElement>>;
-    onClick: AvatarClickEventHandler;
-    isActive: boolean;
-}
-declare const MoreIndicator: import("react").ForwardRefExoticComponent<MoreIndicatorProps & import("react").RefAttributes<HTMLButtonElement>>;
-export default MoreIndicator;

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

@@ -1,8 +0,0 @@
-/** @jsx jsx */
-import { FC, ReactNode } from 'react';
-declare const Stack: FC<{
-    children: ReactNode;
-    testId?: string;
-    'aria-label': string;
-}>;
-export default Stack;

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

@@ -1,21 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import type { AnalyticsEvent } from '@atlaskit/analytics-next';
-import type { AvatarPropTypes } from '@atlaskit/avatar';
-import type { AvatarGroupItemProps } from './avatar-group-item';
-export declare type DeepRequired<T> = {
-    [P in keyof T]-?: Required<T[P]>;
-};
-export declare type AvatarProps = AvatarPropTypes & {
-    name: string;
-    enableTooltip?: boolean;
-    key?: string | number;
-};
-export interface AvatarGroupOverrides {
-    AvatarGroupItem?: {
-        render?: (Component: ElementType<AvatarGroupItemProps>, props: AvatarGroupItemProps, index: number) => ReactNode;
-    };
-    Avatar?: {
-        render?: (Component: ElementType<AvatarProps>, props: AvatarProps, index: number) => ReactNode;
-    };
-}
-export declare type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;

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

@@ -1,2 +0,0 @@
-import { AvatarProps } from './types';
-export declare const composeUniqueKey: (props: AvatarProps, index: number) => string | number;

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

@@ -1,3 +0,0 @@
-export { default } from './components/avatar-group';
-export type { AvatarGroupProps } from './components/avatar-group';
-export type { AvatarProps } from './components/types';