@zendeskgarden/react-chrome 8.62.1 → 8.63.0

package/dist/index.esm.js

@@ -41,7 +41,7 @@ const useChromeContext = () => {
 const COMPONENT_ID$A = 'chrome.chrome';
 const StyledChrome = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -53,7 +53,7 @@ StyledChrome.defaultProps = {
 const COMPONENT_ID$z = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -70,7 +70,7 @@ const sizeStyles$4 = props => {
 };
 const StyledBaseHeaderItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -91,7 +91,7 @@ const COMPONENT_ID$x = 'chrome.header_item_text';
 const clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledHeaderItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -115,7 +115,7 @@ const getExpandedNavWidth = () => {
 };
 const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -147,7 +147,7 @@ const retrieveProductColor$1 = props => {
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -168,7 +168,7 @@ const sizeStyles$3 = props => {
 };
 const StyledBaseNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
@@ -183,7 +183,7 @@ const getHeaderHeight = props => {
 };
 const StyledHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -217,7 +217,7 @@ const sizeStyles$2 = props => {
 };
 const StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
@@ -227,9 +227,7 @@ StyledSkipNav.defaultProps = {
 };
 
 var _path$2;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
 var SvgLinkStroke = function SvgLinkStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -237,8 +235,7 @@ var SvgLinkStroke = function SvgLinkStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"
@@ -253,7 +250,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -265,7 +262,7 @@ StyledSkipNavIcon.defaultProps = {
 const COMPONENT_ID$q = 'chrome.body';
 const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
@@ -280,7 +277,7 @@ const getFooterHeight = props => {
 };
 const StyledFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -292,7 +289,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$o = 'chrome.content';
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -304,7 +301,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$n = 'chrome.main';
 const StyledMain = styled.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -316,7 +313,7 @@ StyledMain.defaultProps = {
 const COMPONENT_ID$m = 'chrome.sidebar';
 const StyledSidebar = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
@@ -328,7 +325,7 @@ StyledSidebar.defaultProps = {
 const COMPONENT_ID$l = 'chrome.footer_item';
 const StyledFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -344,7 +341,7 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
@@ -367,7 +364,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$j = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -405,7 +402,7 @@ const colorStyles$4 = props => {
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -418,7 +415,7 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -431,7 +428,7 @@ StyledBrandmarkNavItem.defaultProps = {
 const COMPONENT_ID$g = 'chrome.nav_item_icon';
 const StyledNavItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -463,7 +460,7 @@ const colorStyles$3 = props => {
 };
 const StyledNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
@@ -480,7 +477,7 @@ StyledNavItem.defaultProps = {
 const COMPONENT_ID$e = 'chrome.nav_item_text';
 const StyledNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -522,7 +519,7 @@ const getSubNavItemHeight = props => {
 };
 const StyledSubNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
@@ -545,7 +542,7 @@ const colorStyles$1 = props => {
 };
 const StyledSubNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -563,7 +560,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -575,7 +572,7 @@ StyledSubNavItemText.defaultProps = {
 const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 const StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -586,9 +583,7 @@ StyledSubNavItemHeader.defaultProps = {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -596,8 +591,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
@@ -625,7 +619,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -643,7 +637,7 @@ 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.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -674,7 +668,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -686,7 +680,7 @@ StyledSheet.defaultProps = {
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -713,7 +707,7 @@ StyledSheetWrapper.defaultProps = {
 const COMPONENT_ID$6 = 'chrome.sheet_title';
 const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -725,7 +719,7 @@ StyledSheetTitle.defaultProps = {
 const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -737,7 +731,7 @@ StyledSheetDescription.defaultProps = {
 const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -759,7 +753,7 @@ const colorStyles = props => {
 };
 const StyledSheetClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
@@ -771,7 +765,7 @@ StyledSheetClose.defaultProps = {
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -783,7 +777,7 @@ StyledSheetFooter.defaultProps = {
 const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -795,7 +789,7 @@ StyledSheetFooterItem.defaultProps = {
 const COMPONENT_ID = 'chrome.sheet_header';
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -1330,9 +1324,7 @@ SheetFooterItem.displayName = 'Sheet.FooterItem';
 const FooterItem = SheetFooterItem;
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1340,8 +1332,7 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -1380,7 +1371,7 @@ const SheetComponent = React__default.forwardRef((_ref, ref) => {
   const sheetRef = useRef(null);
   const seed = useUIDSeed();
   const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
-  const idPrefix = useMemo(() => id || seed(`sheet_${'8.62.1'}`), [id, seed]);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'8.63.0'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = useMemo(() => ({

package/dist/typings/types/index.d.ts

@@ -7,7 +7,7 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 export declare const PLACEMENT: readonly ["end", "start"];
 export declare const PRODUCT: readonly ["chat", "connect", "explore", "guide", "message", "support", "talk"];
-export declare type Product = typeof PRODUCT[number];
+export type Product = (typeof PRODUCT)[number];
 export interface IChromeProps extends HTMLAttributes<HTMLDivElement> {
     /** Applies a custom hue to the chrome navigation */
     hue?: string;
@@ -107,7 +107,7 @@ export interface ISheetProps extends HTMLAttributes<HTMLElement> {
     /** Returns keyboard focus to the element that triggered the sheet */
     restoreFocus?: boolean;
     /** Adjusts the placement of the sheet */
-    placement?: typeof PLACEMENT[number];
+    placement?: (typeof PLACEMENT)[number];
     /** Sets the size of the open sheet */
     size?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-chrome",
-  "version": "8.62.1",
+  "version": "8.63.0",
   "description": "Components relating to Chrome within the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-accordion": "^2.0.0",
-    "@zendeskgarden/container-utilities": "^0.7.0",
+    "@zendeskgarden/container-utilities": "^1.0.0",
     "dom-helpers": "^5.2.1",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
@@ -35,7 +35,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.62.1",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }