@zendeskgarden/react-breadcrumbs 8.57.0 → 8.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -39,95 +39,14 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
39
39
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
40
40
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
41
41
 
42
- function ownKeys(object, enumerableOnly) {
43
- var keys = Object.keys(object);
44
-
45
- if (Object.getOwnPropertySymbols) {
46
- var symbols = Object.getOwnPropertySymbols(object);
47
- enumerableOnly && (symbols = symbols.filter(function (sym) {
48
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
49
- })), keys.push.apply(keys, symbols);
50
- }
51
-
52
- return keys;
53
- }
54
-
55
- function _objectSpread2(target) {
56
- for (var i = 1; i < arguments.length; i++) {
57
- var source = null != arguments[i] ? arguments[i] : {};
58
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
59
- _defineProperty(target, key, source[key]);
60
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
61
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
62
- });
63
- }
64
-
65
- return target;
66
- }
67
-
68
- function _defineProperty(obj, key, value) {
69
- if (key in obj) {
70
- Object.defineProperty(obj, key, {
71
- value: value,
72
- enumerable: true,
73
- configurable: true,
74
- writable: true
75
- });
76
- } else {
77
- obj[key] = value;
78
- }
79
-
80
- return obj;
81
- }
82
-
83
- function _objectWithoutPropertiesLoose(source, excluded) {
84
- if (source == null) return {};
85
- var target = {};
86
- var sourceKeys = Object.keys(source);
87
- var key, i;
88
-
89
- for (i = 0; i < sourceKeys.length; i++) {
90
- key = sourceKeys[i];
91
- if (excluded.indexOf(key) >= 0) continue;
92
- target[key] = source[key];
93
- }
94
-
95
- return target;
96
- }
97
-
98
- function _objectWithoutProperties(source, excluded) {
99
- if (source == null) return {};
100
-
101
- var target = _objectWithoutPropertiesLoose(source, excluded);
102
-
103
- var key, i;
104
-
105
- if (Object.getOwnPropertySymbols) {
106
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
107
-
108
- for (i = 0; i < sourceSymbolKeys.length; i++) {
109
- key = sourceSymbolKeys[i];
110
- if (excluded.indexOf(key) >= 0) continue;
111
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
112
- target[key] = source[key];
113
- }
114
- }
115
-
116
- return target;
117
- }
118
-
119
- var COMPONENT_ID$1 = 'breadcrumbs.list';
120
- var StyledBreadcrumb = styled__default["default"].ol.attrs({
42
+ const COMPONENT_ID$1 = 'breadcrumbs.list';
43
+ const StyledBreadcrumb = styled__default["default"].ol.attrs({
121
44
  'data-garden-id': COMPONENT_ID$1,
122
- 'data-garden-version': '8.57.0'
45
+ 'data-garden-version': '8.58.0'
123
46
  }).withConfig({
124
47
  displayName: "StyledBreadcrumb",
125
48
  componentId: "sc-11jrinn-0"
126
- })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";"], function (props) {
127
- return props.theme.fontSizes.md;
128
- }, function (props) {
129
- return props.theme.rtl && 'rtl';
130
- });
49
+ })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl');
131
50
  StyledBreadcrumb.defaultProps = {
132
51
  theme: reactTheming.DEFAULT_THEME
133
52
  };
@@ -143,57 +62,60 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
143
62
  height: 12,
144
63
  focusable: "false",
145
64
  viewBox: "0 0 12 12",
146
- "aria-hidden": "true"
65
+ "aria-hidden": "true",
66
+ role: "img"
147
67
  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
148
68
  fill: "currentColor",
149
69
  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"
150
70
  })));
151
71
  };
152
72
 
153
- var _excluded = ["theme"];
154
- var ValidChevronIcon = function ValidChevronIcon(props) {
155
- props.theme;
156
- var validProps = _objectWithoutProperties(props, _excluded);
73
+ const ValidChevronIcon = props => {
74
+ const {
75
+ theme,
76
+ ...validProps
77
+ } = props;
157
78
  return React__default["default"].createElement(SvgChevronRightStroke, validProps);
158
79
  };
159
- var StyledChevronIcon = styled__default["default"](ValidChevronIcon).attrs({
80
+ const StyledChevronIcon = styled__default["default"](ValidChevronIcon).attrs({
160
81
  role: 'presentation',
161
82
  'aria-hidden': 'true'
162
83
  }).withConfig({
163
84
  displayName: "StyledChevronIcon",
164
85
  componentId: "sc-9r9qrm-0"
165
- })(["transform:", ";margin:0 ", ";color:", ";"], function (props) {
166
- return props.theme.rtl && "rotate(180deg);";
167
- }, function (props) {
168
- return polished.em(props.theme.space.base, props.theme.fontSizes.md);
169
- }, function (props) {
170
- return reactTheming.getColor('neutralHue', 600, props.theme);
171
- });
86
+ })(["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));
172
87
  StyledChevronIcon.defaultProps = {
173
88
  theme: reactTheming.DEFAULT_THEME
174
89
  };
175
90
 
176
- var COMPONENT_ID = 'breadcrumbs.item';
177
- var linkStyles = function linkStyles(_ref) {
178
- var isCurrent = _ref.isCurrent;
179
- return styled.css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && "\n & > :link,\n & > :visited,\n & > :link:hover,\n & > :visited:hover,\n & > :link:focus,\n & > :visited:focus {\n color: inherit;\n }\n ");
91
+ const COMPONENT_ID = 'breadcrumbs.item';
92
+ const linkStyles = _ref => {
93
+ let {
94
+ isCurrent
95
+ } = _ref;
96
+ return styled.css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
97
+ & > :link,
98
+ & > :visited,
99
+ & > :link:hover,
100
+ & > :visited:hover,
101
+ & > :link:focus,
102
+ & > :visited:focus {
103
+ color: inherit;
104
+ }
105
+ `);
180
106
  };
181
- var StyledBreadcrumbItem = styled__default["default"].li.attrs({
107
+ const StyledBreadcrumbItem = styled__default["default"].li.attrs({
182
108
  'data-garden-id': COMPONENT_ID,
183
- 'data-garden-version': '8.57.0'
109
+ 'data-garden-version': '8.58.0'
184
110
  }).withConfig({
185
111
  displayName: "StyledBreadcrumbItem",
186
112
  componentId: "sc-r0suq7-0"
187
- })(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";"], function (props) {
188
- return reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
189
- }, function (props) {
190
- return props.isCurrent ? reactTheming.getColor(props.theme.colors.neutralHue, 600) : 'inherit';
191
- }, linkStyles);
113
+ })(["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);
192
114
  StyledBreadcrumbItem.defaultProps = {
193
115
  theme: reactTheming.DEFAULT_THEME
194
116
  };
195
117
 
196
- var StyledCenteredBreadcrumbItem = styled__default["default"](StyledBreadcrumbItem).attrs({
118
+ const StyledCenteredBreadcrumbItem = styled__default["default"](StyledBreadcrumbItem).attrs({
197
119
  'aria-hidden': true
198
120
  }).withConfig({
199
121
  displayName: "StyledCenteredBreadcrumbItem",
@@ -203,13 +125,14 @@ StyledCenteredBreadcrumbItem.defaultProps = {
203
125
  theme: reactTheming.DEFAULT_THEME
204
126
  };
205
127
 
206
- var Breadcrumb = React.forwardRef(function (props, ref) {
207
- var _useBreadcrumb = containerBreadcrumb.useBreadcrumb(),
208
- getContainerProps = _useBreadcrumb.getContainerProps,
209
- getCurrentPageProps = _useBreadcrumb.getCurrentPageProps;
210
- var totalChildren = React.Children.count(props.children);
211
- var mappedChildren = React.Children.map(props.children, function (child, index) {
212
- var isLastItem = index === totalChildren - 1;
128
+ const Breadcrumb = React.forwardRef((props, ref) => {
129
+ const {
130
+ getContainerProps,
131
+ getCurrentPageProps
132
+ } = containerBreadcrumb.useBreadcrumb();
133
+ const totalChildren = React.Children.count(props.children);
134
+ const mappedChildren = React.Children.map(props.children, (child, index) => {
135
+ const isLastItem = index === totalChildren - 1;
213
136
  if (isLastItem) {
214
137
  return React__default["default"].createElement(StyledBreadcrumbItem, {
215
138
  isCurrent: true
@@ -217,12 +140,13 @@ var Breadcrumb = React.forwardRef(function (props, ref) {
217
140
  }
218
141
  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(StyledBreadcrumbItem, null, child), React__default["default"].createElement(StyledCenteredBreadcrumbItem, null, React__default["default"].createElement(StyledChevronIcon, null)));
219
142
  });
220
- var ariaLabel = reactTheming.useText(Breadcrumb, props, 'aria-label', 'Breadcrumb navigation');
221
- return React__default["default"].createElement("nav", getContainerProps(_objectSpread2(_objectSpread2({}, props), {}, {
222
- ref: ref,
143
+ const ariaLabel = reactTheming.useText(Breadcrumb, props, 'aria-label', 'Breadcrumb navigation');
144
+ return React__default["default"].createElement("nav", getContainerProps({
145
+ ...props,
146
+ ref,
223
147
  role: null,
224
148
  'aria-label': ariaLabel
225
- })), React__default["default"].createElement(StyledBreadcrumb, null, mappedChildren));
149
+ }), React__default["default"].createElement(StyledBreadcrumb, null, mappedChildren));
226
150
  });
227
151
  Breadcrumb.displayName = 'Breadcrumb';
228
152
 
package/dist/index.esm.js CHANGED
@@ -12,95 +12,14 @@ import { DEFAULT_THEME, getColor, getLineHeight, useText } from '@zendeskgarden/
12
12
  import styled, { css } from 'styled-components';
13
13
  import { em } from 'polished';
14
14
 
15
- function ownKeys(object, enumerableOnly) {
16
- var keys = Object.keys(object);
17
-
18
- if (Object.getOwnPropertySymbols) {
19
- var symbols = Object.getOwnPropertySymbols(object);
20
- enumerableOnly && (symbols = symbols.filter(function (sym) {
21
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
22
- })), keys.push.apply(keys, symbols);
23
- }
24
-
25
- return keys;
26
- }
27
-
28
- function _objectSpread2(target) {
29
- for (var i = 1; i < arguments.length; i++) {
30
- var source = null != arguments[i] ? arguments[i] : {};
31
- i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
32
- _defineProperty(target, key, source[key]);
33
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
34
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
35
- });
36
- }
37
-
38
- return target;
39
- }
40
-
41
- function _defineProperty(obj, key, value) {
42
- if (key in obj) {
43
- Object.defineProperty(obj, key, {
44
- value: value,
45
- enumerable: true,
46
- configurable: true,
47
- writable: true
48
- });
49
- } else {
50
- obj[key] = value;
51
- }
52
-
53
- return obj;
54
- }
55
-
56
- function _objectWithoutPropertiesLoose(source, excluded) {
57
- if (source == null) return {};
58
- var target = {};
59
- var sourceKeys = Object.keys(source);
60
- var key, i;
61
-
62
- for (i = 0; i < sourceKeys.length; i++) {
63
- key = sourceKeys[i];
64
- if (excluded.indexOf(key) >= 0) continue;
65
- target[key] = source[key];
66
- }
67
-
68
- return target;
69
- }
70
-
71
- function _objectWithoutProperties(source, excluded) {
72
- if (source == null) return {};
73
-
74
- var target = _objectWithoutPropertiesLoose(source, excluded);
75
-
76
- var key, i;
77
-
78
- if (Object.getOwnPropertySymbols) {
79
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
80
-
81
- for (i = 0; i < sourceSymbolKeys.length; i++) {
82
- key = sourceSymbolKeys[i];
83
- if (excluded.indexOf(key) >= 0) continue;
84
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
85
- target[key] = source[key];
86
- }
87
- }
88
-
89
- return target;
90
- }
91
-
92
- var COMPONENT_ID$1 = 'breadcrumbs.list';
93
- var StyledBreadcrumb = styled.ol.attrs({
15
+ const COMPONENT_ID$1 = 'breadcrumbs.list';
16
+ const StyledBreadcrumb = styled.ol.attrs({
94
17
  'data-garden-id': COMPONENT_ID$1,
95
- 'data-garden-version': '8.57.0'
18
+ 'data-garden-version': '8.58.0'
96
19
  }).withConfig({
97
20
  displayName: "StyledBreadcrumb",
98
21
  componentId: "sc-11jrinn-0"
99
- })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";"], function (props) {
100
- return props.theme.fontSizes.md;
101
- }, function (props) {
102
- return props.theme.rtl && 'rtl';
103
- });
22
+ })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl');
104
23
  StyledBreadcrumb.defaultProps = {
105
24
  theme: DEFAULT_THEME
106
25
  };
@@ -116,57 +35,60 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
116
35
  height: 12,
117
36
  focusable: "false",
118
37
  viewBox: "0 0 12 12",
119
- "aria-hidden": "true"
38
+ "aria-hidden": "true",
39
+ role: "img"
120
40
  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
121
41
  fill: "currentColor",
122
42
  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"
123
43
  })));
124
44
  };
125
45
 
126
- var _excluded = ["theme"];
127
- var ValidChevronIcon = function ValidChevronIcon(props) {
128
- props.theme;
129
- var validProps = _objectWithoutProperties(props, _excluded);
46
+ const ValidChevronIcon = props => {
47
+ const {
48
+ theme,
49
+ ...validProps
50
+ } = props;
130
51
  return React__default.createElement(SvgChevronRightStroke, validProps);
131
52
  };
132
- var StyledChevronIcon = styled(ValidChevronIcon).attrs({
53
+ const StyledChevronIcon = styled(ValidChevronIcon).attrs({
133
54
  role: 'presentation',
134
55
  'aria-hidden': 'true'
135
56
  }).withConfig({
136
57
  displayName: "StyledChevronIcon",
137
58
  componentId: "sc-9r9qrm-0"
138
- })(["transform:", ";margin:0 ", ";color:", ";"], function (props) {
139
- return props.theme.rtl && "rotate(180deg);";
140
- }, function (props) {
141
- return em(props.theme.space.base, props.theme.fontSizes.md);
142
- }, function (props) {
143
- return getColor('neutralHue', 600, props.theme);
144
- });
59
+ })(["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));
145
60
  StyledChevronIcon.defaultProps = {
146
61
  theme: DEFAULT_THEME
147
62
  };
148
63
 
149
- var COMPONENT_ID = 'breadcrumbs.item';
150
- var linkStyles = function linkStyles(_ref) {
151
- var isCurrent = _ref.isCurrent;
152
- return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && "\n & > :link,\n & > :visited,\n & > :link:hover,\n & > :visited:hover,\n & > :link:focus,\n & > :visited:focus {\n color: inherit;\n }\n ");
64
+ const COMPONENT_ID = 'breadcrumbs.item';
65
+ const linkStyles = _ref => {
66
+ let {
67
+ isCurrent
68
+ } = _ref;
69
+ return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
70
+ & > :link,
71
+ & > :visited,
72
+ & > :link:hover,
73
+ & > :visited:hover,
74
+ & > :link:focus,
75
+ & > :visited:focus {
76
+ color: inherit;
77
+ }
78
+ `);
153
79
  };
154
- var StyledBreadcrumbItem = styled.li.attrs({
80
+ const StyledBreadcrumbItem = styled.li.attrs({
155
81
  'data-garden-id': COMPONENT_ID,
156
- 'data-garden-version': '8.57.0'
82
+ 'data-garden-version': '8.58.0'
157
83
  }).withConfig({
158
84
  displayName: "StyledBreadcrumbItem",
159
85
  componentId: "sc-r0suq7-0"
160
- })(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";"], function (props) {
161
- return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
162
- }, function (props) {
163
- return props.isCurrent ? getColor(props.theme.colors.neutralHue, 600) : 'inherit';
164
- }, linkStyles);
86
+ })(["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);
165
87
  StyledBreadcrumbItem.defaultProps = {
166
88
  theme: DEFAULT_THEME
167
89
  };
168
90
 
169
- var StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
91
+ const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
170
92
  'aria-hidden': true
171
93
  }).withConfig({
172
94
  displayName: "StyledCenteredBreadcrumbItem",
@@ -176,13 +98,14 @@ StyledCenteredBreadcrumbItem.defaultProps = {
176
98
  theme: DEFAULT_THEME
177
99
  };
178
100
 
179
- var Breadcrumb = forwardRef(function (props, ref) {
180
- var _useBreadcrumb = useBreadcrumb(),
181
- getContainerProps = _useBreadcrumb.getContainerProps,
182
- getCurrentPageProps = _useBreadcrumb.getCurrentPageProps;
183
- var totalChildren = Children.count(props.children);
184
- var mappedChildren = Children.map(props.children, function (child, index) {
185
- var isLastItem = index === totalChildren - 1;
101
+ const Breadcrumb = forwardRef((props, ref) => {
102
+ const {
103
+ getContainerProps,
104
+ getCurrentPageProps
105
+ } = useBreadcrumb();
106
+ const totalChildren = Children.count(props.children);
107
+ const mappedChildren = Children.map(props.children, (child, index) => {
108
+ const isLastItem = index === totalChildren - 1;
186
109
  if (isLastItem) {
187
110
  return React__default.createElement(StyledBreadcrumbItem, {
188
111
  isCurrent: true
@@ -190,12 +113,13 @@ var Breadcrumb = forwardRef(function (props, ref) {
190
113
  }
191
114
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledBreadcrumbItem, null, child), React__default.createElement(StyledCenteredBreadcrumbItem, null, React__default.createElement(StyledChevronIcon, null)));
192
115
  });
193
- var ariaLabel = useText(Breadcrumb, props, 'aria-label', 'Breadcrumb navigation');
194
- return React__default.createElement("nav", getContainerProps(_objectSpread2(_objectSpread2({}, props), {}, {
195
- ref: ref,
116
+ const ariaLabel = useText(Breadcrumb, props, 'aria-label', 'Breadcrumb navigation');
117
+ return React__default.createElement("nav", getContainerProps({
118
+ ...props,
119
+ ref,
196
120
  role: null,
197
121
  'aria-label': ariaLabel
198
- })), React__default.createElement(StyledBreadcrumb, null, mappedChildren));
122
+ }), React__default.createElement(StyledBreadcrumb, null, mappedChildren));
199
123
  });
200
124
  Breadcrumb.displayName = 'Breadcrumb';
201
125
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-breadcrumbs",
3
- "version": "8.57.0",
3
+ "version": "8.58.0",
4
4
  "description": "Components relating to breadcrumbs in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
32
32
  "styled-components": "^4.2.0 || ^5.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^8.57.0",
35
+ "@zendeskgarden/react-theming": "^8.58.0",
36
36
  "@zendeskgarden/svg-icons": "6.33.0"
37
37
  },
38
38
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "165b6a453118f93e9e760642b632ce3d31e3a231"
48
+ "gitHead": "07760a92573b619860e1252f6931467b9123f1b6"
49
49
  }