@shopgate/pwa-ui-ios 7.33.3 → 7.34.0-beta.2

package/AppBar/components/Icon/index.js

@@ -15,7 +15,12 @@ const useStyles = makeStyles()(theme => ({
     padding: 0,
     position: 'relative',
     width: 44,
-    zIndex: 1
+    zIndex: 1,
+    '&:focus-visible:not([data-silent-focus])': {
+      outline: '2px solid currentColor',
+      outlineOffset: -6,
+      borderRadius: '50%'
+    }
   }
 }));
 
@@ -26,32 +31,48 @@ const useStyles = makeStyles()(theme => ({
  */
 const AppBarIcon = props => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
   const {
     background,
     badge: Badge,
+    className,
     color,
     icon: Icon,
     onClick,
     testId,
     'aria-hidden': ariaHidden,
     'aria-label': ariaLabel,
-    ...iconProps
+    ...rest
   } = props;
+  const entries = Object.entries(rest);
+  const dataAttributes = Object.fromEntries(entries.filter(([name]) => name.startsWith('data-')));
+  const iconProps = Object.fromEntries(entries.filter(([name]) => !name.startsWith('data-')));
+
+  /**
+   * @param {KeyboardEvent} event The key event.
+   */
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick(event);
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
-    onKeyDown: onClick,
+    onKeyDown: handleKeyDown,
     tabIndex: 0,
     role: "button",
     "aria-hidden": ariaHidden,
     "aria-label": ariaLabel,
-    className: classes.root,
+    className: cx(classes.root, 'ui-ios__app-bar__icon', className),
     onClick: onClick,
     style: {
       background,
       color
     },
     "data-test-id": testId,
+    ...dataAttributes,
     children: [/*#__PURE__*/_jsx(Icon, {
       ...iconProps
     }, "icon"), Badge && /*#__PURE__*/_jsx(Badge, {}, "badge")]
@@ -62,6 +83,7 @@ AppBarIcon.defaultProps = {
   'aria-label': null,
   background: 'inherit',
   badge: null,
+  className: null,
   color: 'inherit',
   testId: null
 };

package/AppBar/components/Title/index.js

@@ -8,9 +8,9 @@ const useStyles = makeStyles()({
   root: {
     flexGrow: 1,
     lineHeight: '44px',
-    left: 90,
+    left: 'var(--app-bar-title-inset, 90px)',
     position: 'absolute',
-    right: 90,
+    right: 'var(--app-bar-title-inset, 90px)',
     top: 0
   }
 });

package/AppBar/index.js

@@ -16,14 +16,33 @@ const useStyles = makeStyles()(theme => ({
   outer: {
     boxSizing: 'content-box',
     minHeight: 44,
-    paddingTop: theme.layout.safeArea.top
+    paddingTop: theme.layout.safeArea.top,
+    background: theme.components.appBar.background,
+    color: theme.components.appBar.color
   },
   inner: {
-    display: 'flex',
+    display: 'grid',
+    gridTemplateColumns: 'minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr)',
     alignItems: 'center',
-    justifyContent: 'space-between',
     position: 'relative',
-    zIndex: 1
+    zIndex: 1,
+    minHeight: 44
+  },
+  side: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  left: {
+    justifyContent: 'flex-start'
+  },
+  center: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 0
+  },
+  right: {
+    justifyContent: 'flex-end'
   }
 }));
 
@@ -47,11 +66,15 @@ const AppBar = ({
   below,
   center,
   left,
+  leftEnd,
   right,
+  rightStart,
   classes: parentClasses,
   'aria-hidden': ariaHidden,
   backgroundColor,
-  textColor
+  textColor,
+  inert,
+  ...props
 }) => {
   const {
     classes,
@@ -59,38 +82,61 @@ const AppBar = ({
   } = useStyles();
   const contentRef = useRef(null);
   const style = useMemo(() => ({
-    background: backgroundColor,
-    color: textColor
+    ...(backgroundColor ? {
+      '--sg-components-appBar-background': backgroundColor
+    } : {}),
+    ...(textColor ? {
+      '--sg-components-appBar-color': textColor
+    } : {})
   }), [backgroundColor, textColor]);
-  const observer = useMemo(() => new MutationObserver(() => {
-    updateAppBarHeight(contentRef);
-  }), [contentRef]);
+  const observer = useMemo(() => {
+    const Observer = typeof ResizeObserver === 'function' ? ResizeObserver : MutationObserver;
+    return new Observer(() => {
+      updateAppBarHeight(contentRef);
+    });
+  }, [contentRef]);
   useLayoutEffect(() => {
     updateAppBarHeight(contentRef);
     observer.observe(contentRef.current, {
-      childList: true
+      childList: true,
+      box: 'border-box'
     });
     return () => {
       observer.disconnect();
     };
   }, [contentRef, observer]);
+  useLayoutEffect(() => {
+    updateAppBarHeight(contentRef);
+  });
   const sectionClasses = cx(classes.outer, parentClasses.outer, 'ui-ios__app-bar');
+  const dataAttributes = Object.fromEntries(Object.entries(props).filter(([name]) => name.startsWith('data-')));
   return /*#__PURE__*/_jsxs("section", {
     className: sectionClasses,
     "data-test-id": "Navigator",
     style: style,
     "aria-hidden": ariaHidden,
+    inert: inert ? '' : undefined,
     ref: contentRef,
+    ...dataAttributes,
     children: [/*#__PURE__*/_jsx(SurroundPortals, {
       portalName: APP_BAR_CONTENT,
       children: /*#__PURE__*/_jsxs("div", {
-        className: cx(classes.inner, parentClasses.inner),
-        children: [/*#__PURE__*/_jsx(Left, {
-          elements: left
-        }), /*#__PURE__*/_jsx(Center, {
-          elements: center
-        }), /*#__PURE__*/_jsx(Right, {
-          elements: right
+        className: cx(classes.inner, 'ui-ios__app-bar__inner', parentClasses.inner),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: cx(classes.side, classes.left, 'ui-ios__app-bar__left'),
+          children: [/*#__PURE__*/_jsx(Left, {
+            elements: left
+          }), leftEnd]
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(classes.center, 'ui-ios__app-bar__center'),
+          children: /*#__PURE__*/_jsx(Center, {
+            elements: center
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: cx(classes.side, classes.right, 'ui-ios__app-bar__right'),
+          children: [rightStart, /*#__PURE__*/_jsx(Right, {
+            elements: right
+          })]
         })]
       })
     }), /*#__PURE__*/_jsx(Below, {
@@ -100,16 +146,19 @@ const AppBar = ({
 };
 AppBar.defaultProps = {
   'aria-hidden': null,
-  backgroundColor: 'var(--sg-components-appBar-background)',
+  backgroundColor: undefined,
   below: null,
   center: null,
   classes: {
     inner: '',
     outer: ''
   },
+  inert: false,
   left: null,
+  leftEnd: null,
   right: null,
-  textColor: 'var(--sg-components-appBar-color)'
+  rightStart: null,
+  textColor: undefined
 };
 AppBar.Field = Field;
 AppBar.Icon = Icon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-ui-ios",
-  "version": "7.33.3",
+  "version": "7.34.0-beta.2",
   "description": "Shopgate's iOS UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
@@ -10,7 +10,7 @@
     "directory": "libraries/ui-ios"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.33.3",
+    "@shopgate/pwa-common": "7.34.0-beta.2",
     "react": "^17.0.2"
   },
   "peerDependencies": {