@zendeskgarden/react-tags 8.62.2 → 8.63.0

package/dist/index.cjs.js

@@ -63,7 +63,7 @@ const StyledAvatar = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
@@ -73,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.2',
-  '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
 };
@@ -158,7 +157,7 @@ const sizeStyles = props => {
 };
 const StyledTag = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
@@ -169,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",
@@ -179,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",
@@ -188,9 +184,16 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-const CloseComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledClose, _extends$1({
-  ref: ref
-}, props), React__namespace.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;
 

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.2'
+  '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.2',
-  '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.2'
+  '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.2",
+  "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.2",
+    "@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": "27a7d6c021f3360396af60d51ecbf66e9076a405"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }