@atlaskit/color-picker 3.1.8 → 3.2.0

package/dist/cjs/components/components.js

@@ -6,24 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Placeholder = exports.Option = exports.MenuList = exports.DropdownIndicator = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
 var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
-var _ColorPalette = require("../styled/ColorPalette");
-var _excluded = ["cx", "selectProps", "innerRef"];
+var _constants = require("../constants");
+var _react = require("@emotion/react");
+/** @jsx jsx */
+
 var MenuList = exports.MenuList = function MenuList(props) {
-  var cx = props.cx,
-    cols = props.selectProps.cols,
+  var cols = props.selectProps.cols,
     innerRef = props.innerRef,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteContainer, (0, _extends2.default)({
+    children = props.children;
+  return (0, _react.jsx)("div", {
+    css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
       maxWidth: cols ? (0, _utils.getWidth)(cols) : undefined
     },
-    innerRef: innerRef
-  }, rest));
+    ref: innerRef
+  }, children);
 };
 var Option = exports.Option = function Option(props) {
   var _props$data = props.data,
@@ -36,26 +36,34 @@ var Option = exports.Option = function Option(props) {
     isFocused = props.isFocused,
     isSelected = props.isSelected,
     innerProps = props.innerProps;
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error - known issue: https://github.com/mui/material-ui/issues/13921. TS treats styled components to be different from HTMLDivElement
-    _react.default.createElement(_ColorPalette.ColorCardWrapper, innerProps, /*#__PURE__*/_react.default.createElement(_ColorCard.default, {
-      label: label,
-      value: value,
-      checkMarkColor: checkMarkColor,
-      isOption: true,
-      focused: isFocused,
-      selected: isSelected,
-      onKeyDown: function onKeyDown(value) {
-        return onOptionKeyDown(value);
-      },
-      isTabbing: isTabbing
-    }))
-  );
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: colorCardWrapperStyles
+  }, innerProps), (0, _react.jsx)(_ColorCard.default, {
+    label: label,
+    value: value,
+    checkMarkColor: checkMarkColor,
+    isOption: true,
+    focused: isFocused,
+    selected: isSelected,
+    onKeyDown: function onKeyDown(value) {
+      return onOptionKeyDown(value);
+    },
+    isTabbing: isTabbing
+  }));
 };
 var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator() {
   return null;
 };
 var Placeholder = exports.Placeholder = function Placeholder() {
   return null;
-};
+};
+var colorCardWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "".concat(_constants.COLOR_CARD_SIZE, "px")
+});
+var colorPaletteContainerStyles = (0, _react.css)({
+  display: 'flex',
+  flexWrap: 'wrap',
+  padding: "var(--ds-space-050, 4px)"
+});

package/dist/cjs/utils.js

@@ -8,11 +8,13 @@ exports.getWidth = exports.getOptions = void 0;
 var _theme = require("@atlaskit/theme");
 var _constants = require("./constants");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _types = require("./types");
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
-var getWidth = exports.getWidth = function getWidth(cols) {
-  return cols * (_constants.COLOR_CARD_SIZE + (0, _theme.gridSize)() / 2);
+var getWidth = exports.getWidth = function getWidth(cols, mode) {
+  var width = cols * (_constants.COLOR_CARD_SIZE + (0, _theme.gridSize)() / 2);
+  return mode === _types.Mode.Standard ? width + (0, _theme.gridSize)() : width;
 };
 var getOptions = exports.getOptions = (0, _memoizeOne.default)(function (palette, selectedColor) {
   var focusedItemIndex = 0;

package/dist/es2019/components/ColorCard.js

@@ -1,75 +1,98 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { PureComponent } from 'react';
+/** @jsx jsx */
+import React, { useCallback } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors } from '@atlaskit/theme';
 import Tooltip from '@atlaskit/tooltip';
-import { ColorCardOption, ColorCardContent, ColorCardContentCheckMark } from '../styled/ColorCard';
-import { KEY_SPACE, KEY_ENTER } from '../constants';
-export default class ColorCard extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "onMouseDown", event => {
+import { COLOR_CARD_SIZE, KEY_ENTER, KEY_SPACE } from '../constants';
+import { css, jsx } from '@emotion/react';
+import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
+const ColorCard = props => {
+  const {
+    value,
+    label,
+    selected,
+    focused,
+    checkMarkColor = `var(--ds-icon-inverse, ${N0})`,
+    isTabbing,
+    onClick,
+    onKeyDown
+  } = props;
+  const handleMouseDown = useCallback(event => {
+    event.preventDefault();
+  }, []);
+  const handleClick = useCallback(event => {
+    if (onClick) {
       event.preventDefault();
-    });
-    _defineProperty(this, "onClick", event => {
-      const {
-        onClick,
-        value
-      } = this.props;
-      if (onClick) {
-        event.preventDefault();
-        onClick(value);
-      }
-    });
-    _defineProperty(this, "onKeyDown", event => {
-      const {
-        key
-      } = event;
-      const {
-        onKeyDown,
-        value,
-        isTabbing
-      } = this.props;
-      if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
-        event.preventDefault();
-        if (isTabbing) {
-          event.stopPropagation();
-        }
-        onKeyDown(value);
-      }
-    });
-    _defineProperty(this, "ref", /*#__PURE__*/React.createRef());
-  }
-  render() {
+      onClick(value);
+    }
+  }, [onClick, value]);
+  const handleKeyDown = useCallback(event => {
     const {
-      value,
-      label,
-      selected,
-      focused,
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      checkMarkColor = colors.N0,
-      isTabbing
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      content: label
-    }, /*#__PURE__*/React.createElement(ColorCardOption, {
-      onClick: this.onClick,
-      onMouseDown: this.onMouseDown,
-      focused: focused,
-      role: "radio",
-      "aria-checked": selected,
-      "aria-label": label,
-      tabIndex: 0,
-      onKeyDown: this.onKeyDown,
-      isTabbing: isTabbing
-    }, /*#__PURE__*/React.createElement(ColorCardContent, {
-      color: value || 'transparent'
-    }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {
-      primaryColor: checkMarkColor,
-      label: ""
-    })))));
+      key
+    } = event;
+    if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
+      event.preventDefault();
+      if (isTabbing) {
+        event.stopPropagation();
+      }
+      onKeyDown(value);
+    }
+  }, [isTabbing, onKeyDown, value]);
+  return jsx(Tooltip, {
+    content: label
+  }, jsx("div", {
+    css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyDown: handleKeyDown,
+    role: "radio",
+    "aria-checked": selected,
+    "aria-label": label,
+    tabIndex: 0
+  }, jsx("div", {
+    css: colorCardContentStyles,
+    style: {
+      background: value || 'transparent'
+    }
+  }, selected && jsx("div", {
+    css: colorCardContentCheckMarkStyles
+  }, jsx(EditorDoneIcon, {
+    primaryColor: checkMarkColor,
+    label: ""
+  })))));
+};
+export default ColorCard;
+const sharedColorContainerStyles = css({
+  display: 'inline-block',
+  position: 'relative',
+  width: `${COLOR_CARD_SIZE}px`,
+  height: `${COLOR_CARD_SIZE}px`,
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: '6px',
+  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  backgroundColor: `var(--ds-background-neutral-subtle, ${N0})`,
+  borderColor: `var(--ds-background-neutral-subtle, ${N0})`,
+  padding: "var(--ds-space-0, 0px)",
+  cursor: 'pointer',
+  outline: 'none'
+});
+const colorCardOptionTabbingStyles = css({
+  ':hover, :focus': {
+    borderColor: `var(--ds-border-focused, ${B75})`
   }
-}
+});
+const colorCardOptionFocusedStyles = css({
+  borderColor: `var(--ds-border-focused, ${B75})`
+});
+const colorCardContentStyles = css({
+  position: 'absolute',
+  top: '1px',
+  left: '1px',
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: `inset 0px 0px 0px 1px ${`var(--ds-background-inverse-subtle, ${DN600A})`}`
+});
+const colorCardContentCheckMarkStyles = css({
+  margin: '1px'
+});

package/dist/es2019/components/ColorPaletteMenu.js

@@ -1,78 +1,94 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+/** @jsx jsx */
 import { Mode } from '../types';
-import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
-import { ColorCardWrapper, ColorPaletteMenu, ColorPaletteContainer } from '../styled/ColorPalette';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import ColorCard from './ColorCard';
-import { getOptions } from '../utils';
-export class ColorPaletteMenuWithoutAnalytics extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "createAndFireEventOnAtlaskit", createAndFireEvent('atlaskit'));
-    _defineProperty(this, "changeAnalyticsCaller", () => {
-      const {
-        createAnalyticsEvent
-      } = this.props;
-      if (createAnalyticsEvent) {
-        return this.createAndFireEventOnAtlaskit({
-          action: 'clicked',
-          actionSubject: 'color-palette-menu',
-          attributes: {
-            componentName: 'color-picker',
-            packageName: "@atlaskit/color-picker",
-            packageVersion: "3.1.8"
-          }
-        })(createAnalyticsEvent);
-      }
-      return undefined;
-    });
-    _defineProperty(this, "onChange", value => {
-      this.props.onChange(value, this.changeAnalyticsCaller());
-    });
-  }
-  render() {
-    const {
-      palette,
-      selectedColor,
-      checkMarkColor,
-      cols,
-      label = 'Color picker',
-      mode
-    } = this.props;
-    const {
-      options,
-      value: selectedValue
-    } = getOptions(palette, selectedColor);
-    const fullLabel = `${label}, ${selectedValue.label} selected`;
-    return /*#__PURE__*/React.createElement(ColorPaletteMenu, {
-      cols: cols,
-      "aria-label": fullLabel,
-      mode: mode,
-      role: "radiogroup"
-    }, /*#__PURE__*/React.createElement(ColorPaletteContainer, {
-      mode: mode
-    }, options.map(({
-      label,
-      value
-    }) => /*#__PURE__*/React.createElement(ColorCardWrapper, {
-      key: value
-    }, /*#__PURE__*/React.createElement(ColorCard, {
-      label: label,
-      value: value,
-      checkMarkColor: checkMarkColor,
-      isOption: true,
-      selected: value === selectedValue.value,
-      onClick: this.onChange,
-      onKeyDown: this.onChange
-    })))));
-  }
-}
-_defineProperty(ColorPaletteMenuWithoutAnalytics, "defaultProps", {
-  cols: 6,
-  mode: Mode.Standard
-});
+import { getOptions, getWidth } from '../utils';
+import { css, jsx } from '@emotion/react';
+import { COLOR_CARD_SIZE } from '../constants';
+import { N0, N40 } from '@atlaskit/theme/colors';
+export const ColorPaletteMenuWithoutAnalytics = ({
+  createAnalyticsEvent,
+  onChange,
+  palette,
+  selectedColor,
+  checkMarkColor,
+  label = 'Color picker',
+  cols = 6,
+  mode = Mode.Standard
+}) => {
+  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+  const changeAnalyticsCaller = () => {
+    if (createAnalyticsEvent) {
+      return createAndFireEventOnAtlaskit({
+        action: 'clicked',
+        actionSubject: 'color-palette-menu',
+        attributes: {
+          componentName: 'color-picker',
+          packageName: "@atlaskit/color-picker",
+          packageVersion: "3.2.0"
+        }
+      })(createAnalyticsEvent);
+    }
+    return undefined;
+  };
+  const handleChange = value => {
+    onChange(value, changeAnalyticsCaller());
+  };
+  const {
+    options,
+    value: selectedValue
+  } = getOptions(palette, selectedColor);
+  const fullLabel = `${label}, ${selectedValue.label} selected`;
+  return jsx("div", {
+    "aria-label": fullLabel,
+    role: "radiogroup",
+    css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
+    style: {
+      width: `${getWidth(cols, mode)}px`
+    }
+  }, jsx("div", {
+    css: [colorPaletteContainerStyles, mode === Mode.Compact && colorPaletteContainerCompactStyles]
+  }, options.map(({
+    label,
+    value
+  }) => jsx("div", {
+    css: colorCardWrapperStyles,
+    key: value
+  }, jsx(ColorCard, {
+    label: label,
+    value: value,
+    checkMarkColor: checkMarkColor,
+    isOption: true,
+    selected: value === selectedValue.value,
+    onClick: handleChange,
+    onKeyDown: handleChange
+  })))));
+};
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.1.8"
-})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
+  packageVersion: "3.2.0"
+})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
+const colorCardWrapperStyles = css({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: `${COLOR_CARD_SIZE}px`
+});
+const colorPaletteContainerStyles = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  padding: "var(--ds-space-050, 4px)"
+});
+const colorPaletteContainerCompactStyles = css({
+  padding: "var(--ds-space-0, 0)"
+});
+const colorPaletteMenuStyles = css({
+  display: 'flex',
+  position: 'relative',
+  margin: "var(--ds-space-0, 0)",
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`
+});
+const colorPaletteMenuStandardStyles = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40}, 0 0 8px ${N40}`})`
+});

package/dist/es2019/components/ColorPicker.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
 import { PopupSelect } from '@atlaskit/select';
 import Trigger from './Trigger';
 import * as components from './components';
-import { KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_TAB } from '../constants';
-import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
-import { ColorCardWrapper } from '../styled/ColorPicker';
+import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } from '../constants';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getOptions } from '../utils';
+import { css, jsx } from '@emotion/react';
 const defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -19,7 +20,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.1.8";
+const packageVersion = "3.2.0";
 export class ColorPickerWithoutAnalytics extends React.Component {
   constructor(...args) {
     super(...args);
@@ -77,13 +78,14 @@ export class ColorPickerWithoutAnalytics extends React.Component {
       value
     } = getOptions(palette, selectedColor);
     const fullLabel = `${label}, ${value.label} selected`;
-    return /*#__PURE__*/React.createElement(PopupSelect, {
+    return jsx(PopupSelect, {
       target: ({
         ref,
         isOpen
-      }) => /*#__PURE__*/React.createElement(ColorCardWrapper, {
-        innerRef: ref
-      }, /*#__PURE__*/React.createElement(Trigger, _extends({}, value, {
+      }) => jsx("div", {
+        css: colorCardWrapperStyles,
+        ref: ref
+      }, jsx(Trigger, _extends({}, value, {
         label: fullLabel,
         expanded: isOpen
       }))),
@@ -112,4 +114,7 @@ export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName,
   packageVersion
-})(withAnalyticsEvents()(ColorPickerWithoutAnalytics));
+})(withAnalyticsEvents()(ColorPickerWithoutAnalytics));
+const colorCardWrapperStyles = css({
+  display: 'inline-block'
+});

package/dist/es2019/components/Trigger.js

@@ -1,42 +1,75 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { ColorCardButton, ColorCardContent } from '../styled/ColorCard';
+/** @jsx jsx */
+import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
-export default class ColorCard extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "onMouseDown", event => {
+import { css, jsx } from '@emotion/react';
+import { COLOR_CARD_SIZE } from '../constants';
+import { B100, DN600A, N0 } from '@atlaskit/theme/colors';
+const ColorCard = ({
+  value,
+  label,
+  expanded,
+  onClick
+}) => {
+  const handleMouseDown = useCallback(event => {
+    event.preventDefault();
+  }, []);
+  const handleClick = useCallback(event => {
+    event.currentTarget.focus();
+    if (onClick) {
       event.preventDefault();
-    });
-    _defineProperty(this, "onClick", event => {
-      const {
-        onClick
-      } = this.props;
-      event.currentTarget.focus();
-      if (onClick) {
-        event.preventDefault();
-        onClick();
-      }
-    });
+      onClick();
+    }
+  }, [onClick]);
+  return jsx(Tooltip, {
+    content: label
+  }, jsx("button", {
+    css: [sharedColorContainerStyles, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    "aria-label": label,
+    "aria-expanded": expanded,
+    "aria-haspopup": true,
+    type: "button"
+  }, jsx("span", {
+    css: colorCardContentStyles,
+    style: {
+      background: value || 'transparent'
+    }
+  })));
+};
+export default ColorCard;
+const sharedColorContainerStyles = css({
+  display: 'inline-block',
+  position: 'relative',
+  width: `${COLOR_CARD_SIZE}px`,
+  height: `${COLOR_CARD_SIZE}px`,
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: '6px',
+  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  backgroundColor: `var(--ds-background-neutral-subtle, ${N0})`,
+  borderColor: `var(--ds-background-neutral-subtle, ${N0})`,
+  padding: "var(--ds-space-0, 0px)",
+  cursor: 'pointer',
+  outline: 'none'
+});
+const colorCardButtonStyles = css({
+  ':hover': {
+    borderColor: `var(--ds-background-neutral-subtle, ${N0})`
+  },
+  ':not(:focus):hover, :focus': {
+    borderColor: `var(--ds-border-focused, ${B100})`
   }
-  render() {
-    const {
-      value,
-      label,
-      expanded
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      content: label
-    }, /*#__PURE__*/React.createElement(ColorCardButton, {
-      onClick: this.onClick,
-      onMouseDown: this.onMouseDown,
-      focused: expanded,
-      "aria-label": label,
-      "aria-expanded": expanded,
-      "aria-haspopup": true,
-      type: "button"
-    }, /*#__PURE__*/React.createElement(ColorCardContent, {
-      color: value || 'transparent'
-    })));
-  }
-}
+});
+const colorCardButtonFocusedStyles = css({
+  borderColor: `var(--ds-border-focused, ${B100})`
+});
+const colorCardContentStyles = css({
+  position: 'absolute',
+  top: '1px',
+  left: '1px',
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: `inset 0px 0px 0px 1px ${`var(--ds-background-inverse-subtle, ${DN600A})`}`
+});