@atlaskit/rating 0.3.28 → 0.3.29

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

@@ -1,9 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 /* eslint-disable @atlaskit/design-system/use-visually-hidden */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { Children, cloneElement, Fragment, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 export default function RatingGroup(_ref) {
@@ -35,8 +38,37 @@ export default 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 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        // 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      "])))
+    "data-testid": testId && "".concat(testId, "--root")
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: css({
+      display: 'inline-flex',
+      fontSize: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '[data-rating-icon-checked]': {
+        display: 'inline-block'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '[data-rating-icon]': {
+        display: 'none'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      "label:hover ~ label [data-rating-icon-checked][data-rating-icon-checked], [data-testid='input-container-checked'] ~ label [data-rating-icon-checked]": {
+        display: 'none'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      "label:hover ~ label [data-rating-icon][data-rating-icon], [data-testid='input-container-checked'] ~ label [data-rating-icon]": {
+        display: 'inline-block'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '&:hover [data-rating-icon-checked][data-rating-icon-checked]': {
+        display: 'inline-block'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '&:hover [data-rating-icon][data-rating-icon]': {
+        display: 'none'
+      }
+    })
   }, !firstSelectionMade && jsx(Fragment, null, jsx("label", {
     htmlFor: "".concat(groupName, "--empty")
   }), jsx(VisuallyHidden, {

package/dist/esm/components/rating.js

@@ -2,8 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isChecked", "name", "testId", "label", "id", "value", "onChange", "render"];
 /* eslint-disable @atlaskit/design-system/use-visually-hidden */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { forwardRef, Fragment, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { easeInOut, smallDurationMs } from '@atlaskit/motion';
 import Tooltip from '@atlaskit/tooltip';

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

@@ -7,44 +7,44 @@ export interface RatingGroupProps {
      */
     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"`.
-     */
+   * 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`.
-     */
+   * 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 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".
-     */
+   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.
-     */
+   * 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.JSX.Element;

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

@@ -9,32 +9,32 @@ export interface RatingProps {
      */
     label: string;
     /**
-     * This is passed to the radio button input.
-  
-     * When using this with the `<Rating />` component this is handled for you.
-     */
+   * 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.
-     */
+   * 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"`.
-     */
+   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.
@@ -42,19 +42,19 @@ export interface RatingProps {
      */
     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 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.
-     */
+   * 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 {

package/dist/types/components/star.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
-import { RatingProps } from './rating';
+import { type RatingProps } from './rating';
 export interface StarProps extends RatingProps {
     /**
-     * Size of the star icon.
-  
-     * Defaults to `"large"`.
-     */
+   * 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 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>>;

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

@@ -1,4 +1,4 @@
-import { InternalRatingProps } from '../components/rating';
+import { type InternalRatingProps } from '../components/rating';
 /**
  * This gets around extract-react-types not supporting forwardRef.
  */

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

@@ -1,4 +1,4 @@
-import { StarProps } from '../components/star';
+import { type StarProps } from '../components/star';
 /**
  * This gets around extract-react-types not supporting forwardRef.
  */

package/dist/types/index.d.ts

@@ -3,4 +3,4 @@ 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';
+export type { InternalRatingProps, RatingProps, RatingRender } from './components/rating';

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

@@ -7,44 +7,44 @@ export interface RatingGroupProps {
      */
     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"`.
-     */
+   * 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`.
-     */
+   * 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 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".
-     */
+   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.
-     */
+   * 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.JSX.Element;

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

@@ -9,32 +9,32 @@ export interface RatingProps {
      */
     label: string;
     /**
-     * This is passed to the radio button input.
-  
-     * When using this with the `<Rating />` component this is handled for you.
-     */
+   * 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.
-     */
+   * 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"`.
-     */
+   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.
@@ -42,19 +42,19 @@ export interface RatingProps {
      */
     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 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.
-     */
+   * 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 {

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

@@ -1,18 +1,18 @@
 import React from 'react';
-import { RatingProps } from './rating';
+import { type RatingProps } from './rating';
 export interface StarProps extends RatingProps {
     /**
-     * Size of the star icon.
-  
-     * Defaults to `"large"`.
-     */
+   * 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 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>>;

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

@@ -1,4 +1,4 @@
-import { InternalRatingProps } from '../components/rating';
+import { type InternalRatingProps } from '../components/rating';
 /**
  * This gets around extract-react-types not supporting forwardRef.
  */

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

@@ -1,4 +1,4 @@
-import { StarProps } from '../components/star';
+import { type StarProps } from '../components/star';
 /**
  * This gets around extract-react-types not supporting forwardRef.
  */

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

@@ -3,4 +3,4 @@ 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';
+export type { InternalRatingProps, RatingProps, RatingRender } from './components/rating';