@atlaskit/checkbox 12.3.15 → 12.3.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/checkbox
 
+## 12.3.16
+
+### Patch Changes
+
+- [`f55cf469372`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f55cf469372) - Added id property to the checkbox label for compatibility with aria-labelledby
+
 ## 12.3.15
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -174,7 +174,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.15"
+    packageVersion: "12.3.16"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -182,6 +182,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return (0, _core.jsx)(_internal.Label, {
     isDisabled: isDisabled,
+    id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, (0, _core.jsx)("input", (0, _extends2.default)({}, rest, {
     type: "checkbox",

package/dist/cjs/internal/label.js

@@ -103,15 +103,19 @@ function Label(_ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      id = _ref.id;
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("label", {
-    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
-    "data-testid": testId,
-    "data-disabled": isDisabled || undefined,
-    onClick: onClick
-  }, children);
+  return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    (0, _core.jsx)("label", {
+      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      onClick: onClick,
+      id: id
+    }, children)
+  );
 }

package/dist/cjs/version.json

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

package/dist/es2019/checkbox.js

@@ -148,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.15"
+    packageVersion: "12.3.16"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -156,6 +156,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
   const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
   }, jsx("input", _extends({}, rest, {
     type: "checkbox",

package/dist/es2019/internal/label.js

@@ -88,15 +88,19 @@ export default function Label({
   children,
   isDisabled,
   testId,
-  onClick
+  onClick,
+  id
 }) {
   const {
     mode
   } = useGlobalTheme();
-  return jsx("label", {
-    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
-    "data-testid": testId,
-    "data-disabled": isDisabled || undefined,
-    onClick: onClick
-  }, children);
+  return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    jsx("label", {
+      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      onClick: onClick,
+      id: id
+    }, children)
+  );
 }

package/dist/es2019/version.json

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

package/dist/esm/checkbox.js

@@ -159,7 +159,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.3.15"
+    packageVersion: "12.3.16"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]); // Use isChecked from the state if it is controlled
@@ -167,6 +167,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
   var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
   return jsx(Label, {
     isDisabled: isDisabled,
+    id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
   }, jsx("input", _extends({}, rest, {
     type: "checkbox",

package/dist/esm/internal/label.js

@@ -88,15 +88,19 @@ export default function Label(_ref) {
   var children = _ref.children,
       isDisabled = _ref.isDisabled,
       testId = _ref.testId,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      id = _ref.id;
 
   var _useGlobalTheme = useGlobalTheme(),
       mode = _useGlobalTheme.mode;
 
-  return jsx("label", {
-    css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
-    "data-testid": testId,
-    "data-disabled": isDisabled || undefined,
-    onClick: onClick
-  }, children);
+  return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    jsx("label", {
+      css: [labelStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
+      "data-testid": testId,
+      "data-disabled": isDisabled || undefined,
+      onClick: onClick,
+      id: id
+    }, children)
+  );
 }

package/dist/esm/version.json

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

package/dist/types/internal/label.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, onClick, }: LabelProps): JSX.Element;
+export default function Label({ children, isDisabled, testId, onClick, id, }: LabelProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "12.3.15",
+  "version": "12.3.16",
   "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/"

package/report.api.md

@@ -0,0 +1,51 @@
+## API Report File for "@atlaskit/checkbox"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { MemoExoticComponent } from 'react';
+import { default as React_2 } from 'react';
+import { RefAttributes } from 'react';
+import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+
+// @public
+const Checkbox: MemoExoticComponent<ForwardRefExoticComponent<
+  Omit<
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      'disabled' | 'required' | 'checked' | 'css'
+    >,
+    keyof OwnProps
+  > &
+    OwnProps &
+    RefAttributes<HTMLInputElement>
+>>;
+export { Checkbox };
+export default Checkbox;
+
+// @public (undocumented)
+export type CheckboxProps = Combine<
+  Omit<
+    React_2.InputHTMLAttributes<HTMLInputElement>,
+    /**
+     * 'disabled', 'required', and 'checked' are omitted so that
+     * consumers must handle state using our props.
+     *
+     * 'css' is added globally to element attributes by emotion.
+     * This was causing a bug, making the css prop required in
+     * some cases. We explicitly omit it to avoid that.
+     *
+     * Because 'className' (which the css prop uses internally)
+     * is still available, this should not break existing usage.
+     */
+    'disabled' | 'required' | 'checked' | 'css'
+  >,
+  OwnProps
+>;
+
+// (No @packageDocumentation comment for this package)
+```