@atlaskit/checkbox 12.3.13 → 12.3.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/checkbox
 
+## 12.3.14
+
+### Patch Changes
+
+- [`ff75f6c3189`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff75f6c3189) - [ux] Checkbox now uses grid layout in order to position the hidden checkbox over the area where the icon is. This improves the virtual cursor for screen readers while also meaning that modifier keys used when clicking the checkbox work."
+
 ## 12.3.13
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -24,25 +24,18 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _internal = require("./internal");
 
 var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
-// 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 */
 
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 var checkboxStyles = (0, _core.css)({
-  width: 0,
-  // Necessary to hide correctly on mobile Safari
-  height: 0,
-  // Necessary to hide correctly on mobile Safari
+  width: '100%',
+  height: '100%',
   margin: 0,
   appearance: 'none',
   border: 'none',
-  // Necessary to hide correctly on mobile Safari
+  gridArea: '1 / 1 / 2 / 2',
+  opacity: 0,
   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.
@@ -54,6 +47,8 @@ var checkboxStyles = (0, _core.css)({
     '--checkbox-tick-color': 'var(--local-tick-rest)',
     color: 'var(--checkbox-background-color)',
     fill: 'var(--checkbox-tick-color)',
+    gridArea: '1 / 1 / 2 / 2',
+    pointerEvents: 'none',
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
@@ -179,25 +174,15 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.13"
+    packageVersion: "12.3.14"
   });
   var internalRef = (0, _react.useRef)(null);
-  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
-
-  var onClickLabel = function onClickLabel(event) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey) {
-      var _internalRef$current;
-
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
-    }
-  }; // Use isChecked from the state if it is controlled
-
+  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // Use isChecked from the state if it is controlled
 
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return (0, _core.jsx)(_internal.Label, {
     isDisabled: isDisabled,
-    testId: testId && "".concat(testId, "--checkbox-label"),
-    onClick: isFirefox ? onClickLabel : undefined
+    testId: testId && "".concat(testId, "--checkbox-label")
   }, (0, _core.jsx)("input", (0, _extends2.default)({}, rest, {
     type: "checkbox",
     ref: mergedRefs,

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

@@ -7,12 +7,10 @@ exports.default = LabelText;
 
 var _core = require("@emotion/core");
 
-var _constants = require("./constants");
-
 /** @jsx jsx */
 var labelTextStyles = (0, _core.css)({
-  paddingRight: 0.5 * _constants.gridSize,
-  paddingLeft: 0.5 * _constants.gridSize
+  alignSelf: 'center',
+  gridArea: '1 / 2 / 2 / 3'
 });
 
 function LabelText(_ref) {

package/dist/cjs/internal/label.js

@@ -19,8 +19,11 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 /** @jsx jsx */
 var labelStyles = (0, _core.css)({
-  display: 'flex',
-  alignItems: 'center',
+  display: 'grid',
+  gap: '0 4px',
+  gridAutoColumns: '1fr',
+  gridAutoRows: 'min-content',
+  gridTemplateColumns: 'min-content auto',
   color: "var(--ds-text, ".concat(_colors.N900, ")"),
   cursor: 'default',
   fontFamily: _constants.fontFamily

package/dist/cjs/version.json

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

package/dist/es2019/checkbox.js

@@ -6,25 +6,18 @@ import { css, jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
-// firefox doesn't handle cmd+click/ctrl+click properly
-const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-/* eslint-disable @repo/internal/styles/no-nested-styles */
 
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 const checkboxStyles = css({
-  width: 0,
-  // Necessary to hide correctly on mobile Safari
-  height: 0,
-  // Necessary to hide correctly on mobile Safari
+  width: '100%',
+  height: '100%',
   margin: 0,
   appearance: 'none',
   border: 'none',
-  // Necessary to hide correctly on mobile Safari
+  gridArea: '1 / 1 / 2 / 2',
+  opacity: 0,
   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.
@@ -36,6 +29,8 @@ const checkboxStyles = css({
     '--checkbox-tick-color': 'var(--local-tick-rest)',
     color: 'var(--checkbox-background-color)',
     fill: 'var(--checkbox-tick-color)',
+    gridArea: '1 / 1 / 2 / 2',
+    pointerEvents: 'none',
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
@@ -153,25 +148,15 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.13"
+    packageVersion: "12.3.14"
   });
   const internalRef = useRef(null);
-  const mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
-
-  const onClickLabel = event => {
-    if (event.ctrlKey || event.metaKey || event.shiftKey) {
-      var _internalRef$current;
-
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
-    }
-  }; // Use isChecked from the state if it is controlled
-
+  const mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
 
   const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
-    testId: testId && `${testId}--checkbox-label`,
-    onClick: isFirefox ? onClickLabel : undefined
+    testId: testId && `${testId}--checkbox-label`
   }, jsx("input", _extends({}, rest, {
     type: "checkbox",
     ref: mergedRefs,

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

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { gridSize } from './constants';
 const labelTextStyles = css({
-  paddingRight: 0.5 * gridSize,
-  paddingLeft: 0.5 * gridSize
+  alignSelf: 'center',
+  gridArea: '1 / 2 / 2 / 3'
 });
 export default function LabelText({
   children

package/dist/es2019/internal/label.js

@@ -5,11 +5,14 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily } from './constants';
 import theme from './theme';
 const labelStyles = css({
-  display: 'flex',
-  alignItems: 'center',
+  display: 'grid',
+  gap: '0 4px',
+  gridAutoColumns: '1fr',
+  gridAutoRows: 'min-content',
+  gridTemplateColumns: 'min-content auto',
   color: `var(--ds-text, ${N900})`,
   cursor: 'default',
-  fontFamily
+  fontFamily: fontFamily
 });
 const disabledStyles = css({
   color: `var(--ds-text-disabled, ${N80})`,

package/dist/es2019/version.json

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

package/dist/esm/checkbox.js

@@ -9,25 +9,18 @@ import { css, jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 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 */
 
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 var checkboxStyles = css({
-  width: 0,
-  // Necessary to hide correctly on mobile Safari
-  height: 0,
-  // Necessary to hide correctly on mobile Safari
+  width: '100%',
+  height: '100%',
   margin: 0,
   appearance: 'none',
   border: 'none',
-  // Necessary to hide correctly on mobile Safari
+  gridArea: '1 / 1 / 2 / 2',
+  opacity: 0,
   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.
@@ -39,6 +32,8 @@ var checkboxStyles = css({
     '--checkbox-tick-color': 'var(--local-tick-rest)',
     color: 'var(--checkbox-background-color)',
     fill: 'var(--checkbox-tick-color)',
+    gridArea: '1 / 1 / 2 / 2',
+    pointerEvents: 'none',
     transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
     'rect:first-of-type': {
       stroke: 'var(--checkbox-border-color)',
@@ -164,25 +159,15 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.13"
+    packageVersion: "12.3.14"
   });
   var internalRef = useRef(null);
-  var mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
-
-  var onClickLabel = function onClickLabel(event) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey) {
-      var _internalRef$current;
-
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
-    }
-  }; // Use isChecked from the state if it is controlled
-
+  var mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
 
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
-    testId: testId && "".concat(testId, "--checkbox-label"),
-    onClick: isFirefox ? onClickLabel : undefined
+    testId: testId && "".concat(testId, "--checkbox-label")
   }, jsx("input", _extends({}, rest, {
     type: "checkbox",
     ref: mergedRefs,

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

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { gridSize } from './constants';
 var labelTextStyles = css({
-  paddingRight: 0.5 * gridSize,
-  paddingLeft: 0.5 * gridSize
+  alignSelf: 'center',
+  gridArea: '1 / 2 / 2 / 3'
 });
 export default function LabelText(_ref) {
   var children = _ref.children;

package/dist/esm/internal/label.js

@@ -5,8 +5,11 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily } from './constants';
 import theme from './theme';
 var labelStyles = css({
-  display: 'flex',
-  alignItems: 'center',
+  display: 'grid',
+  gap: '0 4px',
+  gridAutoColumns: '1fr',
+  gridAutoRows: 'min-content',
+  gridTemplateColumns: 'min-content auto',
   color: "var(--ds-text, ".concat(N900, ")"),
   cursor: 'default',
   fontFamily: fontFamily

package/dist/esm/version.json

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.3.13",
+  "version": "12.3.14",
   "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -18,7 +18,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Checkbox"
+      "name": "Checkbox",
+      "category": "Components"
     }
   },
   "af:exports": {