@zendeskgarden/react-tags 8.46.0 → 8.48.0

package/dist/index.cjs.js

@@ -26,14 +26,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -98,13 +96,13 @@ function _objectWithoutProperties(source, excluded) {
 
 var _excluded$1 = ["children"];
 var COMPONENT_ID$2 = 'tags.avatar';
-var StyledAvatar = styled__default['default'](function (_ref) {
+var StyledAvatar = styled__default["default"](function (_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$1);
-  return React__default['default'].cloneElement(React.Children.only(children), props);
+  return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
@@ -116,9 +114,9 @@ StyledAvatar.defaultProps = {
 };
 
 var COMPONENT_ID$1 = 'tags.close';
-var StyledClose = styled__default['default'].div.attrs({
+var StyledClose = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.46.0',
+  'data-garden-version': '8.48.0',
   'aria-label': 'Press delete to remove'
 }).withConfig({
   displayName: "StyledClose",
@@ -201,9 +199,9 @@ var sizeStyles = function sizeStyles(props) {
   }
   return styled.css(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? "".concat(minWidth, "px") : "calc(".concat(padding * 2, "px + 1ch)"), height, reactTheming.getLineHeight(height, fontSize), fontSize, minWidth ? "".concat(minWidth - padding * 2, "px") : '1ch', StyledAvatar, props.theme.rtl ? 'right' : 'left', padding - avatarMargin, props.theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, props.theme.rtl ? 'left' : 'right', padding, borderRadius, height, height);
 };
-var StyledTag = styled__default['default'].div.attrs({
+var StyledTag = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
@@ -231,55 +229,63 @@ StyledTag.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-function _extends() { _extends = Object.assign || 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 _path;
 
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M3 9l6-6m0 6L3 3"
-});
+function _extends() { _extends = Object.assign || 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); }
 
-function SvgXStroke(props) {
+var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
-    viewBox: "0 0 12 12",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })));
+};
 
-var Close = React__default['default'].forwardRef(function (props, ref) {
-  return React__default['default'].createElement(StyledClose, _extends$1({
+var CloseComponent = React.forwardRef(function (props, ref) {
+  return React__default["default"].createElement(StyledClose, _extends$1({
     ref: ref
-  }, props), React__default['default'].createElement(SvgXStroke, null));
+  }, props), React__default["default"].createElement(SvgXStroke, null));
 });
-Close.displayName = 'Close';
+CloseComponent.displayName = 'Tag.Close';
+var Close = CloseComponent;
+
+var AvatarComponent = function AvatarComponent(props) {
+  return React__default["default"].createElement(StyledAvatar, props);
+};
+AvatarComponent.displayName = 'Tag.Avatar';
+var Avatar = AvatarComponent;
 
 var _excluded = ["size", "hue"];
-var Tag = React__default['default'].forwardRef(function (_ref, ref) {
+var TagComponent = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
       hue = _ref.hue,
       otherProps = _objectWithoutProperties(_ref, _excluded);
-  return React__default['default'].createElement(StyledTag, _extends$1({
+  return React__default["default"].createElement(StyledTag, _extends$1({
     ref: ref,
     size: size,
     hue: hue
   }, otherProps));
 });
-Tag.displayName = 'Tag';
-Tag.propTypes = {
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large']),
-  hue: PropTypes__default['default'].string,
-  isPill: PropTypes__default['default'].bool,
-  isRound: PropTypes__default['default'].bool,
-  isRegular: PropTypes__default['default'].bool
+TagComponent.displayName = 'Tag';
+TagComponent.propTypes = {
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large']),
+  hue: PropTypes__default["default"].string,
+  isPill: PropTypes__default["default"].bool,
+  isRound: PropTypes__default["default"].bool,
+  isRegular: PropTypes__default["default"].bool
 };
-Tag.defaultProps = {
+TagComponent.defaultProps = {
   size: 'medium'
 };
-Tag.Avatar = StyledAvatar;
+var Tag = TagComponent;
+Tag.Avatar = Avatar;
 Tag.Close = Close;
 
 exports.Tag = Tag;

package/dist/index.esm.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import React__default, { Children } from 'react';
+import React__default, { Children, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { readableColor, math } from 'polished';
@@ -74,7 +74,7 @@ var StyledAvatar = styled(function (_ref) {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
@@ -88,7 +88,7 @@ StyledAvatar.defaultProps = {
 var COMPONENT_ID$1 = 'tags.close';
 var StyledClose = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.46.0',
+  'data-garden-version': '8.48.0',
   'aria-label': 'Press delete to remove'
 }).withConfig({
   displayName: "StyledClose",
@@ -173,7 +173,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledTag = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
@@ -201,34 +201,41 @@ StyledTag.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function _extends() { _extends = Object.assign || 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 _path;
 
-var _ref = /*#__PURE__*/React.createElement("path", {
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M3 9l6-6m0 6L3 3"
-});
+function _extends() { _extends = Object.assign || 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); }
 
-function SvgXStroke(props) {
+var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
-    viewBox: "0 0 12 12",
     focusable: "false",
-    role: "presentation"
-  }, props), _ref);
-}
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })));
+};
 
-var Close = React__default.forwardRef(function (props, ref) {
+var CloseComponent = forwardRef(function (props, ref) {
   return React__default.createElement(StyledClose, _extends$1({
     ref: ref
   }, props), React__default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'Close';
+CloseComponent.displayName = 'Tag.Close';
+var Close = CloseComponent;
+
+var AvatarComponent = function AvatarComponent(props) {
+  return React__default.createElement(StyledAvatar, props);
+};
+AvatarComponent.displayName = 'Tag.Avatar';
+var Avatar = AvatarComponent;
 
 var _excluded = ["size", "hue"];
-var Tag = React__default.forwardRef(function (_ref, ref) {
+var TagComponent = forwardRef(function (_ref, ref) {
   var size = _ref.size,
       hue = _ref.hue,
       otherProps = _objectWithoutProperties(_ref, _excluded);
@@ -238,18 +245,19 @@ var Tag = React__default.forwardRef(function (_ref, ref) {
     hue: hue
   }, otherProps));
 });
-Tag.displayName = 'Tag';
-Tag.propTypes = {
+TagComponent.displayName = 'Tag';
+TagComponent.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   hue: PropTypes.string,
   isPill: PropTypes.bool,
   isRound: PropTypes.bool,
   isRegular: PropTypes.bool
 };
-Tag.defaultProps = {
+TagComponent.defaultProps = {
   size: 'medium'
 };
-Tag.Avatar = StyledAvatar;
+var Tag = TagComponent;
+Tag.Avatar = Avatar;
 Tag.Close = Close;
 
 export { Tag };

package/dist/typings/elements/Avatar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { HTMLAttributes } from 'react';
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
+export declare const Avatar: {
+    (props: HTMLAttributes<HTMLElement>): JSX.Element;
+    displayName: string;
+};

package/dist/typings/elements/Close.d.ts

@@ -8,5 +8,4 @@ import React from 'react';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const Close: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export default Close;
+export declare const Close: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Tag.d.ts

@@ -5,9 +5,9 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-import { StyledAvatar } from '../styled';
-import Close from './Close';
-interface ITagProps extends HTMLAttributes<HTMLDivElement> {
+import { Close } from './Close';
+import { Avatar } from './Avatar';
+export interface ITagProps extends HTMLAttributes<HTMLDivElement> {
     /** Adjusts font size and padding */
     size?: 'small' | 'medium' | 'large';
     /**
@@ -23,8 +23,10 @@ interface ITagProps extends HTMLAttributes<HTMLDivElement> {
     /** Applies regular (non-bold) font weight */
     isRegular?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<HTMLDivElement>> & {
-    Avatar: typeof StyledAvatar;
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<HTMLDivElement>> & {
+    Avatar: typeof Avatar;
     Close: typeof Close;
 };
-export default _default;

package/dist/typings/index.d.ts

@@ -4,4 +4,5 @@
  * 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 { default as Tag } from './elements/Tag';
+export { Tag } from './elements/Tag';
+export type { ITagProps } from './elements/Tag';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tags",
-  "version": "8.46.0",
+  "version": "8.48.0",
   "description": "Components relating to tags in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-utilities": "^0.6.0",
+    "@zendeskgarden/container-utilities": "^0.7.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"
   },
@@ -32,7 +32,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.46.0",
+    "@zendeskgarden/react-theming": "^8.48.0",
     "@zendeskgarden/svg-icons": "6.30.2"
   },
   "keywords": [
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "9e577b188009344c7ad0a035749930a4e19e400a"
+  "gitHead": "75f36aee62043004650c3eb2e1583b98a87d71f8"
 }