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

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

@@ -0,0 +1,34 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_close';
+const BASE_MULTIPLIERS = {
+  top: 2.5,
+  side: 2,
+  size: 10
+};
+const colorStyles = props => {
+  const backgroundColor = 'primaryHue';
+  const foregroundColor = 'neutralHue';
+  return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColorV8(foregroundColor, 600, props.theme), getColorV8(backgroundColor, 600, props.theme, 0.08), getColorV8(foregroundColor, 700, props.theme), focusStyles({
+    theme: props.theme
+  }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
+};
+const StyledSheetClose = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledSheetClose",
+  componentId: "sc-1ab02oq-0"
+})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { BASE_MULTIPLIERS, StyledSheetClose };

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

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_description';
+const StyledSheetDescription = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledSheetDescription",
+  componentId: "sc-1puglb6-0"
+})(["line-height:", ";color:", ";", ";"], props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetDescription.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetDescription };

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

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_footer';
+const StyledSheetFooter = styled.footer.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledSheetFooter",
+  componentId: "sc-2cktos-0"
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], props => props.isCompact ? 'center' : 'flex-end', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetFooter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetFooter };

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

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_footer_item';
+const StyledSheetFooterItem = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledSheetFooterItem",
+  componentId: "sc-r9ixh-0"
+})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetFooterItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetFooterItem };

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

@@ -0,0 +1,23 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { BASE_MULTIPLIERS } from './StyledSheetClose.js';
+
+const COMPONENT_ID = 'chrome.sheet_header';
+const StyledSheetHeader = styled.header.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledSheetHeader",
+  componentId: "sc-o2ry8i-0"
+})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetHeader };

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

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_title';
+const StyledSheetTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).withConfig({
+  displayName: "StyledSheetTitle",
+  componentId: "sc-1gogk75-0"
+})(["line-height:", ";color:", ";font-weight:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSheetTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSheetTitle };

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

@@ -0,0 +1,37 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.sheet_wrapper';
+const StyledSheetWrapper = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.9'
+}).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
+};
+
+export { StyledSheetWrapper };

package/dist/esm/types/index.js

@@ -0,0 +1,10 @@
+/**
+* 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.
+*/
+const PLACEMENT = ['end', 'start'];
+const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
+
+export { PLACEMENT, PRODUCTS };

package/dist/esm/utils/useBodyContext.js

@@ -0,0 +1,14 @@
+/**
+* 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 React__default, { useContext } from 'react';
+
+const BodyContext = React__default.createContext(undefined);
+const useBodyContext = () => {
+  return useContext(BodyContext);
+};
+
+export { BodyContext, useBodyContext };

package/dist/esm/utils/useChromeContext.js

@@ -0,0 +1,16 @@
+/**
+* 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 React__default, { useContext } from 'react';
+
+const ChromeContext = React__default.createContext({
+  hue: 'chromeHue'
+});
+const useChromeContext = () => {
+  return useContext(ChromeContext);
+};
+
+export { ChromeContext, useChromeContext };

package/dist/esm/utils/useFocusableMount.js

@@ -0,0 +1,31 @@
+/**
+* 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 { useRef, useEffect } from 'react';
+import activeElement from 'dom-helpers/activeElement';
+
+function useFocusableMount(_ref) {
+  let {
+    isMounted,
+    focusOnMount,
+    restoreFocus,
+    targetRef
+  } = _ref;
+  const triggerRef = useRef();
+  useEffect(() => {
+    if (isMounted && focusOnMount && targetRef.current) {
+      triggerRef.current = activeElement();
+      targetRef.current.focus();
+    }
+  }, [isMounted, focusOnMount, targetRef]);
+  useEffect(() => {
+    if (!isMounted && restoreFocus && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [isMounted, restoreFocus, triggerRef]);
+}
+
+export { useFocusableMount };

package/dist/esm/utils/useNavContext.js

@@ -0,0 +1,16 @@
+/**
+* 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 React__default, { useContext } from 'react';
+
+const NavContext = React__default.createContext({
+  isExpanded: false
+});
+const useNavContext = () => {
+  return useContext(NavContext);
+};
+
+export { NavContext, useNavContext };

package/dist/esm/utils/useNavListContext.js

@@ -0,0 +1,14 @@
+/**
+* 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 React__default, { useContext } from 'react';
+
+const NavListContext = React__default.createContext(undefined);
+const useNavListContext = () => {
+  return useContext(NavListContext);
+};
+
+export { NavListContext, useNavListContext };

package/dist/esm/utils/useSheetContext.js

@@ -0,0 +1,16 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+const SheetContext = createContext({
+  setIsCloseButtonPresent() {}
+});
+const useSheetContext = () => {
+  return useContext(SheetContext);
+};
+
+export { SheetContext, useSheetContext };