@zendeskgarden/react-chrome 9.0.0-next.9 → 9.1.0

package/dist/esm/styled/sheet/StyledSheetWrapper.js

@@ -4,34 +4,34 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_wrapper';
+const transformStyles = _ref => {
+  let {
+    theme,
+    $isAnimated,
+    $isOpen,
+    $placement
+  } = _ref;
+  const transition = $isAnimated ? 'transform 250ms ease-in-out' : undefined;
+  let transform;
+  if ($isOpen) {
+    transform = 'translateX(0)';
+  } else if ($placement === 'start') {
+    transform = `translateX(${theme.rtl ? 100 : -100}%)`;
+  } else {
+    transform = `translateX(${theme.rtl ? -100 : 100}%)`;
+  }
+  return css(["transform:", ";transition:", ";"], transform, transition);
+};
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
-})(["display:flex;position:relative;flex-direction:column;transform:", ";transition:", ";min-width:", ";", ";"], props => {
-  const translateValues = [-100, 100];
-  let translation = 'translateX(0%)';
-  if (props.isOpen) {
-    return translation;
-  }
-  if (props.theme.rtl) {
-    translateValues.reverse();
-  }
-  if (props.placement === 'end') {
-    translation = `translateX(${translateValues[1]}%)`;
-  } else if (props.placement === 'start') {
-    translation = `translateX(${translateValues[0]}%)`;
-  }
-  return translation;
-}, props => props.isAnimated && 'transform 250ms ease-in-out', props => props.size, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSheetWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.$size, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSheetWrapper };

package/dist/esm/styled/utils.js

@@ -0,0 +1,20 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { PALETTE } from '@zendeskgarden/react-theming';
+
+const getFooterHeight = theme => `${theme.space.base * 20}px`;
+const getHeaderHeight = theme => `${theme.space.base * 13}px`;
+const getHeaderItemSize = theme => `${theme.space.base * 7.5}px`;
+const getNavItemHeight = theme => getHeaderHeight(theme);
+const getNavWidth = theme => `${theme.space.base * 15}px`;
+const getNavWidthExpanded = () => `200px`;
+const getProductColor = function (product) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inherit';
+  return product ? PALETTE.product[product] || fallback : fallback;
+};
+
+export { getFooterHeight, getHeaderHeight, getHeaderItemSize, getNavItemHeight, getNavWidth, getNavWidthExpanded, getProductColor };