@atlaskit/checkbox 13.3.0 → 13.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/checkbox
 
+## 13.4.0
+
+### Minor Changes
+
+-   [#103698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103698)
+    [`413b5201c8fe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/413b5201c8fe) -
+    Introduce the bounded `xcss` prop.
+
 ## 13.3.0
 
 ### Minor Changes

package/__perf__/checkbox.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { fireEvent } from '@testing-library/react';
 import {
-  InteractionTaskArgs,
-  PublicInteractionTask,
+  type InteractionTaskArgs,
+  type PublicInteractionTask,
 } from 'storybook-addon-performance';
 
 import { Checkbox } from '../src';

package/codemods/utils.tsx

@@ -1,6 +1,7 @@
-import core, {
+import type {
   API,
   ASTPath,
+  default as core,
   FileInfo,
   ImportDeclaration,
   ImportDefaultSpecifier,
@@ -10,7 +11,7 @@ import core, {
   Program,
   VariableDeclaration,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export type Nullable<T> = T | null;
 

package/dist/cjs/checkbox.js

@@ -14,7 +14,7 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("./internal");
-var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**  @jsx jsx */
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 var checkboxStyles = (0, _react2.css)({
@@ -146,6 +146,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     value = props.value,
     isRequired = props.isRequired,
     testId = props.testId,
+    xcss = props.xcss,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _useState = (0, _react.useState)(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -163,7 +164,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.3.0"
+    packageVersion: "13.4.0"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
@@ -175,6 +176,11 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, (0, _react2.jsx)("input", (0, _extends2.default)({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

package/dist/cjs/internal/label.js

@@ -59,8 +59,12 @@ function Label(_ref) {
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
-    id = _ref.id;
+    id = _ref.id,
+    xcss = _ref.xcss;
   return (0, _react.jsx)("label", {
+    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
+    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

package/dist/es2019/checkbox.js

@@ -132,6 +132,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     value,
     isRequired,
     testId,
+    xcss,
     ...rest
   } = props;
   const [isCheckedState, setIsCheckedState] = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked);
@@ -147,7 +148,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.3.0"
+    packageVersion: "13.4.0"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);
@@ -159,6 +160,11 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     label: label,
     id: rest.id ? `${rest.id}-label` : undefined,
     testId: testId && `${testId}--checkbox-label`
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, jsx("input", _extends({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

package/dist/es2019/internal/label.js

@@ -52,9 +52,13 @@ export default function Label({
   isDisabled,
   testId,
   label,
-  id
+  id,
+  xcss
 }) {
   return jsx("label", {
+    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
+    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

package/dist/esm/checkbox.js

@@ -1,7 +1,7 @@
 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"];
+var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss"];
 /**  @jsx jsx */
 import { forwardRef, memo, useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -139,6 +139,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     value = props.value,
     isRequired = props.isRequired,
     testId = props.testId,
+    xcss = props.xcss,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
@@ -156,7 +157,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "13.3.0"
+    packageVersion: "13.4.0"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);
@@ -168,6 +169,11 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     label: label,
     id: rest.id ? "".concat(rest.id, "-label") : undefined,
     testId: testId && "".concat(testId, "--checkbox-label")
+    // Currently the rule hasn't been updated to enable "allowed" dynamic pass-throughs.
+    // When there is more usage of this pattern we'll update the lint rule.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    xcss: xcss
   }, jsx("input", _extends({
     // It is necessary only for Safari. It allows to render focus styles.
     tabIndex: 0

package/dist/esm/internal/label.js

@@ -52,8 +52,12 @@ export default function Label(_ref) {
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
     label = _ref.label,
-    id = _ref.id;
+    id = _ref.id,
+    xcss = _ref.xcss;
   return jsx("label", {
+    // Because we're using Emotion local jsx namespace we have to coerce xcss prop to a string.
+    // When we're fully on Compiled its local jsx namespace accepts the output of xcss prop.
+    className: xcss,
     css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
     "data-testid": testId,
     "data-disabled": isDisabled || undefined,

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

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelTextProps } from '../types';
+import { type LabelTextProps } from '../types';
 export default function LabelText({ children }: LabelTextProps): jsx.JSX.Element;

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

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, label, id, }: LabelProps): jsx.JSX.Element;
+import { type LabelProps } from '../types';
+export default function Label({ children, isDisabled, testId, label, id, xcss, }: LabelProps): jsx.JSX.Element;

package/dist/types/types.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import type React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+import { type StrictXCSSProp } from '@atlaskit/css';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 /**
  *
@@ -70,6 +71,11 @@ export type OwnProps = {
      * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Bounded style API. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 };
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 
@@ -99,5 +105,10 @@ export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
      * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element.
      */
     onClick?: React.MouseEventHandler;
+    /**
+     * Bounded style overrides. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 }
 export {};

package/dist/types-ts4.5/internal/label-text.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelTextProps } from '../types';
+import { type LabelTextProps } from '../types';
 export default function LabelText({ children }: LabelTextProps): jsx.JSX.Element;

package/dist/types-ts4.5/internal/label.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LabelProps } from '../types';
-export default function Label({ children, isDisabled, testId, label, id, }: LabelProps): jsx.JSX.Element;
+import { type LabelProps } from '../types';
+export default function Label({ children, isDisabled, testId, label, id, xcss, }: LabelProps): jsx.JSX.Element;

package/dist/types-ts4.5/types.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import type React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+import { type StrictXCSSProp } from '@atlaskit/css';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 /**
  *
@@ -70,6 +71,11 @@ export type OwnProps = {
      * Additional information to be included in the `context` of analytics events that come from radio.
      */
     analyticsContext?: Record<string, any>;
+    /**
+     * Bounded style API. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 };
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type CheckboxProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 
@@ -99,5 +105,10 @@ export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
      * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element.
      */
     onClick?: React.MouseEventHandler;
+    /**
+     * Bounded style overrides. Defining allowed styles through this prop will be supported for future component
+     * iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
+     */
+    xcss?: StrictXCSSProp<'alignItems', never>;
 }
 export {};

package/extract-react-types/checkbox-props.tsx

@@ -1,4 +1,4 @@
-import { OwnProps } from '../src/types';
+import { type OwnProps } from '../src/types';
 
 export default function CheckboxProps(props: OwnProps) {
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/checkbox",
-  "version": "13.3.0",
+  "version": "13.4.0",
   "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/"
@@ -39,10 +39,11 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/css": "^0.1.0",
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -53,6 +54,7 @@
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",