@atlaskit/checkbox 12.3.4 → 12.3.8

package/dist/esm/checkbox.js

@@ -1,63 +1,131 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
 
 /**  @jsx jsx */
-import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { forwardRef, memo, useCallback, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs'; // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
-import PrimitiveSVGIcon from '@atlaskit/icon/svg';
-import GlobalTheme from '@atlaskit/theme/components';
-import { getCheckboxStyles, Label, LabelText, RequiredIndicator } from './internal';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
 // firefox doesn't handle cmd+click/ctrl+click properly
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 
-function getIcon(isIndeterminate, isChecked) {
-  if (isIndeterminate) {
-    return jsx("rect", {
-      fill: "inherit",
-      x: "8",
-      y: "11",
-      width: "8",
-      height: "2",
-      rx: "1"
-    });
-  }
-
-  if (isChecked) {
-    return jsx("path", {
-      d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
-      fill: "inherit"
-    });
-  } // No icon
+var checkboxStyles = css({
+  width: 0,
+  // Necessary to hide correctly on mobile Safari
+  height: 0,
+  // Necessary to hide correctly on mobile Safari
+  margin: 0,
+  appearance: 'none',
+  border: 'none',
+  // Necessary to hide correctly on mobile Safari
+  outline: 'none',
+  // Necessary to hide focus ring on Firefox
+  '& + svg': {
+    flexShrink: 0,
+    alignSelf: 'flex-start',
 
+    /**
+     *  Change the variables --checkbox-background-color, --checkbox-border-color
+     *  and --checkbox-tick-color according to user interactions.
+     *  All other variables are constant.
+     *  All styles from the input target the sibling svg.
+     */
+    '--checkbox-background-color': 'var(--local-background)',
+    '--checkbox-border-color': 'var(--local-border)',
+    '--checkbox-tick-color': 'var(--local-tick-rest)',
+    color: 'var(--checkbox-background-color)',
+    fill: 'var(--checkbox-tick-color)',
+    transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
+    'rect:first-of-type': {
+      stroke: 'var(--checkbox-border-color)',
+      strokeWidth: 2,
+      transition: 'stroke 0.2s ease-in-out'
+    }
+  },
+  '&&:focus + svg, &&:checked:focus + svg': {
+    '--checkbox-border-color': 'var(--local-border-focus)'
+  },
+  '&:hover + svg': {
+    '--checkbox-background-color': 'var(--local-background-hover)',
+    '--checkbox-border-color': 'var(--local-border-hover)'
+  },
+  '&:checked:hover + svg': {
+    '--checkbox-background-color': 'var(--local-background-checked-hover)',
+    '--checkbox-border-color': 'var(--local-border-checked-hover)'
+  },
+  '&:checked + svg': {
+    '--checkbox-background-color': 'var(--local-background-checked)',
+    '--checkbox-border-color': 'var(--local-border-checked)',
+    '--checkbox-tick-color': 'var(--local-tick-checked)'
+  },
+  '&[data-invalid] + svg': {
+    '--checkbox-border-color': 'var(--local-border-invalid)'
+  },
+  '&:checked[data-invalid] + svg': {
+    '--checkbox-border-color': 'var(--local-border-checked-invalid)'
+  },
+  '&:active + svg': {
+    '--checkbox-background-color': 'var(--local-background-active)',
+    '--checkbox-border-color': 'var(--local-border-active)'
+  },
+  '&:checked:active + svg': {
+    '--checkbox-background-color': 'var(--local-background-active)',
+    '--checkbox-border-color': 'var(--local-border-active)',
+    '--checkbox-tick-color': 'var(--local-tick-active)'
+  },
+  '&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
+    '--checkbox-background-color': 'var(--local-background-disabled)',
+    '--checkbox-border-color': 'var(--local-border-disabled)',
+    cursor: 'not-allowed',
+    pointerEvents: 'none'
+  },
+  '&:disabled:checked + svg': {
+    '--checkbox-tick-color': 'var(--local-tick-disabled)'
+  },
+  '@media screen and (forced-colors: active)': {
+    '& + svg': {
+      '--checkbox-background-color': 'Canvas',
+      '--checkbox-border-color': 'CanvasText',
+      '--checkbox-tick-color': 'CanvasText'
+    },
+    '&:checked + svg, &:checked:hover + svg': {
+      '--checkbox-background-color': 'Canvas',
+      '--checkbox-border-color': 'CanvasText',
+      '--checkbox-tick-color': 'CanvasText'
+    },
+    '&:focus + svg rect:first-of-type': {
+      stroke: 'Highlight'
+    },
+    '&[data-invalid] + svg': {
+      '--checkbox-border-color': 'Highlight'
+    },
+    '&:checked[data-invalid] + svg': {
+      '--checkbox-border-color': 'Highlight'
+    },
+    '&:disabled + svg, &:disabled:hover + svg, &:disabled:focus + svg, &:disabled:active + svg, &:disabled[data-invalid] + svg': {
+      '--checkbox-background-color': 'Canvas',
+      '--checkbox-border-color': 'GrayText',
+      '--checkbox-tick-color': 'GrayText'
+    }
+  }
+});
+/* eslint-enable @repo/internal/styles/no-nested-styles */
 
-  return null;
-}
+/**
+ * __Checkbox__
+ *
+ * A checkbox an input control that allows a user to select one or more options from a number of choices.
+ *
+ * - [Examples](https://atlassian.design/components/checkbox/examples)
+ * - [Code](https://atlassian.design/components/checkbox/code)
+ * - [Usage](https://atlassian.design/components/checkbox/usage)
+ */
 
-var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
-  var size = _ref.size,
-      isIndeterminate = _ref.isIndeterminate,
-      isChecked = _ref.isChecked;
-  return jsx(PrimitiveSVGIcon, {
-    label: "",
-    size: size,
-    primaryColor: "var(--checkbox-background-color)",
-    secondaryColor: "var(--checkbox-tick-color)"
-  }, jsx("g", {
-    fillRule: "evenodd"
-  }, jsx("rect", {
-    fill: "currentColor",
-    x: "6",
-    y: "6",
-    width: "12",
-    height: "12",
-    rx: "2"
-  }), getIcon(isIndeterminate, isChecked)));
-});
-var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   var isCheckedProp = props.isChecked,
       _props$isDisabled = props.isDisabled,
       isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
@@ -72,12 +140,11 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
       onChangeProps = props.onChange,
       analyticsContext = props.analyticsContext,
       label = props.label,
-      mode = props.mode,
       name = props.name,
       value = props.value,
       isRequired = props.isRequired,
       testId = props.testId,
-      rest = _objectWithoutProperties(props, ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "mode", "name", "value", "isRequired", "testId"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
       _useState2 = _slicedToArray(_useState, 2),
@@ -97,7 +164,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.4"
+    packageVersion: "12.3.8"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -111,13 +178,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   }; // Use isChecked from the state if it is controlled
 
 
-  var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp; // The styles are being generated for the input but are being
-  // applied to the svg with a sibling selector so we have access
-  // to the pseudo-classes of the input
-
-  var styles = useMemo(function () {
-    return getCheckboxStyles(mode);
-  }, [mode]);
+  var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
     testId: testId && "".concat(testId, "--checkbox-label"),
@@ -130,7 +191,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     value: value,
     name: name,
     required: isRequired,
-    css: styles,
+    css: checkboxStyles,
     onChange: onChangeAnalytics,
     "aria-checked": isIndeterminate ? 'mixed' : isChecked,
     "aria-invalid": isInvalid ? 'true' : undefined,
@@ -140,18 +201,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     size: size,
     isIndeterminate: isIndeterminate,
     isChecked: isChecked
-  }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, {
-    "aria-hidden": "true"
-  })));
-});
-export var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return jsx(CheckboxWithMode, _extends({}, props, {
-      ref: ref,
-      mode: mode
-    }));
-  });
+  }), label && jsx(LabelText, null, label, isRequired && jsx(RequiredIndicator, null)));
 }));
 Checkbox.displayName = 'Checkbox';
 export default Checkbox;

package/dist/esm/index.js

@@ -1,2 +1,2 @@
 // This allows you to import Checkbox as a default or named export
-export { default, Checkbox } from './checkbox';
+export { default, default as Checkbox } from './checkbox';

package/dist/esm/internal/checkbox-icon.js

@@ -0,0 +1,61 @@
+/**  @jsx jsx */
+import { memo, useMemo } from 'react';
+import { jsx } from '@emotion/core';
+import PrimitiveSVGIcon from '@atlaskit/icon/svg';
+
+function getIcon(isIndeterminate, isChecked) {
+  if (isIndeterminate) {
+    return jsx("rect", {
+      fill: "inherit",
+      x: "8",
+      y: "11",
+      width: "8",
+      height: "2",
+      rx: "1"
+    });
+  }
+
+  if (isChecked) {
+    return jsx("path", {
+      d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
+      fill: "inherit"
+    });
+  } // No icon
+
+
+  return null;
+}
+/**
+ * __Checkbox icon__
+ *
+ * A checkbox icon is the visual representation of checkbox state,
+ * which is shown instead of the native input.
+ *
+ * @internal
+ */
+
+
+var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
+  var size = _ref.size,
+      isIndeterminate = _ref.isIndeterminate,
+      isChecked = _ref.isChecked;
+  var icon = useMemo(function () {
+    return getIcon(isIndeterminate, isChecked);
+  }, [isIndeterminate, isChecked]);
+  return jsx(PrimitiveSVGIcon, {
+    label: "",
+    size: size,
+    primaryColor: "var(--checkbox-background-color)",
+    secondaryColor: "var(--checkbox-tick-color)"
+  }, jsx("g", {
+    fillRule: "evenodd"
+  }, jsx("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "6",
+    width: "12",
+    height: "12",
+    rx: "2"
+  }), icon));
+});
+export default CheckboxIcon;

package/dist/esm/internal/constants.js

@@ -0,0 +1,3 @@
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+export var fontFamily = getFontFamily();
+export var gridSize = getGridSize();

package/dist/esm/internal/index.js

@@ -1,4 +1,4 @@
-export { default as getCheckboxStyles } from './styles';
+export { default as CheckboxIcon } from './checkbox-icon';
 export { default as Label } from './label';
 export { default as LabelText } from './label-text';
 export { default as RequiredIndicator } from './required-indicator';

package/dist/esm/internal/label-text.js

@@ -1,14 +1,13 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { gridSize } from '@atlaskit/theme/constants';
-var padding = gridSize() * 0.5;
-export var labelTextCSS = {
-  paddingRight: padding,
-  paddingLeft: padding
-};
+import { css, jsx } from '@emotion/core';
+import { gridSize } from './constants';
+var labelTextStyles = css({
+  paddingRight: 0.5 * gridSize,
+  paddingLeft: 0.5 * gridSize
+});
 export default function LabelText(_ref) {
   var children = _ref.children;
   return jsx("span", {
-    css: labelTextCSS
+    css: labelTextStyles
   }, children);
 }

package/dist/esm/internal/label.js

@@ -1,33 +1,97 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import { N80, N900 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-var fontFamily = getFontFamily();
-export var labelCSS = function labelCSS() {
-  return {
-    fontFamily: fontFamily,
-    alignItems: 'center',
-    display: 'flex',
-    color: token('color.text.highEmphasis', N900),
-    cursor: 'default',
-    '&[data-disabled]': {
-      color: token('color.text.disabled', N80),
-      cursor: 'not-allowed'
-    }
-  };
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily } from './constants';
+import theme from './theme';
+var labelStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  color: "var(--ds-text, ".concat(N900, ")"),
+  cursor: 'default',
+  fontFamily: fontFamily
+});
+var disabledStyles = css({
+  color: "var(--ds-text-disabled, ".concat(N80, ")"),
+  cursor: 'not-allowed'
+});
+var themeStyles = {
+  light: css({
+    /**
+     * Background
+     */
+    '--local-background': theme.light.boxColor.rest,
+    '--local-background-active': theme.light.boxColor.active,
+    '--local-background-checked': theme.light.boxColor.checked,
+    '--local-background-checked-hover': theme.light.boxColor.hoveredAndChecked,
+    '--local-background-disabled': theme.light.boxColor.disabled,
+    '--local-background-hover': theme.light.boxColor.hovered,
+
+    /**
+     * Border
+     */
+    '--local-border': theme.light.borderColor.rest,
+    '--local-border-active': theme.light.borderColor.active,
+    '--local-border-checked': theme.light.borderColor.checked,
+    '--local-border-checked-hover': theme.light.borderColor.hoveredAndChecked,
+    '--local-border-checked-invalid': theme.light.borderColor.invalidAndChecked,
+    '--local-border-disabled': theme.light.borderColor.disabled,
+    '--local-border-focus': theme.light.borderColor.focused,
+    '--local-border-hover': theme.light.borderColor.hovered,
+    '--local-border-invalid': theme.light.borderColor.invalid,
+
+    /**
+     * Tick
+     */
+    '--local-tick-active': theme.light.tickColor.activeAndChecked,
+    '--local-tick-checked': theme.light.tickColor.checked,
+    '--local-tick-disabled': theme.light.tickColor.disabledAndChecked,
+    '--local-tick-rest': 'transparent'
+  }),
+  dark: css({
+    /**
+     * Background
+     */
+    '--local-background': theme.dark.boxColor.rest,
+    '--local-background-active': theme.dark.boxColor.active,
+    '--local-background-checked': theme.dark.boxColor.checked,
+    '--local-background-checked-hover': theme.dark.boxColor.hoveredAndChecked,
+    '--local-background-disabled': theme.dark.boxColor.disabled,
+    '--local-background-hover': theme.dark.boxColor.hovered,
+
+    /**
+     * Border
+     */
+    '--local-border': theme.dark.borderColor.rest,
+    '--local-border-active': theme.dark.borderColor.active,
+    '--local-border-checked': theme.dark.borderColor.checked,
+    '--local-border-checked-hover': theme.dark.borderColor.hoveredAndChecked,
+    '--local-border-checked-invalid': theme.dark.borderColor.invalidAndChecked,
+    '--local-border-disabled': theme.dark.borderColor.disabled,
+    '--local-border-focus': theme.dark.borderColor.focused,
+    '--local-border-hover': theme.dark.borderColor.hovered,
+    '--local-border-invalid': theme.dark.borderColor.invalid,
+
+    /**
+     * Tick
+     */
+    '--local-tick-active': theme.dark.tickColor.activeAndChecked,
+    '--local-tick-checked': theme.dark.tickColor.checked,
+    '--local-tick-disabled': theme.dark.tickColor.disabledAndChecked,
+    '--local-tick-rest': 'transparent'
+  })
 };
 export default function Label(_ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
       onClick = _ref.onClick;
-  var styles = useMemo(function () {
-    return labelCSS();
-  }, []);
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
   return jsx("label", {
-    css: styles,
+    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,
     onClick: onClick

package/dist/esm/internal/required-indicator.js

@@ -1,16 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import { R500 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-var paddingLeft = "".concat(gridSize() * 0.25, "px");
-export default function RequiredIndicator(props) {
-  return jsx("span", _extends({
-    css: {
-      color: token('color.text.danger', R500),
-      paddingLeft: paddingLeft
-    }
-  }, props), "*");
+import { gridSize } from './constants';
+var requiredIndicatorStyles = css({
+  paddingLeft: gridSize * 0.25,
+  color: "var(--ds-text-danger, ".concat(R500, ")")
+});
+export default function RequiredIndicator() {
+  return jsx("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": true
+  }, "*");
 }

package/dist/esm/internal/theme.js

@@ -0,0 +1,56 @@
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+var theme = {
+  light: {
+    borderColor: {
+      rest: "var(--ds-border, ".concat(N40, ")"),
+      hovered: "var(--ds-border, ".concat(N40, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
+      active: "var(--ds-border, ".concat(B50, ")"),
+      invalid: "var(--ds-border-danger, ".concat(R300, ")"),
+      invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
+      focused: "var(--ds-border-focused, ".concat(B100, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")")
+    },
+    boxColor: {
+      rest: "var(--ds-background-input, ".concat(N10, ")"),
+      hovered: "var(--ds-surface, ".concat(N30, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
+      active: "var(--ds-background-input-pressed, ".concat(B50, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
+    },
+    tickColor: {
+      disabledAndChecked: "var(--ds-text-disabled, ".concat(N70, ")"),
+      activeAndChecked: "var(--ds-text-inverse, ".concat(B400, ")"),
+      checked: "var(--ds-text-inverse, ".concat(N10, ")")
+    }
+  },
+  dark: {
+    borderColor: {
+      rest: "var(--ds-border, ".concat(DN80, ")"),
+      hovered: "var(--ds-border, ".concat(DN200, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
+      active: "var(--ds-border, ".concat(B200, ")"),
+      invalid: "var(--ds-border-danger, ".concat(R300, ")"),
+      invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
+      focused: "var(--ds-border-focused, ".concat(B75, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")")
+    },
+    boxColor: {
+      rest: "var(--ds-background-input, ".concat(DN10, ")"),
+      hovered: "var(--ds-surface, ".concat(DN30, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
+      active: "var(--ds-background-input-pressed, ".concat(B200, ")"),
+      hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")"),
+      checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
+    },
+    tickColor: {
+      disabledAndChecked: "var(--ds-text-disabled, ".concat(DN90, ")"),
+      activeAndChecked: "var(--ds-text-inverse, ".concat(DN10, ")"),
+      checked: "var(--ds-text-inverse, ".concat(DN10, ")")
+    }
+  }
+};
+export default theme;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/checkbox",
-	"version": "12.3.4",
+	"version": "12.3.8",
 	"sideEffects": false
 }