@zendeskgarden/react-chrome 8.75.1 → 8.76.0

package/dist/esm/styled/subnav/StyledSubNavItem.js

@@ -0,0 +1,55 @@
+/**
+* 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 { rgba } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'chrome.subnav_item';
+const colorStyles = props => {
+  const {
+    theme,
+    isLight,
+    isCurrent
+  } = props;
+  const DARK = theme.palette.black;
+  const LIGHT = theme.palette.white;
+  let currentColor;
+  let hoverColor;
+  if (isCurrent) {
+    if (isLight) {
+      currentColor = rgba(DARK, 0.1);
+    } else {
+      currentColor = rgba(LIGHT, 0.1);
+    }
+  } else {
+    hoverColor = rgba(isLight ? LIGHT : DARK, 0.1);
+  }
+  const activeColor = rgba(isLight ? DARK : LIGHT, 0.03);
+  return css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:not([data-garden-header='true']):active{background-color:", ";}"], isCurrent ? '1' : '0.6', currentColor, hoverColor, focusStyles({
+    theme,
+    hue: isLight ? DARK : LIGHT,
+    spacerWidth: null,
+    styles: {
+      opacity: 1
+    }
+  }), activeColor);
+};
+const getSubNavItemHeight = props => {
+  return `${props.theme.space.base * 7.5}px`;
+};
+const StyledSubNavItem = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSubNavItem",
+  componentId: "sc-1yg9dpx-0"
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;margin:", "px 0 0;border:none;border-radius:", ";box-sizing:border-box;background:transparent;cursor:", ";padding:", ";width:100%;min-height:", ";text-align:inherit;font-size:inherit;&,&:hover,&:focus{text-decoration:none;color:inherit;}", ";", ";"], props => props.theme.space.base * 2, props => props.theme.borderRadii.md, props => props.isCurrent ? 'default' : 'pointer', props => `0 ${props.theme.space.base * 2}px`, getSubNavItemHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSubNavItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSubNavItem, getSubNavItemHeight };

package/dist/esm/styled/subnav/StyledSubNavItemHeader.js

@@ -0,0 +1,24 @@
+/**
+* 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';
+import { StyledSubNavItem } from './StyledSubNavItem.js';
+
+const COMPONENT_ID = 'chrome.collapsible_sub_nav_item';
+const StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  'data-garden-header': 'true'
+}).withConfig({
+  displayName: "StyledSubNavItemHeader",
+  componentId: "sc-1vniter-0"
+})(["position:relative;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 7, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSubNavItemHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSubNavItemHeader };

package/dist/esm/styled/subnav/StyledSubNavItemIcon.js

@@ -0,0 +1,43 @@
+/**
+* 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 from 'react';
+import styled from 'styled-components';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/12/chevron-down-stroke.svg.js';
+import { DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { getSubNavItemHeight } from './StyledSubNavItem.js';
+
+const COMPONENT_ID = 'chrome.collapsible_sub_nav_item_icon';
+const FilteredChevronDownStrokeIcon = React__default.forwardRef((_ref, ref) => {
+  let {
+    theme,
+    isExpanded,
+    ...validProps
+  } = _ref;
+  return React__default.createElement(SvgChevronDownStroke, Object.assign({
+    ref: ref
+  }, validProps));
+});
+FilteredChevronDownStrokeIcon.displayName = 'FilteredChevronDownStrokeIcon';
+const StyledSubNavItemIcon = styled(FilteredChevronDownStrokeIcon).withConfig({
+  displayName: "StyledSubNavItemIcon",
+  componentId: "sc-1d02hho-0"
+})(["width:", ";height:", ";"], props => props.theme.iconSizes.sm, props => props.theme.iconSizes.sm);
+StyledSubNavItemIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const StyledSubNavItemIconWrapper = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
+  componentId: "sc-1d02hho-1"
+})(["display:flex;position:absolute;top:0;right:", ";left:", ";align-items:center;justify-content:center;width:", "px;height:", ";", "{transform:", ";transition:transform 0.25s ease-in-out;}", ";"], props => props.theme.rtl ? 'auto' : 0, props => props.theme.rtl && 0, props => props.theme.space.base * 7, getSubNavItemHeight, StyledSubNavItemIcon, props => props.isExpanded && `rotate(${props.theme.rtl ? '-' : ''}180deg)`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSubNavItemIconWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSubNavItemIcon, StyledSubNavItemIconWrapper };

package/dist/esm/styled/subnav/StyledSubNavItemText.js

@@ -0,0 +1,30 @@
+/**
+* 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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { getSubNavItemHeight } from './StyledSubNavItem.js';
+
+const COMPONENT_ID = 'chrome.subnav_item_text';
+const sizeStyles = props => {
+  const baseLineHeight = props.theme.space.base * 5;
+  const verticalMargin = math(`(${getSubNavItemHeight(props)} - ${baseLineHeight}) / 2`);
+  const lineHeight = getLineHeight(baseLineHeight, props.theme.fontSizes.md);
+  return css(["margin:", " 0;line-height:", ";"], verticalMargin, lineHeight);
+};
+const StyledSubNavItemText = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSubNavItemText",
+  componentId: "sc-1hy0pn7-0"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:", ";", " ", ";"], props => props.isWrapped ? 'normal' : 'nowrap', props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSubNavItemText.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSubNavItemText };

package/dist/esm/styled/subnav/StyledSubNavPanel.js

@@ -0,0 +1,24 @@
+/**
+* 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 } from '@zendeskgarden/react-theming';
+import { StyledSubNavItem } from './StyledSubNavItem.js';
+
+const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
+const hiddenStyling = css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
+const StyledSubNavPanel = styled.div.attrs({
+  'data-garden-id': PANEL_COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledSubNavPanel",
+  componentId: "sc-1jv3rpv-0"
+})(["transition:max-height 0.25s cubic-bezier(0.15,0.85,0.35,1.2),0.25s visibility 0s linear;height:auto;max-height:100%;", " ", "{padding-", ":", ";}", ";"], props => props.isHidden && hiddenStyling, StyledSubNavItem, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 5}px`, props => retrieveComponentStyles(PANEL_COMPONENT_ID, props));
+StyledSubNavPanel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSubNavPanel };

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 PRODUCT = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
+
+export { PLACEMENT, PRODUCT };

package/dist/esm/utils/useBodyContext.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 BodyContext = React__default.createContext({
+  hasFooter: true
+});
+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/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 };