@atlaskit/checkbox 12.6.1 → 12.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/checkbox
 
+## 12.6.3
+
+### Patch Changes
+
+- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
+## 12.6.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 12.6.1
 
 ### Patch Changes

package/dist/cjs/checkbox.js

@@ -161,7 +161,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.1"
+    packageVersion: "12.6.3"
   });
   var internalRef = (0, _react.useRef)(null);
   var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);

package/dist/cjs/internal/constants.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridSize = exports.fontFamily = void 0;
+exports.fontFamily = void 0;
 var _constants = require("@atlaskit/theme/constants");
 var fontFamily = (0, _constants.fontFamily)();
-exports.fontFamily = fontFamily;
-var gridSize = (0, _constants.gridSize)();
-exports.gridSize = gridSize;
+exports.fontFamily = fontFamily;

package/dist/cjs/version.json

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

package/dist/es2019/checkbox.js

@@ -145,7 +145,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.1"
+    packageVersion: "12.6.3"
   });
   const internalRef = useRef(null);
   const mergedRefs = mergeRefs([internalRef, ref]);

package/dist/es2019/internal/constants.js

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

package/dist/es2019/version.json

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

package/dist/esm/checkbox.js

@@ -154,7 +154,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
     analyticsData: analyticsContext,
     componentName: 'checkbox',
     packageName: "@atlaskit/checkbox",
-    packageVersion: "12.6.1"
+    packageVersion: "12.6.3"
   });
   var internalRef = useRef(null);
   var mergedRefs = mergeRefs([internalRef, ref]);

package/dist/esm/internal/constants.js

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

package/dist/esm/version.json

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

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

@@ -1,2 +1 @@
 export declare const fontFamily: string;
-export declare const gridSize: number;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * __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)
+ */
+declare const Checkbox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "disabled" | "required" | "checked" | "css">, keyof import("./types").OwnProps> & import("./types").OwnProps & import("react").RefAttributes<HTMLInputElement>>>;
+export default Checkbox;

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

@@ -0,0 +1,2 @@
+export { default, default as Checkbox } from './checkbox';
+export type { CheckboxProps } from './types';

package/dist/types-ts4.5/internal/checkbox-icon.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { Size } from '../types';
+/**
+ * __Checkbox icon__
+ *
+ * A checkbox icon is the visual representation of checkbox state,
+ * which is shown instead of the native input.
+ *
+ * @internal
+ */
+declare const CheckboxIcon: import("react").NamedExoticComponent<{
+    size: Size;
+    isIndeterminate: boolean;
+    isChecked: boolean;
+}>;
+export default CheckboxIcon;

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

@@ -0,0 +1 @@
+export declare const fontFamily: string;

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

@@ -0,0 +1,4 @@
+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/types-ts4.5/internal/label-text.d.ts

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

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

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

package/dist/types-ts4.5/internal/required-indicator.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export default function RequiredIndicator(): jsx.JSX.Element;

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

@@ -0,0 +1,55 @@
+declare const theme: {
+    light: {
+        borderColor: {
+            rest: "var(--ds-border-input)";
+            hovered: "var(--ds-border-input)";
+            disabled: "var(--ds-background-disabled)";
+            checked: "var(--ds-background-selected-bold)";
+            active: "var(--ds-border)";
+            invalid: "var(--ds-border-danger)";
+            invalidAndChecked: "var(--ds-border-danger)";
+            focused: "var(--ds-border-focused)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+        };
+        boxColor: {
+            rest: "var(--ds-background-input)";
+            hovered: "var(--ds-background-input-hovered)";
+            disabled: "var(--ds-background-disabled)";
+            active: "var(--ds-background-input-pressed)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+            checked: "var(--ds-background-selected-bold)";
+        };
+        tickColor: {
+            disabledAndChecked: "var(--ds-icon-disabled)";
+            activeAndChecked: "var(--ds-icon-inverse)";
+            checked: "var(--ds-icon-inverse)";
+        };
+    };
+    dark: {
+        borderColor: {
+            rest: "var(--ds-border-input)";
+            hovered: "var(--ds-border-input)";
+            disabled: "var(--ds-background-disabled)";
+            checked: "var(--ds-background-selected-bold)";
+            active: "var(--ds-border)";
+            invalid: "var(--ds-border-danger)";
+            invalidAndChecked: "var(--ds-border-danger)";
+            focused: "var(--ds-border-focused)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+        };
+        boxColor: {
+            rest: "var(--ds-background-input)";
+            hovered: "var(--ds-background-input-hovered)";
+            disabled: "var(--ds-background-disabled)";
+            active: "var(--ds-background-input-pressed)";
+            hoveredAndChecked: "var(--ds-background-selected-bold-hovered)";
+            checked: "var(--ds-background-selected-bold)";
+        };
+        tickColor: {
+            disabledAndChecked: "var(--ds-icon-disabled)";
+            activeAndChecked: "var(--ds-icon-inverse)";
+            checked: "var(--ds-icon-inverse)";
+        };
+    };
+};
+export default theme;

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+export type Size = 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ *
+ *
+ * CHECKBOX PROPTYPES
+ *
+ *
+ */
+export type OwnProps = {
+    /**
+     * Sets whether the checkbox begins checked.
+     */
+    defaultChecked?: boolean;
+    /**
+     * id assigned to input
+     */
+    id?: string;
+    /**
+     * Sets whether the checkbox is checked or unchecked.
+     */
+    isChecked?: boolean;
+    /**
+     * Sets whether the checkbox is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Sets whether the checkbox is indeterminate. This only affects the
+     * style and does not modify the isChecked property.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Marks the field as invalid. Changes style of unchecked component.
+     */
+    isInvalid?: boolean;
+    /**
+     * Marks the field as required & changes the label style.
+     */
+    isRequired?: boolean;
+    /**
+     * The label to be displayed to the right of the checkbox. The label is part
+     * of the clickable element to select the checkbox.
+     */
+    label?: React.ReactChild;
+    /**
+     * The name of the submitted field in a checkbox.
+     */
+    name?: string;
+    /**
+     * Function that is called whenever the state of the checkbox changes. It will
+     * be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * The value to be used in the checkbox input. This is the value that will be returned on form submission.
+     */
+    value?: number | string;
+    /**
+     * The size of the Checkbox
+     */
+    size?: Size;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     * we have generated testid based on the one you pass to the Checkbox component:
+     * - `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
+     */
+    testId?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from radio
+     */
+    analyticsContext?: Record<string, any>;
+};
+type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export type CheckboxProps = Combine<Omit<React.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>;
+export interface LabelTextProps extends React.HTMLProps<HTMLSpanElement> {
+    children: React.ReactNode;
+}
+export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
+    isDisabled?: boolean;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Click handler that is conditionally applied for Firefox
+     * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element
+     */
+    onClick?: React.MouseEventHandler;
+}
+export {};

package/package.json

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