@zendeskgarden/react-breadcrumbs 9.0.0-next.0 → 9.0.0-next.10

package/dist/esm/elements/Breadcrumb.js

@@ -0,0 +1,40 @@
+/**
+* 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, { forwardRef, Children, cloneElement } from 'react';
+import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
+import { useText } from '@zendeskgarden/react-theming';
+import { StyledBreadcrumb } from '../styled/StyledBreadcrumb.js';
+import { StyledChevronIcon } from '../styled/StyledChevronIcon.js';
+import { StyledBreadcrumbItem } from '../styled/StyledBreadcrumbItem.js';
+import { StyledCenteredBreadcrumbItem } from '../styled/StyledCenteredBreadcrumbItem.js';
+
+const Breadcrumb = forwardRef((props, ref) => {
+  const {
+    getContainerProps,
+    getCurrentPageProps
+  } = useBreadcrumb();
+  const totalChildren = Children.count(props.children);
+  const mappedChildren = Children.map(props.children, (child, index) => {
+    const isLastItem = index === totalChildren - 1;
+    if (isLastItem) {
+      return React__default.createElement(StyledBreadcrumbItem, {
+        isCurrent: true
+      }, cloneElement(child, getCurrentPageProps()));
+    }
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledBreadcrumbItem, null, child), React__default.createElement(StyledCenteredBreadcrumbItem, null, React__default.createElement(StyledChevronIcon, null)));
+  });
+  const ariaLabel = useText(Breadcrumb, props, 'aria-label', 'Breadcrumbs');
+  return React__default.createElement("nav", getContainerProps({
+    ...props,
+    ref,
+    role: null,
+    'aria-label': ariaLabel
+  }), React__default.createElement(StyledBreadcrumb, null, mappedChildren));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+export { Breadcrumb };

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+/**
+* 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.
+*/
+export { Breadcrumb } from './elements/Breadcrumb.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* 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 * as React from 'react';
+
+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 SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M3.646 10.354a.5.5 0 01-.057-.638l.057-.07L7.293 6 3.646 2.354a.5.5 0 01-.057-.638l.057-.07a.5.5 0 01.638-.057l.07.057 4 4a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.708 0z"
+  })));
+};
+
+export { SvgChevronRightStroke as default };

package/dist/esm/styled/StyledBreadcrumb.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 = 'breadcrumbs.list';
+const StyledBreadcrumb = styled.ol.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledBreadcrumb",
+  componentId: "sc-11jrinn-0"
+})(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBreadcrumb.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBreadcrumb };

package/dist/esm/styled/StyledBreadcrumbItem.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, { css } from 'styled-components';
+import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'breadcrumbs.item';
+const linkStyles = _ref => {
+  let {
+    isCurrent
+  } = _ref;
+  return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
+      & > :link,
+      & > :visited,
+      & > :link:hover,
+      & > :visited:hover,
+      & > :link:focus,
+      & > :visited:focus {
+        color: inherit;
+      }
+    `);
+};
+const StyledBreadcrumbItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.10'
+}).withConfig({
+  displayName: "StyledBreadcrumbItem",
+  componentId: "sc-r0suq7-0"
+})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBreadcrumbItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBreadcrumbItem };

package/dist/esm/styled/StyledCenteredBreadcrumbItem.js

@@ -0,0 +1,21 @@
+/**
+* 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 { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBreadcrumbItem } from './StyledBreadcrumbItem.js';
+
+const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
+  'aria-hidden': true
+}).withConfig({
+  displayName: "StyledCenteredBreadcrumbItem",
+  componentId: "sc-1ces9y2-0"
+})(["display:flex;align-items:center;"]);
+StyledCenteredBreadcrumbItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCenteredBreadcrumbItem };

package/dist/esm/styled/StyledChevronIcon.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 React__default from 'react';
+import styled from 'styled-components';
+import { em } from 'polished';
+import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import SvgChevronRightStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg.js';
+
+const StyledChevronIcon = styled(_ref => {
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref;
+  return React__default.createElement(SvgChevronRightStroke, props);
+}).attrs({
+  role: 'presentation',
+  'aria-hidden': 'true'
+}).withConfig({
+  displayName: "StyledChevronIcon",
+  componentId: "sc-9r9qrm-0"
+})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => em(props.theme.space.base, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme));
+StyledChevronIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledChevronIcon };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
@@ -39,7 +38,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 const COMPONENT_ID$1 = 'breadcrumbs.list';
 const StyledBreadcrumb = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledBreadcrumb",
   componentId: "sc-11jrinn-0"
@@ -64,20 +63,20 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   })));
 };
 
-const ValidChevronIcon = props => {
-  const {
+const StyledChevronIcon = styled__default.default(_ref => {
+  let {
+    children,
     theme,
-    ...validProps
-  } = props;
-  return React__namespace.default.createElement(SvgChevronRightStroke, validProps);
-};
-const StyledChevronIcon = styled__default.default(ValidChevronIcon).attrs({
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(SvgChevronRightStroke, props);
+}).attrs({
   role: 'presentation',
   'aria-hidden': 'true'
 }).withConfig({
   displayName: "StyledChevronIcon",
   componentId: "sc-9r9qrm-0"
-})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => polished.em(props.theme.space.base, props.theme.fontSizes.md), props => reactTheming.getColor('neutralHue', 600, props.theme));
+})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => polished.em(props.theme.space.base, props.theme.fontSizes.md), props => reactTheming.getColorV8('neutralHue', 600, props.theme));
 StyledChevronIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -100,11 +99,11 @@ const linkStyles = _ref => {
 };
 const StyledBreadcrumbItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledBreadcrumbItem",
   componentId: "sc-r0suq7-0"
-})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? reactTheming.getColor(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? reactTheming.getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledBreadcrumbItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };

package/dist/typings/styled/StyledChevronIcon.d.ts

@@ -5,11 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { ThemeProps, DefaultTheme } from 'styled-components';
 /**
  * Accepts all `<svg>` props
  */
-export declare const StyledChevronIcon: import("styled-components").StyledComponent<React.FC<React.HTMLAttributes<SVGElement> & ThemeProps<DefaultTheme>>, DefaultTheme, {
-    role: "presentation";
-    'aria-hidden': "true";
+export declare const StyledChevronIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.JSX.Element, import("styled-components").DefaultTheme, {
+    role: string;
+    'aria-hidden': string;
 }, "role" | "aria-hidden">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-breadcrumbs",
-  "version": "9.0.0-next.0",
+  "version": "9.0.0-next.10",
   "description": "Components relating to breadcrumbs in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -26,13 +26,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^4.2.0 || ^5.0.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.0",
+    "@zendeskgarden/react-theming": "^9.0.0-next.10",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7145e970afa57b024ab7d505f2220a656e430c04"
+  "gitHead": "818e6100aa6676af7e972198b82516d330307d60"
 }

package/dist/index.esm.js

@@ -1,123 +0,0 @@
-/**
- * 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 * as React from 'react';
-import React__default, { forwardRef, Children, cloneElement } from 'react';
-import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight, useText } from '@zendeskgarden/react-theming';
-import styled, { css } from 'styled-components';
-import { em } from 'polished';
-
-const COMPONENT_ID$1 = 'breadcrumbs.list';
-const StyledBreadcrumb = styled.ol.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
-}).withConfig({
-  displayName: "StyledBreadcrumb",
-  componentId: "sc-11jrinn-0"
-})(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledBreadcrumb.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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 SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M3.646 10.354a.5.5 0 01-.057-.638l.057-.07L7.293 6 3.646 2.354a.5.5 0 01-.057-.638l.057-.07a.5.5 0 01.638-.057l.07.057 4 4a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.708 0z"
-  })));
-};
-
-const ValidChevronIcon = props => {
-  const {
-    theme,
-    ...validProps
-  } = props;
-  return React__default.createElement(SvgChevronRightStroke, validProps);
-};
-const StyledChevronIcon = styled(ValidChevronIcon).attrs({
-  role: 'presentation',
-  'aria-hidden': 'true'
-}).withConfig({
-  displayName: "StyledChevronIcon",
-  componentId: "sc-9r9qrm-0"
-})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => em(props.theme.space.base, props.theme.fontSizes.md), props => getColor('neutralHue', 600, props.theme));
-StyledChevronIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'breadcrumbs.item';
-const linkStyles = _ref => {
-  let {
-    isCurrent
-  } = _ref;
-  return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
-      & > :link,
-      & > :visited,
-      & > :link:hover,
-      & > :visited:hover,
-      & > :link:focus,
-      & > :visited:focus {
-        color: inherit;
-      }
-    `);
-};
-const StyledBreadcrumbItem = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
-}).withConfig({
-  displayName: "StyledBreadcrumbItem",
-  componentId: "sc-r0suq7-0"
-})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? getColor(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledBreadcrumbItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
-  'aria-hidden': true
-}).withConfig({
-  displayName: "StyledCenteredBreadcrumbItem",
-  componentId: "sc-1ces9y2-0"
-})(["display:flex;align-items:center;"]);
-StyledCenteredBreadcrumbItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const Breadcrumb = forwardRef((props, ref) => {
-  const {
-    getContainerProps,
-    getCurrentPageProps
-  } = useBreadcrumb();
-  const totalChildren = Children.count(props.children);
-  const mappedChildren = Children.map(props.children, (child, index) => {
-    const isLastItem = index === totalChildren - 1;
-    if (isLastItem) {
-      return React__default.createElement(StyledBreadcrumbItem, {
-        isCurrent: true
-      }, cloneElement(child, getCurrentPageProps()));
-    }
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledBreadcrumbItem, null, child), React__default.createElement(StyledCenteredBreadcrumbItem, null, React__default.createElement(StyledChevronIcon, null)));
-  });
-  const ariaLabel = useText(Breadcrumb, props, 'aria-label', 'Breadcrumbs');
-  return React__default.createElement("nav", getContainerProps({
-    ...props,
-    ref,
-    role: null,
-    'aria-label': ariaLabel
-  }), React__default.createElement(StyledBreadcrumb, null, mappedChildren));
-});
-Breadcrumb.displayName = 'Breadcrumb';
-
-export { Breadcrumb };