@atlaskit/rating 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/rating
 
+## 0.3.11
+
+### Patch Changes
+
+- [`f88d0921a57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f88d0921a57) - Fix deprecated import from @atlaskit/theme for "Dev Portal"
+
+## 0.3.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.3.9
 
 ### Patch Changes

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

@@ -9,12 +9,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/use-visually-hidden */
 /** @jsx jsx */
-// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function RatingGroup(_ref) {
   var _ref$groupName = _ref.groupName,
     groupName = _ref$groupName === void 0 ? 'ak--rating-group' : _ref$groupName,
@@ -45,12 +43,12 @@ function RatingGroup(_ref) {
   }
   return (0, _react2.jsx)("div", {
     "data-testid": testId && "".concat(testId, "--root"),
-    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      "])))
+    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        // By default, filled in icon is shown\n        [data-rating-icon-checked] {\n          display: inline-block;\n        }\n\n        // By default, empty icon is NOT shown\n        [data-rating-icon] {\n          display: none;\n        }\n\n        label:hover\n          ~ label\n          [data-rating-icon-checked][data-rating-icon-checked],\n        [data-testid='input-container-checked']\n          ~ label\n          [data-rating-icon-checked] {\n          display: none;\n        }\n\n        label:hover ~ label [data-rating-icon][data-rating-icon],\n        [data-testid='input-container-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, _react2.jsx)("input", {
-    css: _constants.visuallyHidden,
+  }), (0, _react2.jsx)(_visuallyHidden.default, {
+    testId: "input-container".concat(actualValue === undefined ? '-checked' : '')
+  }, (0, _react2.jsx)("input", {
     id: "".concat(groupName, "--empty"),
     "data-testid": testId && "".concat(testId, "--input-empty"),
     type: "radio",
@@ -60,7 +58,7 @@ function RatingGroup(_ref) {
       return setValue(undefined);
     },
     value: undefined
-  })), _react.Children.map(children, function (child, index) {
+  }))), _react.Children.map(children, function (child, index) {
     return /*#__PURE__*/(0, _react.cloneElement)(child, {
       onChange: onChangeHandler,
       name: groupName,

package/dist/cjs/components/rating.js

@@ -10,13 +10,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["isChecked", "name", "testId", "label", "id", "value", "onChange", "render"];
 /* eslint-disable @atlaskit/design-system/use-visually-hidden */
 /** @jsx jsx */
-// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var Rating = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isChecked = _ref.isChecked,
     name = _ref.name,
@@ -42,9 +40,7 @@ var Rating = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     testId: testId && "".concat(testId, "--tooltip"),
     content: label,
     delay: 10
-  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)("span", {
-    css: _constants.visuallyHidden
-  }, label), (0, _react2.jsx)("span", {
+  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_visuallyHidden.default, null, label), (0, _react2.jsx)("span", {
     "aria-hidden": "true",
     "data-rating-icon": true,
     "data-testid": testId && "".concat(testId, "--icon-container")
@@ -56,16 +52,17 @@ var Rating = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": testId && "".concat(testId, "--icon-checked-container")
   }, render({
     isChecked: true
-  }))))), (0, _react2.jsx)("input", {
+  }))))), (0, _react2.jsx)(_visuallyHidden.default, {
+    testId: "input-container".concat(!!isChecked ? '-checked' : '')
+  }, (0, _react2.jsx)("input", {
     id: id,
-    css: _constants.visuallyHidden,
     onChange: onChangeHandler,
     checked: !!isChecked,
     value: value,
     name: name,
     "data-testid": testId && "".concat(testId, "--input"),
     type: "radio"
-  }));
+  })));
 });
 var _default = Rating;
 exports.default = _default;

package/dist/cjs/version.json

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

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

@@ -2,10 +2,7 @@
 /** @jsx jsx */
 import { Children, cloneElement, Fragment, useState } from 'react';
 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';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 export default function RatingGroup({
   groupName = 'ak--rating-group',
   onChange,
@@ -42,10 +39,12 @@ Use "defaultValue" or "value" happy days :-).
         /* Instead of it starting in an empty state - it starts filled - and then uses the CSS sibling select "~" */
         /* to then display the empty state for the star rating. */
 
+        // By default, filled in icon is shown
         [data-rating-icon-checked] {
           display: inline-block;
         }
 
+        // By default, empty icon is NOT shown
         [data-rating-icon] {
           display: none;
         }
@@ -53,12 +52,14 @@ Use "defaultValue" or "value" happy days :-).
         label:hover
           ~ label
           [data-rating-icon-checked][data-rating-icon-checked],
-        input:checked ~ label [data-rating-icon-checked] {
+        [data-testid='input-container-checked']
+          ~ label
+          [data-rating-icon-checked] {
           display: none;
         }
 
         label:hover ~ label [data-rating-icon][data-rating-icon],
-        input:checked ~ label [data-rating-icon] {
+        [data-testid='input-container-checked'] ~ label [data-rating-icon] {
           display: inline-block;
         }
 
@@ -72,10 +73,10 @@ Use "defaultValue" or "value" happy days :-).
         }
       `
   }, !firstSelectionMade && jsx(Fragment, null, jsx("label", {
-    css: visuallyHidden,
     htmlFor: `${groupName}--empty`
-  }), jsx("input", {
-    css: visuallyHidden,
+  }), jsx(VisuallyHidden, {
+    testId: `input-container${actualValue === undefined ? '-checked' : ''}`
+  }, jsx("input", {
     id: `${groupName}--empty`,
     "data-testid": testId && `${testId}--input-empty`,
     type: "radio",
@@ -83,7 +84,7 @@ Use "defaultValue" or "value" happy days :-).
     checked: actualValue === undefined,
     onChange: () => setValue(undefined),
     value: undefined
-  })), Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+  }))), Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
     onChange: onChangeHandler,
     name: groupName,
     id: `${groupName}--${index}`,

package/dist/es2019/components/rating.js

@@ -4,10 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, Fragment, useCallback } from 'react';
 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
-import { visuallyHidden } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const Rating = /*#__PURE__*/forwardRef(({
   isChecked,
   name,
@@ -34,9 +32,7 @@ const Rating = /*#__PURE__*/forwardRef(({
     testId: testId && `${testId}--tooltip`,
     content: label,
     delay: 10
-  }, jsx("div", null, jsx("span", {
-    css: visuallyHidden
-  }, label), jsx("span", {
+  }, jsx("div", null, jsx(VisuallyHidden, null, label), jsx("span", {
     "aria-hidden": "true",
     "data-rating-icon": true,
     "data-testid": testId && `${testId}--icon-container`
@@ -48,15 +44,16 @@ const Rating = /*#__PURE__*/forwardRef(({
     "data-testid": testId && `${testId}--icon-checked-container`
   }, render({
     isChecked: true
-  }))))), jsx("input", {
+  }))))), jsx(VisuallyHidden, {
+    testId: `input-container${!!isChecked ? '-checked' : ''}`
+  }, jsx("input", {
     id: id,
-    css: visuallyHidden,
     onChange: onChangeHandler,
     checked: !!isChecked,
     value: value,
     name: name,
     "data-testid": testId && `${testId}--input`,
     type: "radio"
-  }));
+  })));
 });
 export default Rating;

package/dist/es2019/version.json

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

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

@@ -5,10 +5,7 @@ var _templateObject;
 /** @jsx jsx */
 import { Children, cloneElement, Fragment, useState } from 'react';
 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';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 export default function RatingGroup(_ref) {
   var _ref$groupName = _ref.groupName,
     groupName = _ref$groupName === void 0 ? 'ak--rating-group' : _ref$groupName,
@@ -39,12 +36,12 @@ export default function RatingGroup(_ref) {
   }
   return jsx("div", {
     "data-testid": testId && "".concat(testId, "--root"),
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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      "])))
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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        // By default, filled in icon is shown\n        [data-rating-icon-checked] {\n          display: inline-block;\n        }\n\n        // By default, empty icon is NOT shown\n        [data-rating-icon] {\n          display: none;\n        }\n\n        label:hover\n          ~ label\n          [data-rating-icon-checked][data-rating-icon-checked],\n        [data-testid='input-container-checked']\n          ~ label\n          [data-rating-icon-checked] {\n          display: none;\n        }\n\n        label:hover ~ label [data-rating-icon][data-rating-icon],\n        [data-testid='input-container-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 && jsx(Fragment, null, jsx("label", {
-    css: visuallyHidden,
     htmlFor: "".concat(groupName, "--empty")
-  }), jsx("input", {
-    css: visuallyHidden,
+  }), jsx(VisuallyHidden, {
+    testId: "input-container".concat(actualValue === undefined ? '-checked' : '')
+  }, jsx("input", {
     id: "".concat(groupName, "--empty"),
     "data-testid": testId && "".concat(testId, "--input-empty"),
     type: "radio",
@@ -54,7 +51,7 @@ export default function RatingGroup(_ref) {
       return setValue(undefined);
     },
     value: undefined
-  })), Children.map(children, function (child, index) {
+  }))), Children.map(children, function (child, index) {
     return /*#__PURE__*/cloneElement(child, {
       onChange: onChangeHandler,
       name: groupName,

package/dist/esm/components/rating.js

@@ -6,10 +6,8 @@ var _excluded = ["isChecked", "name", "testId", "label", "id", "value", "onChang
 import { forwardRef, Fragment, useCallback } from 'react';
 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
-import { visuallyHidden } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var Rating = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isChecked = _ref.isChecked,
     name = _ref.name,
@@ -35,9 +33,7 @@ var Rating = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId: testId && "".concat(testId, "--tooltip"),
     content: label,
     delay: 10
-  }, jsx("div", null, jsx("span", {
-    css: visuallyHidden
-  }, label), jsx("span", {
+  }, jsx("div", null, jsx(VisuallyHidden, null, label), jsx("span", {
     "aria-hidden": "true",
     "data-rating-icon": true,
     "data-testid": testId && "".concat(testId, "--icon-container")
@@ -49,15 +45,16 @@ var Rating = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": testId && "".concat(testId, "--icon-checked-container")
   }, render({
     isChecked: true
-  }))))), jsx("input", {
+  }))))), jsx(VisuallyHidden, {
+    testId: "input-container".concat(!!isChecked ? '-checked' : '')
+  }, jsx("input", {
     id: id,
-    css: visuallyHidden,
     onChange: onChangeHandler,
     checked: !!isChecked,
     value: value,
     name: name,
     "data-testid": testId && "".concat(testId, "--input"),
     type: "radio"
-  }));
+  })));
 });
 export default Rating;

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/rating",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "An accessible rating component that can be heavily customized.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
   "atlassian": {
     "team": "Dev Portal",
     "deprecatedAutoEntryPoints": true,
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Rating"
     }
@@ -34,8 +34,9 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "1.5.1",
+    "@atlaskit/tokens": "1.5.2",
     "@atlaskit/tooltip": "^17.8.0",
+    "@atlaskit/visually-hidden": "^1.2.3",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,62 @@
+## API Report File for "@atlaskit/rating"
+
+> 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 { jsx } from '@emotion/react';
+import { default as React_2 } from 'react';
+import { RefAttributes } from 'react';
+
+// @public (undocumented)
+export interface InternalRatingProps extends RatingProps {
+    render: RatingRender;
+}
+
+// @public (undocumented)
+export const Rating: ForwardRefExoticComponent<InternalRatingProps & RefAttributes<HTMLLabelElement>>;
+
+// @public (undocumented)
+export function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): jsx.JSX.Element;
+
+// @public (undocumented)
+export interface RatingGroupProps {
+    children: JSX.Element | JSX.Element[];
+    defaultValue?: string;
+    groupName?: string;
+    onChange?: (value?: string) => void;
+    testId?: string;
+    value?: string;
+}
+
+// @public (undocumented)
+export interface RatingProps {
+    id?: string;
+    isChecked?: boolean;
+    label: string;
+    name?: string;
+    onChange?: (value?: string) => void;
+    testId?: string;
+    value: string;
+}
+
+// @public (undocumented)
+export type RatingRender = (props: {
+    isChecked: boolean;
+}) => React.ReactNode;
+
+// @public (undocumented)
+export const Star: React_2.ForwardRefExoticComponent<StarProps & React_2.RefAttributes<HTMLLabelElement>>;
+
+// @public (undocumented)
+export interface StarProps extends RatingProps {
+    color?: string;
+    size?: 'large' | 'medium' | 'small' | 'xlarge';
+}
+
+// (No @packageDocumentation comment for this package)
+
+```