@atlaskit/color-picker 5.2.2 → 5.2.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/color-picker
 
+## 5.2.4
+
+### Patch Changes
+
+- [`92b1368d9607d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92b1368d9607d) -
+  Sorted type and interface props to improve Atlaskit docs
+- Updated dependencies
+
+## 5.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.2.2
 
 ### Patch Changes

package/ColorPaletteMenu/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/components/ColorPaletteMenu.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/components/ColorPaletteMenu.d.ts"
       ]

package/afm-cc/tsconfig.json

@@ -3,9 +3,9 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"composite": true,
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__color-picker",
-		"rootDir": "../"
+		"rootDir": "../",
+		"composite": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/codemods/__tests__/1.0.0-popper-props.ts

@@ -5,12 +5,12 @@ import transformer from '../1.0.0-popper-props';
 const applyTransform = require('jscodeshift/dist/testUtils').applyTransform;
 
 type TestArgs = {
-	it: string;
-	original: string;
+	after?: () => void;
+	before?: () => void;
 	expected: string;
+	it: string;
 	mode?: 'only' | 'skip';
-	before?: () => void;
-	after?: () => void;
+	original: string;
 };
 
 function noop() {}

package/codemods/utils/helpers.ts

@@ -29,8 +29,8 @@ export function getDefaultSpecifierName({
 	base,
 	packageName,
 }: {
-	j: core.JSCodeshift;
 	base: Collection<any>;
+	j: core.JSCodeshift;
 	packageName: string;
 }): Nullable<string> {
 	const specifiers = base
@@ -50,10 +50,10 @@ export function getSpecifierName({
 	packageName,
 	component,
 }: {
-	j: core.JSCodeshift;
 	base: Collection<any>;
-	packageName: string;
 	component: string;
+	j: core.JSCodeshift;
+	packageName: string;
 }): Nullable<string> {
 	const specifiers = base
 		.find(j.ImportDeclaration)
@@ -76,9 +76,9 @@ export function getJSXAttributesByName({
 	element,
 	attributeName,
 }: {
-	j: core.JSCodeshift;
-	element: JSXElement | ASTPath<JSXElement>;
 	attributeName: string;
+	element: JSXElement | ASTPath<JSXElement>;
+	j: core.JSCodeshift;
 }): Collection<JSXAttribute> {
 	return j(element)
 		.find(j.JSXOpeningElement)
@@ -96,9 +96,9 @@ export function hasJSXAttributesByName({
 	element,
 	attributeName,
 }: {
-	j: core.JSCodeshift;
-	element: JSXElement;
 	attributeName: string;
+	element: JSXElement;
+	j: core.JSCodeshift;
 }): boolean {
 	return getJSXAttributesByName({ j, element, attributeName }).length > 0;
 }
@@ -108,9 +108,9 @@ export function isUsingSupportedSpread({
 	base,
 	element,
 }: {
-	j: core.JSCodeshift;
 	base: Collection<any>;
 	element: NodePath<JSXElement, JSXElement>;
+	j: core.JSCodeshift;
 }): boolean {
 	const isUsingSpread: boolean = j(element).find(j.JSXSpreadAttribute).length > 0;
 
@@ -153,9 +153,9 @@ export function isUsingThroughSpread({
 	element,
 	propName,
 }: {
-	j: core.JSCodeshift;
 	base: Collection<any>;
 	element: NodePath<JSXElement, JSXElement>;
+	j: core.JSCodeshift;
 	propName: string;
 }): boolean {
 	if (!isUsingSupportedSpread({ j, base, element })) {
@@ -233,9 +233,9 @@ export function isUsingProp({
 	element,
 	propName,
 }: {
-	j: core.JSCodeshift;
 	base: Collection<any>;
 	element: NodePath<JSXElement, JSXElement>;
+	j: core.JSCodeshift;
 	propName: string;
 }): boolean {
 	return (
@@ -272,8 +272,8 @@ export function addCommentToStartOfFile({
 	base,
 	message,
 }: {
-	j: core.JSCodeshift;
 	base: Collection<Node>;
+	j: core.JSCodeshift;
 	message: string;
 }) {
 	addCommentBefore({
@@ -290,8 +290,8 @@ export function addCommentBefore({
 	message,
 }: {
 	j: core.JSCodeshift;
-	target: Collection<Node>;
 	message: string;
+	target: Collection<Node>;
 }) {
 	const content: string = ` TODO: (from codemod) ${clean(message)} `;
 	target.forEach((path) => {

package/dist/cjs/components/ColorPaletteMenu.js

@@ -61,7 +61,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "5.2.1"
+          packageVersion: "5.2.3"
         }
       })(createAnalyticsEvent);
     }
@@ -146,7 +146,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "5.2.1"
+  packageVersion: "5.2.3"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = null;
 var colorPaletteContainerStyles = null;

package/dist/cjs/components/ColorPicker.js

@@ -39,7 +39,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "5.2.1";
+var packageVersion = "5.2.3";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   function ColorPickerWithoutAnalyticsBase() {
     var _this;

package/dist/es2019/components/ColorPaletteMenu.js

@@ -42,7 +42,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "5.2.1"
+          packageVersion: "5.2.3"
         }
       })(createAnalyticsEvent);
     }
@@ -120,7 +120,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "5.2.1"
+  packageVersion: "5.2.3"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = null;
 const colorPaletteContainerStyles = null;

package/dist/es2019/components/ColorPicker.js

@@ -23,7 +23,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "5.2.1";
+const packageVersion = "5.2.3";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/esm/components/ColorPaletteMenu.js

@@ -52,7 +52,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "5.2.1"
+          packageVersion: "5.2.3"
         }
       })(createAnalyticsEvent);
     }
@@ -137,7 +137,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "5.2.1"
+  packageVersion: "5.2.3"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = null;
 var colorPaletteContainerStyles = null;

package/dist/esm/components/ColorPicker.js

@@ -30,7 +30,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "5.2.1";
+var packageVersion = "5.2.3";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   function ColorPickerWithoutAnalyticsBase() {
     var _this;

package/dist/types/components/ColorCard.d.ts

@@ -6,18 +6,18 @@ import React, { type KeyboardEventHandler, type Ref } from 'react';
 import type { ColorCardType, ColorCardVariant } from '../types';
 export interface Props {
     autoFocus?: boolean;
+    checkMarkColor?: string;
+    focused?: boolean;
     initialFocusRef?: Ref<HTMLDivElement>;
     isInsideMenu?: boolean;
-    type: ColorCardType;
-    value: string;
+    isOption?: boolean;
+    isTabbing?: boolean;
     label: string;
     onClick?: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
-    checkMarkColor?: string;
     selected?: boolean;
-    focused?: boolean;
-    isOption?: boolean;
-    isTabbing?: boolean;
+    type: ColorCardType;
+    value: string;
     variant?: ColorCardVariant;
 }
 export type ColorCardRef = {

package/dist/types/components/ColorPaletteMenu.d.ts

@@ -8,28 +8,28 @@ import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type Props = {
     /** the toggle that decides if the selected color will be automatically focused on load */
     autoFocus?: boolean;
+    /** color of checkmark on selected color */
+    checkMarkColor?: string;
+    /** maximum column length */
+    cols: number;
+    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
+    createAnalyticsEvent?: any;
+    /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
+    initialFocusRef?: Ref<HTMLDivElement>;
     /** the toggle that decides if users can tab outside the color picker (arrow keys will always cycle the focus) */
     isFocusLockEnabled?: boolean;
     /** the toggle that decides if menu-related assistive technology should be applied */
     isInsideMenu?: boolean;
     /** color picker button label */
     label?: string;
+    /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
+    mode?: Mode;
+    /** onChange handler */
+    onChange: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** list of available colors */
     palette: Palette;
     /** selected color */
     selectedColor?: string;
-    /** maximum column length */
-    cols: number;
-    /** color of checkmark on selected color */
-    checkMarkColor?: string;
-    /** onChange handler */
-    onChange: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
-    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
-    createAnalyticsEvent?: any;
-    /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
-    mode?: Mode;
-    /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
-    initialFocusRef?: Ref<HTMLDivElement>;
     /** Variant of color card */
     variant?: ColorCardVariant;
 };

package/dist/types/components/ColorPicker.d.ts

@@ -7,41 +7,41 @@ import { type PopupSelectProps } from '@atlaskit/select';
 import { type Palette, type SwatchSize, type ColorCardVariant } from '../types';
 import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
+    /** color of checkmark on selected color */
+    checkMarkColor?: string;
+    /** maximum column length */
+    cols?: number;
+    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
+    createAnalyticsEvent?: any;
+    /** diasble swatch button */
+    isDisabledSelectedSwatch?: boolean;
     /** color picker button label */
     label?: string;
-    /** trigger id for accessability labelling */
-    triggerId?: string;
+    /** onChange handler */
+    onChange: (value: string, analyticsEvent?: object) => void;
+    /** onMenuOpen handler */
+    onMenuOpen?: () => void;
     /** list of available colors */
     palette: Palette;
-    /** selected color */
-    selectedColor?: string;
-    /** maximum column length */
-    cols?: number;
-    /** color of checkmark on selected color */
-    checkMarkColor?: string;
     /** props for react-popper */
     popperProps?: PopupSelectProps['popperProps'];
-    /** onChange handler */
-    onChange: (value: string, analyticsEvent?: object) => void;
-    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
-    createAnalyticsEvent?: any;
+    /** selected color */
+    selectedColor?: string;
     /** swatch button size */
     selectedColourSwatchSize?: SwatchSize;
     /** swatch button default color */
     showDefaultSwatchColor?: boolean;
-    /** diasble swatch button */
-    isDisabledSelectedSwatch?: boolean;
-    /** onMenuOpen handler */
-    onMenuOpen?: () => void;
-    /** Display filled or outline variant of the color */
-    variant?: ColorCardVariant;
     /** Test ID  */
     testId?: string;
+    /** trigger id for accessability labelling */
+    triggerId?: string;
+    /** Display filled or outline variant of the color */
+    variant?: ColorCardVariant;
 }
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
-    forwardedRef?: React.Ref<any> | undefined;
+    forwardedRef?: React.Ref<any>;
 }, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/Trigger.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 import { type SwatchSize, type ColorCardVariant } from '../types';
 export interface Props {
-    value: string;
+    expanded?: boolean;
+    id?: string;
+    isDisabled?: boolean;
     label?: string;
     onClick?: () => void;
-    expanded?: boolean;
     swatchSize?: SwatchSize;
-    isDisabled?: boolean;
-    id?: string;
+    value: string;
     variant?: ColorCardVariant;
 }
 declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, variant, }: Props) => JSX.Element;

package/dist/types/components/components.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/dist/types-ts4.5/components/ColorCard.d.ts

@@ -6,18 +6,18 @@ import React, { type KeyboardEventHandler, type Ref } from 'react';
 import type { ColorCardType, ColorCardVariant } from '../types';
 export interface Props {
     autoFocus?: boolean;
+    checkMarkColor?: string;
+    focused?: boolean;
     initialFocusRef?: Ref<HTMLDivElement>;
     isInsideMenu?: boolean;
-    type: ColorCardType;
-    value: string;
+    isOption?: boolean;
+    isTabbing?: boolean;
     label: string;
     onClick?: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
-    checkMarkColor?: string;
     selected?: boolean;
-    focused?: boolean;
-    isOption?: boolean;
-    isTabbing?: boolean;
+    type: ColorCardType;
+    value: string;
     variant?: ColorCardVariant;
 }
 export type ColorCardRef = {

package/dist/types-ts4.5/components/ColorPaletteMenu.d.ts

@@ -8,28 +8,28 @@ import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type Props = {
     /** the toggle that decides if the selected color will be automatically focused on load */
     autoFocus?: boolean;
+    /** color of checkmark on selected color */
+    checkMarkColor?: string;
+    /** maximum column length */
+    cols: number;
+    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
+    createAnalyticsEvent?: any;
+    /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
+    initialFocusRef?: Ref<HTMLDivElement>;
     /** the toggle that decides if users can tab outside the color picker (arrow keys will always cycle the focus) */
     isFocusLockEnabled?: boolean;
     /** the toggle that decides if menu-related assistive technology should be applied */
     isInsideMenu?: boolean;
     /** color picker button label */
     label?: string;
+    /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
+    mode?: Mode;
+    /** onChange handler */
+    onChange: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** list of available colors */
     palette: Palette;
     /** selected color */
     selectedColor?: string;
-    /** maximum column length */
-    cols: number;
-    /** color of checkmark on selected color */
-    checkMarkColor?: string;
-    /** onChange handler */
-    onChange: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => void;
-    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
-    createAnalyticsEvent?: any;
-    /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
-    mode?: Mode;
-    /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
-    initialFocusRef?: Ref<HTMLDivElement>;
     /** Variant of color card */
     variant?: ColorCardVariant;
 };

package/dist/types-ts4.5/components/ColorPicker.d.ts

@@ -7,41 +7,41 @@ import { type PopupSelectProps } from '@atlaskit/select';
 import { type Palette, type SwatchSize, type ColorCardVariant } from '../types';
 import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
+    /** color of checkmark on selected color */
+    checkMarkColor?: string;
+    /** maximum column length */
+    cols?: number;
+    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
+    createAnalyticsEvent?: any;
+    /** diasble swatch button */
+    isDisabledSelectedSwatch?: boolean;
     /** color picker button label */
     label?: string;
-    /** trigger id for accessability labelling */
-    triggerId?: string;
+    /** onChange handler */
+    onChange: (value: string, analyticsEvent?: object) => void;
+    /** onMenuOpen handler */
+    onMenuOpen?: () => void;
     /** list of available colors */
     palette: Palette;
-    /** selected color */
-    selectedColor?: string;
-    /** maximum column length */
-    cols?: number;
-    /** color of checkmark on selected color */
-    checkMarkColor?: string;
     /** props for react-popper */
     popperProps?: PopupSelectProps['popperProps'];
-    /** onChange handler */
-    onChange: (value: string, analyticsEvent?: object) => void;
-    /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
-    createAnalyticsEvent?: any;
+    /** selected color */
+    selectedColor?: string;
     /** swatch button size */
     selectedColourSwatchSize?: SwatchSize;
     /** swatch button default color */
     showDefaultSwatchColor?: boolean;
-    /** diasble swatch button */
-    isDisabledSelectedSwatch?: boolean;
-    /** onMenuOpen handler */
-    onMenuOpen?: () => void;
-    /** Display filled or outline variant of the color */
-    variant?: ColorCardVariant;
     /** Test ID  */
     testId?: string;
+    /** trigger id for accessability labelling */
+    triggerId?: string;
+    /** Display filled or outline variant of the color */
+    variant?: ColorCardVariant;
 }
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
-    forwardedRef?: React.Ref<any> | undefined;
+    forwardedRef?: React.Ref<any>;
 }, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/Trigger.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 import { type SwatchSize, type ColorCardVariant } from '../types';
 export interface Props {
-    value: string;
+    expanded?: boolean;
+    id?: string;
+    isDisabled?: boolean;
     label?: string;
     onClick?: () => void;
-    expanded?: boolean;
     swatchSize?: SwatchSize;
-    isDisabled?: boolean;
-    id?: string;
+    value: string;
     variant?: ColorCardVariant;
 }
 declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, variant, }: Props) => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "5.2.2",
+	"version": "5.2.4",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/icon": "^28.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/select": "^21.2.0",
 		"@atlaskit/theme": "^19.0.0",
@@ -49,13 +49,11 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",
 		"jscodeshift": "^17.0.0",
-		"react": "^18.2.0",
-		"typescript": "~5.4.2"
+		"react": "^18.2.0"
 	},
 	"keywords": [
 		"ui",