@zendeskgarden/react-tags 8.62.1 → 8.63.0

package/dist/index.cjs.js

@@ -7,15 +7,13 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var polished = require('polished');
 var reactTheming = require('@zendeskgarden/react-theming');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,14 +29,13 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -58,15 +55,15 @@ function _extends$1() {
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$2 = 'tags.avatar';
-const StyledAvatar = styled__default["default"](_ref => {
+const StyledAvatar = styled__default.default(_ref => {
   let {
     children,
     ...props
   } = _ref;
-  return React__default["default"].cloneElement(React.Children.only(children), props);
+  return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
@@ -76,14 +73,13 @@ StyledAvatar.defaultProps = {
 };
 
 const COMPONENT_ID$1 = 'tags.close';
-const StyledClose = styled__default["default"].div.attrs({
+const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1',
-  'aria-label': 'Press delete to remove'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-d6lrpn-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;cursor:pointer;padding:0;font-size:0;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["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;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -159,9 +155,9 @@ const 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 ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, reactTheming.getLineHeight(height, fontSize), fontSize, minWidth ? `${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);
 };
-const StyledTag = styled__default["default"].div.attrs({
+const StyledTag = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
@@ -172,9 +168,7 @@ StyledTag.defaultProps = {
 };
 
 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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -182,8 +176,7 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -191,13 +184,20 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-const CloseComponent = React.forwardRef((props, ref) => React__default["default"].createElement(StyledClose, _extends$1({
-  ref: ref
-}, props), React__default["default"].createElement(SvgXStroke, null)));
+const CloseComponent = React.forwardRef((props, ref) => {
+  const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Remove');
+  return React__namespace.default.createElement(StyledClose, _extends$1({
+    ref: ref,
+    "aria-label": ariaLabel
+  }, props, {
+    type: "button",
+    tabIndex: -1
+  }), React__namespace.default.createElement(SvgXStroke, null));
+});
 CloseComponent.displayName = 'Tag.Close';
 const Close = CloseComponent;
 
-const AvatarComponent = props => React__default["default"].createElement(StyledAvatar, props);
+const AvatarComponent = props => React__namespace.default.createElement(StyledAvatar, props);
 AvatarComponent.displayName = 'Tag.Avatar';
 const Avatar = AvatarComponent;
 
@@ -207,7 +207,7 @@ const TagComponent = React.forwardRef((_ref, ref) => {
     hue,
     ...otherProps
   } = _ref;
-  return React__default["default"].createElement(StyledTag, _extends$1({
+  return React__namespace.default.createElement(StyledTag, _extends$1({
     ref: ref,
     size: size,
     hue: hue
@@ -215,11 +215,11 @@ const TagComponent = React.forwardRef((_ref, ref) => {
 });
 TagComponent.displayName = 'Tag';
 TagComponent.propTypes = {
-  size: PropTypes__default["default"].oneOf(SIZE),
-  hue: PropTypes__default["default"].string,
-  isPill: PropTypes__default["default"].bool,
-  isRound: PropTypes__default["default"].bool,
-  isRegular: PropTypes__default["default"].bool
+  size: PropTypes__default.default.oneOf(SIZE),
+  hue: PropTypes__default.default.string,
+  isPill: PropTypes__default.default.bool,
+  isRound: PropTypes__default.default.bool,
+  isRegular: PropTypes__default.default.bool
 };
 TagComponent.defaultProps = {
   size: 'medium'

package/dist/index.esm.js

@@ -10,7 +10,7 @@ import React__default, { Children, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { readableColor, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight, useText } from '@zendeskgarden/react-theming';
 
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -38,7 +38,7 @@ const StyledAvatar = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
@@ -48,14 +48,13 @@ StyledAvatar.defaultProps = {
 };
 
 const COMPONENT_ID$1 = 'tags.close';
-const StyledClose = styled.div.attrs({
+const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1',
-  'aria-label': 'Press delete to remove'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-d6lrpn-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;cursor:pointer;padding:0;font-size:0;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["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;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledClose.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -133,7 +132,7 @@ const sizeStyles = props => {
 };
 const StyledTag = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
@@ -144,9 +143,7 @@ StyledTag.defaultProps = {
 };
 
 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",
@@ -154,8 +151,7 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -163,9 +159,16 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-const CloseComponent = forwardRef((props, ref) => React__default.createElement(StyledClose, _extends$1({
-  ref: ref
-}, props), React__default.createElement(SvgXStroke, null)));
+const CloseComponent = forwardRef((props, ref) => {
+  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Remove');
+  return React__default.createElement(StyledClose, _extends$1({
+    ref: ref,
+    "aria-label": ariaLabel
+  }, props, {
+    type: "button",
+    tabIndex: -1
+  }), React__default.createElement(SvgXStroke, null));
+});
 CloseComponent.displayName = 'Tag.Close';
 const Close = CloseComponent;
 

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

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 /**
- * @extends HTMLAttributes<HTMLDivElement>
+ * @extends HTMLAttributes<HTMLButtonElement>
  */
-export declare const Close: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Close: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -4,4 +4,8 @@
  * 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 declare const StyledClose: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/**
+ * 1. <button> element reset
+ * 2. text content reset
+ */
+export declare const StyledClose: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

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

@@ -8,7 +8,7 @@ import { HTMLAttributes } from 'react';
 export declare const SIZE: readonly ["small", "medium", "large"];
 export interface ITagProps extends HTMLAttributes<HTMLDivElement> {
     /** Adjusts font size and padding */
-    size?: typeof SIZE[number];
+    size?: (typeof SIZE)[number];
     /**
      * Sets the color of the tag. Refer to
      * [PALETTE](/components/palette#palette)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tags",
-  "version": "8.62.1",
+  "version": "8.63.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.7.0",
+    "@zendeskgarden/container-utilities": "^1.0.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.62.1",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }