@shopgate/pwa-ui-shared 7.32.0-beta.3 → 7.32.0-beta.5

package/RatingStars/index.js

@@ -43,6 +43,11 @@ const useStyles = makeStyles()(theme => ({
     position: 'absolute',
     left: 0,
     top: 0,
+    // Purely decorative overlay: let every pointer event fall through to the
+    // empty-star buttons underneath, which span all slots and handle selection.
+    // Without this, the invisible spacers/half-stars cover the higher-index
+    // buttons and swallow clicks in selectable mode.
+    pointerEvents: 'none',
     color: theme.components.ratingStars.filled,
     display: 'inline-flex',
     alignItems: 'center',
@@ -107,10 +112,10 @@ const RatingStars = ({
     const starProps = {
       className: iconClassName,
       key: numStars + pos,
+      // Decorative duplicate of the underlying empty-star button; hidden from
+      // assistive tech and non-interactive (the empty layer handles clicks).
       ...(isSelectable && {
-        'aria-hidden': true,
-        role: 'button',
-        onClick: e => handleSelection(e, pos)
+        'aria-hidden': true
       })
     };
     return /*#__PURE__*/_jsx("div", {
@@ -124,7 +129,13 @@ const RatingStars = ({
     children: /*#__PURE__*/_jsx(StarHalfIcon, {
       size: size
     })
-  }, i + numFullStars))), [iconClassName, numFullStars, numHalfStars, size, handleSelection, isSelectable]);
+  }, i + numFullStars)), times(Math.max(numStars - numFullStars - numHalfStars, 0), i => /*#__PURE__*/_jsx("div", {
+    className: iconClassName,
+    style: {
+      width: size
+    },
+    "aria-hidden": true
+  }, `placeholder-${i}`))), [iconClassName, numFullStars, numHalfStars, size, isSelectable]);
   return /*#__PURE__*/_jsxs("div", {
     role: isSelectable ? undefined : 'img',
     className: rootClassName,

package/RatingStars/spec.js

@@ -49,34 +49,37 @@ describe('<RatingStars />', () => {
     expect(wrapper.find(StarHalfIcon).length).toBe(1);
     expect(wrapper).toMatchSnapshot();
   });
-  it('should call onSelection callback when component is selectable', () => {
-    const spy = jest.fn();
+  it('should call onSelection with the clicked rating in selectable mode', () => {
+    const selections = [];
     const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
-      value: 100,
+      value: 20,
       isSelectable: true,
       onSelection: e => {
+        selections.push(e.target.value);
         wrapper.setProps({
           value: e.target.value
         });
-        spy();
       }
     }), mockRenderOptions);
-    // Click on 1 filled star.
-    wrapper.find('[role="button"]').at(5).simulate('click', {
-      target: {
-        value: 10
-      }
+
+    // Only the empty-star layer is interactive: one button per position, always five.
+    // The decorative filled overlay is pointer-transparent and carries no buttons.
+    expect(wrapper.find('[role="button"]').length).toBe(numEmptyStars);
+
+    // Regression: at a low rating the higher positions used to be covered by the
+    // filled layer's invisible placeholders, which swallowed the click. Clicking the
+    // 5th star must still raise the rating to the full 5 stars.
+    wrapper.find('[role="button"]').at(4).simulate('click', {
+      target: {}
     });
-    expect(spy.mock.calls.length).toBe(1);
-    expect(wrapper.find('[role="button"]').length).toBe(6);
-    // Click on 4th empty star
-    wrapper.find('[role="button"]').at(3).simulate('click', {
-      target: {
-        value: 80
-      }
+    expect(selections).toEqual([100]);
+
+    // The interactive layer is unaffected by the rating; clicking the 1st star lowers it.
+    expect(wrapper.find('[role="button"]').length).toBe(numEmptyStars);
+    wrapper.find('[role="button"]').at(0).simulate('click', {
+      target: {}
     });
-    expect(wrapper.find('[role="button"]').length).toBe(9);
-    expect(spy.mock.calls.length).toBe(2);
+    expect(selections).toEqual([100, 20]);
   });
   it('should NOT call onSelection callback when component is NOT selectable', () => {
     const spy = jest.fn();

package/TaxDisclaimer/index.js

@@ -8,7 +8,6 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   text: {
-    background: theme.palette.background.surface,
     padding: theme.spacing(2.5, 2)
   }
 }));

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.32.0-beta.3",
+  "version": "7.32.0-beta.5",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.3",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.3"
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.5",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.5"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.0-beta.3",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.3",
+    "@shopgate/pwa-common": "7.32.0-beta.5",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.5",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },