@zendeskgarden/react-theming 9.15.4 → 9.15.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/esm/utils/arrowStyles.js +5 -4
  2. package/dist/index.cjs.js +5 -4
  3. package/package.json +2 -2
package/dist/esm/utils/arrowStyles.js CHANGED
@@ -19,20 +19,21 @@ const positionStyles = (position, size, inset, shift) => {
19
19
  const marginPx = `${margin}px`;
20
20
  const placementPx = `${placement}px`;
21
21
  const offsetPx = `${size + shift}px`;
22
+ const centeredOffset = shift === 0 ? '50%' : `calc(50% + ${shift}px)`;
22
23
  let positionCss;
23
24
  let transform;
24
25
  if (position.startsWith('top')) {
25
26
  transform = 'rotate(-135deg)';
26
- positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && offsetPx, position === 'top' ? '50%' : position === 'top-left' && offsetPx, position === 'top' && marginPx);
27
+ positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && offsetPx, position === 'top' ? centeredOffset : position === 'top-left' && offsetPx, position === 'top' && marginPx);
27
28
  } else if (position.startsWith('right')) {
28
29
  transform = 'rotate(-45deg)';
29
- positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && offsetPx, placementPx, position === 'right-bottom' && offsetPx, position === 'right' && marginPx);
30
+ positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? centeredOffset : position === 'right-top' && offsetPx, placementPx, position === 'right-bottom' && offsetPx, position === 'right' && marginPx);
30
31
  } else if (position.startsWith('bottom')) {
31
32
  transform = 'rotate(45deg)';
32
- positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && offsetPx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && offsetPx, position === 'bottom' && marginPx);
33
+ positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && offsetPx, placementPx, position === 'bottom' ? centeredOffset : position === 'bottom-left' && offsetPx, position === 'bottom' && marginPx);
33
34
  } else if (position.startsWith('left')) {
34
35
  transform = 'rotate(135deg)';
35
- positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && offsetPx, offsetPx, placementPx, position === 'left' && marginPx);
36
+ positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? centeredOffset : position === 'left-top' && offsetPx, offsetPx, placementPx, position === 'left' && marginPx);
36
37
  }
37
38
  return css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
38
39
  };
package/dist/index.cjs.js CHANGED
@@ -1379,20 +1379,21 @@ const positionStyles = (position, size, inset, shift) => {
1379
1379
  const marginPx = `${margin}px`;
1380
1380
  const placementPx = `${placement}px`;
1381
1381
  const offsetPx = `${size + shift}px`;
1382
+ const centeredOffset = shift === 0 ? '50%' : `calc(50% + ${shift}px)`;
1382
1383
  let positionCss;
1383
1384
  let transform;
1384
1385
  if (position.startsWith('top')) {
1385
1386
  transform = 'rotate(-135deg)';
1386
- positionCss = styled.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && offsetPx, position === 'top' ? '50%' : position === 'top-left' && offsetPx, position === 'top' && marginPx);
1387
+ positionCss = styled.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && offsetPx, position === 'top' ? centeredOffset : position === 'top-left' && offsetPx, position === 'top' && marginPx);
1387
1388
  } else if (position.startsWith('right')) {
1388
1389
  transform = 'rotate(-45deg)';
1389
- positionCss = styled.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && offsetPx, placementPx, position === 'right-bottom' && offsetPx, position === 'right' && marginPx);
1390
+ positionCss = styled.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? centeredOffset : position === 'right-top' && offsetPx, placementPx, position === 'right-bottom' && offsetPx, position === 'right' && marginPx);
1390
1391
  } else if (position.startsWith('bottom')) {
1391
1392
  transform = 'rotate(45deg)';
1392
- positionCss = styled.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && offsetPx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && offsetPx, position === 'bottom' && marginPx);
1393
+ positionCss = styled.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && offsetPx, placementPx, position === 'bottom' ? centeredOffset : position === 'bottom-left' && offsetPx, position === 'bottom' && marginPx);
1393
1394
  } else if (position.startsWith('left')) {
1394
1395
  transform = 'rotate(135deg)';
1395
- positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && offsetPx, offsetPx, placementPx, position === 'left' && marginPx);
1396
+ positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? centeredOffset : position === 'left-top' && offsetPx, offsetPx, placementPx, position === 'left' && marginPx);
1396
1397
  }
1397
1398
  return styled.css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
1398
1399
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-theming",
3
- "version": "9.15.4",
3
+ "version": "9.15.6",
4
4
  "description": "Theming utilities and components within the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "90b55c46c1ba44ea9b198e7434a1daeb976824a6"
50
+ "gitHead": "3f69e9346e936577e5551ca06e5f5d67a62ba1b8"
51
51
  }