@zendeskgarden/react-tags 9.0.0-next.7 → 9.0.0-next.8

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.
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import '../styled/StyledTag.js';
9
+ import { StyledAvatar } from '../styled/StyledAvatar.js';
10
+ import '../styled/StyledClose.js';
11
+
12
+ const AvatarComponent = props => React__default.createElement(StyledAvatar, props);
13
+ AvatarComponent.displayName = 'Tag.Avatar';
14
+ const Avatar = AvatarComponent;
15
+
16
+ export { Avatar };
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import '../styled/StyledTag.js';
9
+ import '../styled/StyledAvatar.js';
10
+ import { StyledClose } from '../styled/StyledClose.js';
11
+ import SvgXStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js';
12
+ import { useText } from '@zendeskgarden/react-theming';
13
+
14
+ const CloseComponent = forwardRef((props, ref) => {
15
+ const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Remove');
16
+ return React__default.createElement(StyledClose, Object.assign({
17
+ ref: ref,
18
+ "aria-label": ariaLabel
19
+ }, props, {
20
+ type: "button",
21
+ tabIndex: -1
22
+ }), React__default.createElement(SvgXStroke, null));
23
+ });
24
+ CloseComponent.displayName = 'Tag.Close';
25
+ const Close = CloseComponent;
26
+
27
+ export { Close };
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import { SIZE } from '../types/index.js';
10
+ import { StyledTag } from '../styled/StyledTag.js';
11
+ import '../styled/StyledAvatar.js';
12
+ import '../styled/StyledClose.js';
13
+ import { Close } from './Close.js';
14
+ import { Avatar } from './Avatar.js';
15
+
16
+ const TagComponent = forwardRef((_ref, ref) => {
17
+ let {
18
+ size,
19
+ hue,
20
+ ...otherProps
21
+ } = _ref;
22
+ return React__default.createElement(StyledTag, Object.assign({
23
+ ref: ref,
24
+ size: size,
25
+ hue: hue
26
+ }, otherProps));
27
+ });
28
+ TagComponent.displayName = 'Tag';
29
+ TagComponent.propTypes = {
30
+ size: PropTypes.oneOf(SIZE),
31
+ hue: PropTypes.string,
32
+ isPill: PropTypes.bool,
33
+ isRound: PropTypes.bool,
34
+ isRegular: PropTypes.bool
35
+ };
36
+ TagComponent.defaultProps = {
37
+ size: 'medium'
38
+ };
39
+ const Tag = TagComponent;
40
+ Tag.Avatar = Avatar;
41
+ Tag.Close = Close;
42
+
43
+ export { Tag };
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ export { Tag } from './elements/Tag.js';
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import * as React from 'react';
8
+
9
+ var _path;
10
+ 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); }
11
+ var SvgXStroke = function SvgXStroke(props) {
12
+ return /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: 12,
15
+ height: 12,
16
+ focusable: "false",
17
+ viewBox: "0 0 12 12",
18
+ "aria-hidden": "true"
19
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
20
+ stroke: "currentColor",
21
+ strokeLinecap: "round",
22
+ d: "M3 9l6-6m0 6L3 3"
23
+ })));
24
+ };
25
+
26
+ export { SvgXStroke as default };
@@ -0,0 +1,29 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import React__default, { Children } from 'react';
9
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10
+
11
+ const COMPONENT_ID = 'tags.avatar';
12
+ const StyledAvatar = styled(_ref => {
13
+ let {
14
+ children,
15
+ ...props
16
+ } = _ref;
17
+ return React__default.cloneElement(Children.only(children), props);
18
+ }).attrs({
19
+ 'data-garden-id': COMPONENT_ID,
20
+ 'data-garden-version': '9.0.0-next.8'
21
+ }).withConfig({
22
+ displayName: "StyledAvatar",
23
+ componentId: "sc-3kdmgt-0"
24
+ })(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
25
+ StyledAvatar.defaultProps = {
26
+ theme: DEFAULT_THEME
27
+ };
28
+
29
+ export { StyledAvatar };
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+
10
+ const COMPONENT_ID = 'tags.close';
11
+ const StyledClose = styled.button.attrs({
12
+ 'data-garden-id': COMPONENT_ID,
13
+ 'data-garden-version': '9.0.0-next.8'
14
+ }).withConfig({
15
+ displayName: "StyledClose",
16
+ componentId: "sc-d6lrpn-0"
17
+ })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
18
+ StyledClose.defaultProps = {
19
+ theme: DEFAULT_THEME
20
+ };
21
+
22
+ export { StyledClose };
@@ -1,63 +1,14 @@
1
1
  /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
-
8
- import * as React from 'react';
9
- import React__default, { Children, forwardRef } from 'react';
10
- import PropTypes from 'prop-types';
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
11
7
  import styled, { css } from 'styled-components';
12
8
  import { readableColor, math } from 'polished';
13
- import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColorV8, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
14
-
15
- function _extends$1() {
16
- _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
17
- for (var i = 1; i < arguments.length; i++) {
18
- var source = arguments[i];
19
- for (var key in source) {
20
- if (Object.prototype.hasOwnProperty.call(source, key)) {
21
- target[key] = source[key];
22
- }
23
- }
24
- }
25
- return target;
26
- };
27
- return _extends$1.apply(this, arguments);
28
- }
29
-
30
- const SIZE = ['small', 'medium', 'large'];
31
-
32
- const COMPONENT_ID$2 = 'tags.avatar';
33
- const StyledAvatar = styled(_ref => {
34
- let {
35
- children,
36
- ...props
37
- } = _ref;
38
- return React__default.cloneElement(Children.only(children), props);
39
- }).attrs({
40
- 'data-garden-id': COMPONENT_ID$2,
41
- 'data-garden-version': '9.0.0-next.7'
42
- }).withConfig({
43
- displayName: "StyledAvatar",
44
- componentId: "sc-3kdmgt-0"
45
- })(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
46
- StyledAvatar.defaultProps = {
47
- theme: DEFAULT_THEME
48
- };
49
-
50
- const COMPONENT_ID$1 = 'tags.close';
51
- const StyledClose = styled.button.attrs({
52
- 'data-garden-id': COMPONENT_ID$1,
53
- 'data-garden-version': '9.0.0-next.7'
54
- }).withConfig({
55
- displayName: "StyledClose",
56
- componentId: "sc-d6lrpn-0"
57
- })(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
58
- StyledClose.defaultProps = {
59
- theme: DEFAULT_THEME
60
- };
9
+ import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
10
+ import { StyledAvatar } from './StyledAvatar.js';
11
+ import { StyledClose } from './StyledClose.js';
61
12
 
62
13
  const COMPONENT_ID = 'tags.tag_view';
63
14
  const colorStyles = props => {
@@ -133,7 +84,7 @@ const sizeStyles = props => {
133
84
  };
134
85
  const StyledTag = styled.div.attrs({
135
86
  'data-garden-id': COMPONENT_ID,
136
- 'data-garden-version': '9.0.0-next.7'
87
+ 'data-garden-version': '9.0.0-next.8'
137
88
  }).withConfig({
138
89
  displayName: "StyledTag",
139
90
  componentId: "sc-1jvbe03-0"
@@ -143,65 +94,4 @@ StyledTag.defaultProps = {
143
94
  theme: DEFAULT_THEME
144
95
  };
145
96
 
146
- var _path;
147
- 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); }
148
- var SvgXStroke = function SvgXStroke(props) {
149
- return /*#__PURE__*/React.createElement("svg", _extends({
150
- xmlns: "http://www.w3.org/2000/svg",
151
- width: 12,
152
- height: 12,
153
- focusable: "false",
154
- viewBox: "0 0 12 12",
155
- "aria-hidden": "true"
156
- }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
157
- stroke: "currentColor",
158
- strokeLinecap: "round",
159
- d: "M3 9l6-6m0 6L3 3"
160
- })));
161
- };
162
-
163
- const CloseComponent = forwardRef((props, ref) => {
164
- const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Remove');
165
- return React__default.createElement(StyledClose, _extends$1({
166
- ref: ref,
167
- "aria-label": ariaLabel
168
- }, props, {
169
- type: "button",
170
- tabIndex: -1
171
- }), React__default.createElement(SvgXStroke, null));
172
- });
173
- CloseComponent.displayName = 'Tag.Close';
174
- const Close = CloseComponent;
175
-
176
- const AvatarComponent = props => React__default.createElement(StyledAvatar, props);
177
- AvatarComponent.displayName = 'Tag.Avatar';
178
- const Avatar = AvatarComponent;
179
-
180
- const TagComponent = forwardRef((_ref, ref) => {
181
- let {
182
- size,
183
- hue,
184
- ...otherProps
185
- } = _ref;
186
- return React__default.createElement(StyledTag, _extends$1({
187
- ref: ref,
188
- size: size,
189
- hue: hue
190
- }, otherProps));
191
- });
192
- TagComponent.displayName = 'Tag';
193
- TagComponent.propTypes = {
194
- size: PropTypes.oneOf(SIZE),
195
- hue: PropTypes.string,
196
- isPill: PropTypes.bool,
197
- isRound: PropTypes.bool,
198
- isRegular: PropTypes.bool
199
- };
200
- TagComponent.defaultProps = {
201
- size: 'medium'
202
- };
203
- const Tag = TagComponent;
204
- Tag.Avatar = Avatar;
205
- Tag.Close = Close;
206
-
207
- export { Tag };
97
+ export { StyledTag };
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ const SIZE = ['small', 'medium', 'large'];
8
+
9
+ export { SIZE };
package/dist/index.cjs.js CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
-
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
8
7
  'use strict';
9
8
 
10
9
  var React = require('react');
@@ -37,21 +36,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
37
36
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
38
37
  var styled__default = /*#__PURE__*/_interopDefault(styled);
39
38
 
40
- function _extends$1() {
41
- _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
42
- for (var i = 1; i < arguments.length; i++) {
43
- var source = arguments[i];
44
- for (var key in source) {
45
- if (Object.prototype.hasOwnProperty.call(source, key)) {
46
- target[key] = source[key];
47
- }
48
- }
49
- }
50
- return target;
51
- };
52
- return _extends$1.apply(this, arguments);
53
- }
54
-
55
39
  const SIZE = ['small', 'medium', 'large'];
56
40
 
57
41
  const COMPONENT_ID$2 = 'tags.avatar';
@@ -63,7 +47,7 @@ const StyledAvatar = styled__default.default(_ref => {
63
47
  return React__namespace.default.cloneElement(React.Children.only(children), props);
64
48
  }).attrs({
65
49
  'data-garden-id': COMPONENT_ID$2,
66
- 'data-garden-version': '9.0.0-next.7'
50
+ 'data-garden-version': '9.0.0-next.8'
67
51
  }).withConfig({
68
52
  displayName: "StyledAvatar",
69
53
  componentId: "sc-3kdmgt-0"
@@ -75,7 +59,7 @@ StyledAvatar.defaultProps = {
75
59
  const COMPONENT_ID$1 = 'tags.close';
76
60
  const StyledClose = styled__default.default.button.attrs({
77
61
  'data-garden-id': COMPONENT_ID$1,
78
- 'data-garden-version': '9.0.0-next.7'
62
+ 'data-garden-version': '9.0.0-next.8'
79
63
  }).withConfig({
80
64
  displayName: "StyledClose",
81
65
  componentId: "sc-d6lrpn-0"
@@ -158,7 +142,7 @@ const sizeStyles = props => {
158
142
  };
159
143
  const StyledTag = styled__default.default.div.attrs({
160
144
  'data-garden-id': COMPONENT_ID,
161
- 'data-garden-version': '9.0.0-next.7'
145
+ 'data-garden-version': '9.0.0-next.8'
162
146
  }).withConfig({
163
147
  displayName: "StyledTag",
164
148
  componentId: "sc-1jvbe03-0"
@@ -187,7 +171,7 @@ var SvgXStroke = function SvgXStroke(props) {
187
171
 
188
172
  const CloseComponent = React.forwardRef((props, ref) => {
189
173
  const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Remove');
190
- return React__namespace.default.createElement(StyledClose, _extends$1({
174
+ return React__namespace.default.createElement(StyledClose, Object.assign({
191
175
  ref: ref,
192
176
  "aria-label": ariaLabel
193
177
  }, props, {
@@ -208,7 +192,7 @@ const TagComponent = React.forwardRef((_ref, ref) => {
208
192
  hue,
209
193
  ...otherProps
210
194
  } = _ref;
211
- return React__namespace.default.createElement(StyledTag, _extends$1({
195
+ return React__namespace.default.createElement(StyledTag, Object.assign({
212
196
  ref: ref,
213
197
  size: size,
214
198
  hue: hue
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tags",
3
- "version": "9.0.0-next.7",
3
+ "version": "9.0.0-next.8",
4
4
  "description": "Components relating to tags in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
10
10
  "url": "https://github.com/zendeskgarden/react-components/issues"
11
11
  },
12
12
  "main": "dist/index.cjs.js",
13
- "module": "dist/index.esm.js",
13
+ "module": "dist/esm/index.js",
14
14
  "files": [
15
15
  "dist"
16
16
  ],
@@ -26,13 +26,13 @@
26
26
  "prop-types": "^15.5.7"
27
27
  },
28
28
  "peerDependencies": {
29
- "@zendeskgarden/react-theming": "^9.0.0",
29
+ "@zendeskgarden/react-theming": ">=9.0.0-next",
30
30
  "react": ">=16.8.0",
31
31
  "react-dom": ">=16.8.0",
32
32
  "styled-components": "^5.3.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.0.0-next.7",
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.8",
36
36
  "@zendeskgarden/svg-icons": "7.0.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": "50a2b45b2e237a490a6d460818d33498b92479ec"
48
+ "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
49
49
  }