@atlaskit/color-picker 3.1.0 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/color-picker
 
+## 3.1.2
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
+## 3.1.1
+
+### Patch Changes
+
+- [`4fd4b6307b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4fd4b6307b7) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 3.1.0
 
 ### Minor Changes

package/ColorPaletteMenu/package.json

@@ -5,9 +5,9 @@
   "module:es2019": "../dist/es2019/components/ColorPaletteMenu.js",
   "types": "../dist/types/components/ColorPaletteMenu.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/components/ColorPaletteMenu.d.ts"
+        "../dist/types-ts4.5/components/ColorPaletteMenu.d.ts"
       ]
     }
   }

package/dist/cjs/components/ColorPicker.js

@@ -37,7 +37,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.1.0";
+var packageVersion = "3.1.2";
 var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);

package/dist/cjs/styled/ColorCard.js

@@ -33,9 +33,12 @@ var ColorCardButton = _styledComponents.default.button(_templateObject3 || (_tem
 });
 exports.ColorCardButton = ColorCardButton;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 var ColorCardContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), (0, _theme.borderRadius)(), function (props) {
   return props.color;
 }, "var(--ds-background-inverse-subtle, ".concat(_theme.colors.DN600A, ")"));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.ColorCardContent = ColorCardContent;
 var ColorCardContentCheckMark = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px;\n"])));
 exports.ColorCardContentCheckMark = ColorCardContentCheckMark;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.1.0"
+	"version": "3.1.2"
 }

package/dist/es2019/components/ColorPicker.js

@@ -19,7 +19,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.1.0";
+const packageVersion = "3.1.2";
 export class ColorPickerWithoutAnalytics extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/styled/ColorCard.js

@@ -53,7 +53,7 @@ export const ColorCardButton = styled.button`
   }
 }};
 `;
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const ColorCardContent = styled.div`
   position: absolute;
   top: 1px;
@@ -65,6 +65,8 @@ export const ColorCardContent = styled.div`
   box-shadow: inset 0px 0px 0px 1px
     ${`var(--ds-background-inverse-subtle, ${colors.DN600A})`};
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const ColorCardContentCheckMark = styled.div`
   margin: 1px;
 `;

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.1.0"
+	"version": "3.1.2"
 }

package/dist/esm/components/ColorPicker.js

@@ -27,7 +27,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.1.0";
+var packageVersion = "3.1.2";
 export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);

package/dist/esm/styled/ColorCard.js

@@ -21,8 +21,10 @@ export var ColorCardButton = styled.button(_templateObject3 || (_templateObject3
     return buttonFocusedBorder;
   }
 });
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var ColorCardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), borderRadius(), function (props) {
   return props.color;
 }, "var(--ds-background-inverse-subtle, ".concat(colors.DN600A, ")"));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var ColorCardContentCheckMark = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 1px;\n"])));

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.1.0"
+	"version": "3.1.2"
 }

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-declare type ColorCardProps = {
+type ColorCardProps = {
     focused?: boolean;
     isTabbing?: boolean;
 };
 export declare const ColorCardOption: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardProps>;
 export declare const ColorCardButton: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & ColorCardProps, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & ColorCardProps>;
-declare type ColorCardContentProps = {
+type ColorCardContentProps = {
     color: string;
 };
 export declare const ColorCardContent: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardContentProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardContentProps>;

package/dist/types/styled/ColorPalette.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { Mode } from '../types';
-declare type Props = {
+type Props = {
     mode?: Mode;
 };
-declare type ColorPaletteMenuProps = {
+type ColorPaletteMenuProps = {
     cols: number;
     mode?: Mode;
 };

package/dist/types/types.d.ts

@@ -2,7 +2,7 @@ export interface Color {
     label: string;
     value: string;
 }
-export declare type Palette = Color[];
+export type Palette = Color[];
 export declare enum Mode {
     Compact = 0,
     Standard = 1

package/dist/types/utils.d.ts

@@ -1,6 +1,6 @@
 import { Palette } from './types';
 export declare const getWidth: (cols: number) => number;
-export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string | undefined) => {
+export declare const getOptions: import("memoize-one").MemoizedFn<(palette: Palette, selectedColor?: string) => {
     options: Palette;
     value: import("./types").Color;
     focusedItemIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Jira Software: Roadmaps",
@@ -25,7 +33,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/select": "^16.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0",
     "styled-components": "^3.2.6"
@@ -42,7 +50,7 @@
     "enzyme-adapter-react-16": "^1.15.1",
     "jscodeshift": "^0.13.0",
     "react": "^16.8.0",
-    "typescript": "4.5.5"
+    "typescript": "~4.9.5"
   },
   "keywords": [
     "ui",
@@ -57,7 +65,8 @@
   "techstack": {
     "@repo/internal": {
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ]
     }
   },

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,114 @@
+## API Report File for "@atlaskit/color-picker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { PopupSelectProps } from '@atlaskit/select';
+import { default as React_2 } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { ValueType } from '@atlaskit/select';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+interface Color {
+    // (undocumented)
+    label: string;
+    // (undocumented)
+    value: string;
+}
+
+// @public (undocumented)
+export const ColorPaletteMenu: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<ColorPaletteMenuProps, keyof WithAnalyticsEventsProps>, "checkMarkColor" | "label" | "onChange" | "palette" | "selectedColor"> & Partial<Pick<Omit<ColorPaletteMenuProps, keyof WithAnalyticsEventsProps>, "cols" | "mode">> & Partial<Pick<{
+    cols: number;
+    mode: Mode;
+}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "checkMarkColor" | "cols" | "key" | "label" | "mode" | "onChange" | "palette" | "selectedColor"> & React_2.RefAttributes<any>>;
+
+// @public (undocumented)
+export interface ColorPaletteMenuProps {
+    checkMarkColor?: string;
+    cols: number;
+    createAnalyticsEvent?: any;
+    label?: string;
+    mode?: Mode;
+    onChange: (value: string, analyticsEvent?: object) => void;
+    palette: Palette;
+    selectedColor?: string;
+}
+
+// @public (undocumented)
+export class ColorPaletteMenuWithoutAnalytics extends React_2.Component<ColorPaletteMenuProps> {
+    // (undocumented)
+    changeAnalyticsCaller: () => UIAnalyticsEvent | undefined;
+    // (undocumented)
+    createAndFireEventOnAtlaskit: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => UIAnalyticsEvent;
+    // (undocumented)
+    static defaultProps: {
+        cols: number;
+        mode: Mode;
+    };
+    // (undocumented)
+    onChange: (value: string) => void;
+    // (undocumented)
+    render(): JSX.Element;
+}
+
+// @public (undocumented)
+export interface ColorPickerProps {
+    checkMarkColor?: string;
+    cols?: number;
+    createAnalyticsEvent?: any;
+    label?: string;
+    onChange: (value: string, analyticsEvent?: object) => void;
+    palette: Palette;
+    popperProps?: PopupSelectProps['popperProps'];
+    selectedColor?: string;
+}
+
+// @public (undocumented)
+export class ColorPickerWithoutAnalytics extends React_2.Component<ColorPickerProps> {
+    // (undocumented)
+    changeAnalyticsCaller: () => UIAnalyticsEvent | undefined;
+    // (undocumented)
+    createAndFireEventOnAtlaskit: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => UIAnalyticsEvent;
+    // (undocumented)
+    onChangeSelect: (option: ValueType<Color>) => void;
+    // (undocumented)
+    onKeyDown: (e: React_2.KeyboardEvent<HTMLElement>) => void;
+    // (undocumented)
+    onOptionKeyDown: (value: string) => void;
+    // (undocumented)
+    render(): JSX.Element;
+    // (undocumented)
+    state: {
+        isTabbing: boolean;
+    };
+}
+
+// @public (undocumented)
+export const Compact: Mode;
+
+// @public (undocumented)
+const _default: React_2.ForwardRefExoticComponent<Pick<Omit<ColorPickerProps, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "checkMarkColor" | "cols" | "key" | "label" | "onChange" | "palette" | "popperProps" | "selectedColor"> & React_2.RefAttributes<any>>;
+export default _default;
+
+// @public (undocumented)
+enum Mode {
+    // (undocumented)
+    Compact = 0,
+    // (undocumented)
+    Standard = 1
+}
+
+// @public (undocumented)
+type Palette = Color[];
+
+// @public (undocumented)
+export const Standard: Mode;
+
+// (No @packageDocumentation comment for this package)
+
+```