@atlaskit/rating 0.2.50 → 0.2.52

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/rating
 
+## 0.2.52
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.51
+
+### Patch Changes
+
+- [`016d3039482`](https://bitbucket.org/atlassian/atlassian-frontend/commits/016d3039482) - Updates `@emotion/core` v10 to `@emotion/react` v11. There is no expected behavior change.
+
 ## 0.2.50
 
 ### Patch Changes

package/dist/cjs/components/rating-group.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -54,13 +54,13 @@ function RatingGroup(_ref) {
     console.error("@atlaskit/rating\nDon't use \"defaultValue\" with \"value\" you're trying to mix uncontrolled and controlled modes.\nUse \"defaultValue\" or \"value\" happy days :-).\n");
   }
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": testId && "".concat(testId, "--root"),
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: inline-flex;\n        /* Because some children are inline-block we make the font-size zero to eliminate the implicit space between them. */\n        font-size: 0;\n\n        /* This implementation does some interesting tricks to keep it flowing LTR and ensuring accessibility. */\n        /* Instead of it starting in an empty state - it starts filled - and then uses the CSS sibling select \"~\" */\n        /* to then display the empty state for the star rating. */\n\n        [data-rating-icon-checked] {\n          display: inline-block;\n        }\n\n        [data-rating-icon] {\n          display: none;\n        }\n\n        label:hover\n          ~ label\n          [data-rating-icon-checked][data-rating-icon-checked],\n        input:checked ~ label [data-rating-icon-checked] {\n          display: none;\n        }\n\n        label:hover ~ label [data-rating-icon][data-rating-icon],\n        input:checked ~ label [data-rating-icon] {\n          display: inline-block;\n        }\n\n        /* When hovering reset all elements back to filled state. */\n        &:hover [data-rating-icon-checked][data-rating-icon-checked] {\n          display: inline-block;\n        }\n\n        &:hover [data-rating-icon][data-rating-icon] {\n          display: none;\n        }\n      "])))
-  }, !firstSelectionMade && (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("label", {
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: inline-flex;\n        /* Because some children are inline-block we make the font-size zero to eliminate the implicit space between them. */\n        font-size: 0;\n\n        /* This implementation does some interesting tricks to keep it flowing LTR and ensuring accessibility. */\n        /* Instead of it starting in an empty state - it starts filled - and then uses the CSS sibling select \"~\" */\n        /* to then display the empty state for the star rating. */\n\n        [data-rating-icon-checked] {\n          display: inline-block;\n        }\n\n        [data-rating-icon] {\n          display: none;\n        }\n\n        label:hover\n          ~ label\n          [data-rating-icon-checked][data-rating-icon-checked],\n        input:checked ~ label [data-rating-icon-checked] {\n          display: none;\n        }\n\n        label:hover ~ label [data-rating-icon][data-rating-icon],\n        input:checked ~ label [data-rating-icon] {\n          display: inline-block;\n        }\n\n        /* When hovering reset all elements back to filled state. */\n        &:hover [data-rating-icon-checked][data-rating-icon-checked] {\n          display: inline-block;\n        }\n\n        &:hover [data-rating-icon][data-rating-icon] {\n          display: none;\n        }\n      "])))
+  }, !firstSelectionMade && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("label", {
     css: _constants.visuallyHidden,
     htmlFor: "".concat(groupName, "--empty")
-  }), (0, _core.jsx)("input", {
+  }), (0, _react2.jsx)("input", {
     css: _constants.visuallyHidden,
     id: "".concat(groupName, "--empty"),
     "data-testid": testId && "".concat(testId, "--input-empty"),

package/dist/cjs/components/rating.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -35,7 +35,7 @@ var Rating = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var onChangeHandler = (0, _react.useCallback)(function (e) {
     onChange && onChange(e.target.checked ? value : undefined);
   }, [onChange, value]);
-  return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("label", (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("label", (0, _extends2.default)({}, props, {
     ref: ref,
     htmlFor: id,
     "data-testid": testId && "".concat(testId, "--label"),
@@ -43,25 +43,25 @@ var Rating = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       transition: "transform ".concat(_motion.smallDurationMs, "ms ").concat(_motion.easeInOut),
       transform: isChecked ? 'scale(1.2)' : undefined
     }
-  }), (0, _core.jsx)(_tooltip.default, {
+  }), (0, _react2.jsx)(_tooltip.default, {
     testId: testId && "".concat(testId, "--tooltip"),
     content: label,
     delay: 10
-  }, (0, _core.jsx)("div", null, (0, _core.jsx)("span", {
+  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)("span", {
     css: _constants.visuallyHidden
-  }, label), (0, _core.jsx)("span", {
+  }, label), (0, _react2.jsx)("span", {
     "aria-hidden": "true",
     "data-rating-icon": true,
     "data-testid": testId && "".concat(testId, "--icon-container")
   }, render({
     isChecked: false
-  })), (0, _core.jsx)("span", {
+  })), (0, _react2.jsx)("span", {
     "aria-hidden": "true",
     "data-rating-icon-checked": true,
     "data-testid": testId && "".concat(testId, "--icon-checked-container")
   }, render({
     isChecked: true
-  }))))), (0, _core.jsx)("input", {
+  }))))), (0, _react2.jsx)("input", {
     id: id,
     css: _constants.visuallyHidden,
     onChange: onChangeHandler,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/rating",
-	"version": "0.2.50",
+	"version": "0.2.52",
 	"sideEffects": false
 }

package/dist/es2019/components/rating-group.js

@@ -2,7 +2,7 @@
 
 /** @jsx jsx */
 import { Children, cloneElement, Fragment, useState } from 'react';
-import { css, jsx } from '@emotion/core'; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import { visuallyHidden } from '@atlaskit/theme/constants';

package/dist/es2019/components/rating.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, Fragment, useCallback } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { easeInOut, smallDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/rating",
-	"version": "0.2.50",
+	"version": "0.2.52",
 	"sideEffects": false
 }

package/dist/esm/components/rating-group.js

@@ -7,7 +7,7 @@ var _templateObject;
 
 /** @jsx jsx */
 import { Children, cloneElement, Fragment, useState } from 'react';
-import { css, jsx } from '@emotion/core'; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import { visuallyHidden } from '@atlaskit/theme/constants';

package/dist/esm/components/rating.js

@@ -6,7 +6,7 @@ var _excluded = ["isChecked", "name", "testId", "label", "id", "value", "onChang
 
 /** @jsx jsx */
 import { forwardRef, Fragment, useCallback } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { easeInOut, smallDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/rating",
-	"version": "0.2.50",
+	"version": "0.2.52",
 	"sideEffects": false
 }

package/dist/types/components/rating-group.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 export interface RatingGroupProps {
     /**
      * Callback that is called everytime the rating changes.
@@ -46,4 +47,4 @@ export interface RatingGroupProps {
      */
     children: JSX.Element | JSX.Element[];
 }
-export default function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): JSX.Element;
+export default function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/rating",
-  "version": "0.2.50",
+  "version": "0.2.52",
   "description": "An accessible rating component that can be heavily customized.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -34,10 +26,10 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "0.10.35",
+    "@atlaskit/tokens": "0.11.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",

package/dist/types-ts4.0/components/rating-group.d.ts

@@ -1,49 +0,0 @@
-/// <reference types="react" />
-export interface RatingGroupProps {
-    /**
-     * Callback that is called everytime the rating changes.
-     * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
-     */
-    onChange?: (value?: string) => void;
-    /**
-     * Group name for all of the child rating items.
-     * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
-  
-     * Defaults to `"ak--rating-group"`.
-     */
-    groupName?: string;
-    /**
-     * Will set the default checked value for a child radio rating item.
-     * Use when wanting to use this in an [uncontrolled way](https://reactjs.org/docs/uncontrolled-components.html).
-  
-     * Do not use with `value`.
-     */
-    defaultValue?: string;
-    /**
-     * Value that is used to check a child rating item.
-     * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
-  
-     * Do not use with `defaultValue`.
-     */
-    value?: string;
-    /**
-     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.
-  
-     Will set these elements:
-  
-     * The root container `"{testId}--root"`
-     * The empty input `"{testId}--input-empty"` which is used to signify "nothing is selected yet".
-     */
-    testId?: string;
-    /**
-     * Pass in child rating items.
-     * This component expects the markup to be defined in a particular way,
-     * so if you pass extra wrapping markup expect undefined behaviour.
-  
-     * You can have any amount of child rating items.
-     */
-    children: JSX.Element | JSX.Element[];
-}
-export default function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): JSX.Element;

package/dist/types-ts4.0/components/rating.d.ts

@@ -1,68 +0,0 @@
-/// <reference types="react" />
-export declare type RatingRender = (props: {
-    isChecked: boolean;
-}) => React.ReactNode;
-export interface RatingProps {
-    /**
-     * Label for the rating item.
-     * This will be read by screen readers as well as used in the tooltip when hovering over the item.
-     */
-    label: string;
-    /**
-     * This is passed to the radio button input.
-  
-     * When using this with the `<Rating />` component this is handled for you.
-     */
-    name?: string;
-    /**
-     * Sets checked state on the rating item.
-  
-     * When using this with the `<Rating />` component this is handled for you.
-     */
-    isChecked?: 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.
-  
-     Will set two elements:
-  
-     * The label as `"{testId}--label"`
-     * The radio button as `"{testId}--input"`
-     * The unchecked icon container `"{testId}--icon-container"`
-     * The checked icon container `"{testId}--icon-checked-container"`
-  
-     When using this with the `<Rating />` component this will inherit its `testId` as `"{testId}--{index}--{element}"`,
-     for example label would be `"{testId}--{index}--label"`.
-     */
-    testId?: string;
-    /**
-     * Value of the rating item.
-     * This will be passed back in the `onChange()` handler when checked.
-     */
-    value: string;
-    /**
-     * Id that is passed to both the label and the radio button element.
-     * This is needed to declare their relationship.
-  
-     * When using this with the `<Rating />` component this is handled for you.
-     */
-    id?: string;
-    /**
-     * Handler that is called back whenever the radio button element changes its checked state.
-     * When checked will be passed the `value` -
-     * when unchecked will be passed `undefined`.
-  
-     * When using this with the `<Rating />` component this is handled for you.
-     */
-    onChange?: (value?: string) => void;
-}
-export interface InternalRatingProps extends RatingProps {
-    /**
-     * Render callback that should return a ReactNode.
-     * Is passed an argument which is an object with one property `isChecked`.
-     */
-    render: RatingRender;
-}
-declare const Rating: import("react").ForwardRefExoticComponent<InternalRatingProps & import("react").RefAttributes<HTMLLabelElement>>;
-export default Rating;

package/dist/types-ts4.0/components/star.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { RatingProps } from './rating';
-export interface StarProps extends RatingProps {
-    /**
-     * Size of the star icon.
-  
-     * Defaults to `"large"`.
-     */
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    /**
-     * Color of the star icon,
-     * when wanting to customize the color please ensure you use `colors` from `@atlaskit/theme`.
-  
-     * Defaults to `colors.Y200`.
-     */
-    color?: string;
-}
-declare const Star: React.ForwardRefExoticComponent<StarProps & React.RefAttributes<HTMLLabelElement>>;
-export default Star;

package/dist/types-ts4.0/extract-react-types/rating.d.ts

@@ -1,5 +0,0 @@
-import { InternalRatingProps } from '../components/rating';
-/**
- * This gets around extract-react-types not supporting forwardRef.
- */
-export default function (_: InternalRatingProps): void;

package/dist/types-ts4.0/extract-react-types/star.d.ts

@@ -1,5 +0,0 @@
-import { StarProps } from '../components/star';
-/**
- * This gets around extract-react-types not supporting forwardRef.
- */
-export default function (_: StarProps): void;

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

@@ -1,6 +0,0 @@
-export { default as RatingGroup } from './components/rating-group';
-export type { RatingGroupProps } from './components/rating-group';
-export { default as Star } from './components/star';
-export type { StarProps } from './components/star';
-export { default as Rating } from './components/rating';
-export type { InternalRatingProps, RatingProps, RatingRender, } from './components/rating';