1 | "use strict";
|
2 |
|
3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 |
|
10 | var React = _interopRequireWildcard(require("react"));
|
11 |
|
12 | var _overrides = require("../helpers/overrides.js");
|
13 |
|
14 | var _styledComponents = require("./styled-components.js");
|
15 |
|
16 | var _constants = require("./constants.js");
|
17 |
|
18 | var _utils = require("./utils.js");
|
19 |
|
20 | var _focusVisible = require("../utils/focusVisible.js");
|
21 |
|
22 | function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
23 |
|
24 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
25 |
|
26 | 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); }
|
27 |
|
28 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
29 |
|
30 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
31 |
|
32 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
33 |
|
34 | function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
35 |
|
36 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
37 |
|
38 | var Tag = React.forwardRef(function (props, ref) {
|
39 | var _SIZE$small$SIZE$medi;
|
40 |
|
41 | var children = props.children,
|
42 | _props$closeable = props.closeable,
|
43 | closeable = _props$closeable === void 0 ? true : _props$closeable,
|
44 | color = props.color,
|
45 | _props$size = props.size,
|
46 | size = _props$size === void 0 ? _constants.SIZE.small : _props$size,
|
47 | _props$disabled = props.disabled,
|
48 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
49 | _props$isFocused = props.isFocused,
|
50 | isFocused = _props$isFocused === void 0 ? false : _props$isFocused,
|
51 | _props$isHovered = props.isHovered,
|
52 | isHovered = _props$isHovered === void 0 ? false : _props$isHovered,
|
53 | _props$kind = props.kind,
|
54 | kind = _props$kind === void 0 ? _constants.KIND.primary : _props$kind,
|
55 | _props$onActionClick = props.onActionClick,
|
56 | onActionClick = _props$onActionClick === void 0 ? function (event) {} : _props$onActionClick,
|
57 | _props$onActionKeyDow = props.onActionKeyDown,
|
58 | onActionKeyDown = _props$onActionKeyDow === void 0 ? function (event) {} : _props$onActionKeyDow,
|
59 | _props$onClick = props.onClick,
|
60 | onClick = _props$onClick === void 0 ? null : _props$onClick,
|
61 | _props$onKeyDown = props.onKeyDown,
|
62 | onKeyDown = _props$onKeyDown === void 0 ? null : _props$onKeyDown,
|
63 | _props$overrides = props.overrides,
|
64 | overrides = _props$overrides === void 0 ? {} : _props$overrides,
|
65 | title = props.title,
|
66 | _props$variant = props.variant,
|
67 | variant = _props$variant === void 0 ? _constants.VARIANT.light : _props$variant;
|
68 |
|
69 | var _React$useState = React.useState(false),
|
70 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
71 | focusVisible = _React$useState2[0],
|
72 | setFocusVisible = _React$useState2[1];
|
73 |
|
74 | function handleFocus(event) {
|
75 | if ((0, _focusVisible.isFocusVisible)(event)) {
|
76 | setFocusVisible(true);
|
77 | }
|
78 | }
|
79 |
|
80 | function handleBlur(event) {
|
81 | if (focusVisible !== false) {
|
82 | setFocusVisible(false);
|
83 | }
|
84 | }
|
85 |
|
86 | function handleKeyDown(event) {
|
87 | if (event.currentTarget !== event.target) {
|
88 | return;
|
89 | }
|
90 |
|
91 | var key = event.key;
|
92 |
|
93 | if (onClick && key === 'Enter') {
|
94 | onClick(event);
|
95 | }
|
96 |
|
97 | if (closeable && (key === 'Backspace' || key === 'Delete')) {
|
98 | onActionClick(event);
|
99 | onActionKeyDown(event);
|
100 | }
|
101 |
|
102 | if (onKeyDown) {
|
103 | onKeyDown(event);
|
104 | }
|
105 | }
|
106 |
|
107 | var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.Root),
|
108 | _getOverrides2 = _slicedToArray(_getOverrides, 2),
|
109 | Root = _getOverrides2[0],
|
110 | rootProps = _getOverrides2[1];
|
111 |
|
112 | var _getOverrides3 = (0, _overrides.getOverrides)(overrides.Action, _styledComponents.Action),
|
113 | _getOverrides4 = _slicedToArray(_getOverrides3, 2),
|
114 | Action = _getOverrides4[0],
|
115 | actionProps = _getOverrides4[1];
|
116 |
|
117 | var _getOverrides5 = (0, _overrides.getOverrides)(overrides.ActionIcon, _styledComponents.ActionIcon),
|
118 | _getOverrides6 = _slicedToArray(_getOverrides5, 2),
|
119 | ActionIcon = _getOverrides6[0],
|
120 | actionIconProps = _getOverrides6[1];
|
121 |
|
122 | var _getOverrides7 = (0, _overrides.getOverrides)(overrides.Text, _styledComponents.Text),
|
123 | _getOverrides8 = _slicedToArray(_getOverrides7, 2),
|
124 | Text = _getOverrides8[0],
|
125 | textProps = _getOverrides8[1];
|
126 |
|
127 | var clickable = typeof onClick === 'function';
|
128 | var rootHandlers = disabled ? {} : {
|
129 | onClick: onClick,
|
130 | onKeyDown: handleKeyDown
|
131 | };
|
132 | var actionHandlers = disabled ? {} : {
|
133 | onClick: function onClick(event) {
|
134 |
|
135 | event.stopPropagation();
|
136 | onActionClick(event);
|
137 | }
|
138 | };
|
139 | var sharedProps = {
|
140 | $clickable: clickable,
|
141 | $closeable: closeable,
|
142 | $color: color,
|
143 | $disabled: disabled,
|
144 | $isFocused: isFocused,
|
145 | $isHovered: isHovered,
|
146 | $kind: kind,
|
147 | $variant: variant,
|
148 | $isFocusVisible: focusVisible,
|
149 | $size: size
|
150 | };
|
151 | var titleText = title || (0, _utils.getTextFromChildren)(children);
|
152 | var isButton = (clickable || closeable) && !disabled;
|
153 | var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, '12'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, '16'), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, '20'), _SIZE$small$SIZE$medi)[size];
|
154 | return React.createElement(Root
|
155 | , _extends({
|
156 | ref: ref,
|
157 | "data-baseweb": "tag",
|
158 | "aria-label": isButton && closeable ? "".concat(typeof children === 'string' ? "".concat(children, ", ") : '', "close by backspace") : null,
|
159 | "aria-disabled": disabled ? true : null,
|
160 | role: isButton ? 'button' : null,
|
161 | tabIndex: isButton ? 0 : null
|
162 | }, rootHandlers, sharedProps, rootProps, {
|
163 | onFocus: (0, _focusVisible.forkFocus)(rootProps, handleFocus),
|
164 | onBlur: (0, _focusVisible.forkBlur)(rootProps, handleBlur)
|
165 | }), React.createElement(Text, _extends({
|
166 | title: titleText
|
167 | }, textProps), children), closeable ? React.createElement(Action, _extends({
|
168 | "aria-hidden": true,
|
169 | role: "presentation"
|
170 | }, actionHandlers, sharedProps, actionProps), React.createElement(ActionIcon, _extends({
|
171 | width: actionSize,
|
172 | height: actionSize,
|
173 | viewBox: "0 0 24 24",
|
174 | fill: "none",
|
175 | xmlns: "http://www.w3.org/2000/svg"
|
176 | }, actionIconProps), React.createElement("path", {
|
177 | fill: "currentColor",
|
178 | d: "M21.0999 5.09998L18.8999 2.90002L11.9999 9.90002L5.09985 2.90002L2.8999 5.09998L9.8999 12L2.8999 18.9L5.09985 21.1L11.9999 14.1L18.8999 21.1L21.0999 18.9L14.0999 12L21.0999 5.09998Z"
|
179 | }))) : null);
|
180 | });
|
181 | Tag.displayName = 'Tag';
|
182 | var _default = Tag;
|
183 | exports.default = _default; |
\ | No newline at end of file |