@decisiv/ui-components 2.0.1-alpha.97 → 2.0.1

package/lib/components/Tag/styles.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = exports.Content = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _palette = require("../../modifiers/palette");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
+var _Action = _interopRequireWildcard(require("./Action"));
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+var _designTokens$color = _designTokens.default.color,
+    interactionColors = _designTokens$color.interaction,
+    statusColors = _designTokens$color.status;
+
+var getContentMaxWidth = function getContentMaxWidth(props) {
+  var isSingleChild = props.isSingleChild,
+      hasIcon = props.hasIcon;
+  var iconWidth = 12;
+  var actionBorder = 1;
+  var containerBorder = 2;
+  var baseWidth = _constants.MAX_CONTAINER_WIDTH - _constants.CONTAINER_X_PADDING - containerBorder;
+  var valuesToSubtract = [];
+  !isSingleChild && valuesToSubtract.push(_constants.ACTION_WIDTH, actionBorder);
+  hasIcon && valuesToSubtract.push(iconWidth, _constants.ICON_CONTENT_MARGIN);
+  return (0, _rem.default)(valuesToSubtract.reduce(function (r, v) {
+    return r - v;
+  }, baseWidth));
+};
+
+var Content = _styledComponents.default.div.withConfig({
+  displayName: "styles__Content",
+  componentId: "sc-1sm93ik-0"
+})(["height:100%;color:inherit;align-items:center;border:0;display:flex;padding:0 ", ";border-right:1px solid ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING), function (_ref) {
+  var _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? 'bright' : _ref$palette;
+  return (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: _palette.BORDER_OPACITY[palette]
+  }));
+}, function (_ref2) {
+  var isSingleChild = _ref2.isSingleChild;
+  return (0, _styledComponents.css)(["max-width:", ";border-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_WIDTH, "px)"), isSingleChild ? '0' : '1px');
+}, (0, _rem.default)(_constants.ICON_CONTENT_MARGIN), getContentMaxWidth);
+
+exports.Content = Content;
+
+var contentSVGColor = function contentSVGColor(_ref3) {
+  var variant = _ref3.variant,
+      colorProp = _ref3.color;
+
+  if (variant === 'outline' && colorProp && colorProp in _commonUIColors.commonUIColors) {
+    return (0, _styledComponents.css)(["", " svg{color:", ";}"], Content, (0, _toColorString.default)(_commonUIColors.commonUIColors[colorProp]));
+  }
+
+  return null;
+};
+
+var actionColors = {
+  normal: (0, _toColorString.default)(interactionColors.indianOcean),
+  danger: (0, _toColorString.default)(statusColors.danger.medium)
+};
+
+var actionColor = function actionColor(_ref4) {
+  var actionIntent = _ref4.actionIntent;
+  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette;
+
+  var borderColor = _objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: _palette.BORDER_OPACITY[palette]
+  });
+
+  return (0, _styledComponents.css)(["", " ", " ", ""], (0, _palette.withBorderedPalette)(props), (0, _styleModifiers.when)('variant', 'outline', (0, _styledComponents.css)(["", ""], (0, _color.default)(_objectSpread({}, _designTokens.color.base.snowWhite, {
+    fg: _designTokens.color.base.alaskanHusky
+  })))), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:inset 0 0 0 ", " ", ";", "{border-color:transparent;}}"], (0, _rem.default)(100), (0, _toColorString.default)(borderColor), Content)));
+};
+
+var variantModifiers = function variantModifiers(props) {
+  var _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'normal' : _props$variant;
+  if (variant === 'normal') return undefined;
+  return (0, _styledComponents.css)(["border:1px solid ", ";", " &:focus{border:1px solid ", ";::before{", ";}}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{background-color:", ";}"], (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 0.07
+  })))), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40));
+};
+
+var sizeModifiers = function sizeModifiers(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  if (size === 'small') return undefined;
+  var mediumHeight = (0, _rem.default)(25);
+  var mediumRadius = (0, _rem.default)(15);
+  var mediumBorderRadius = "0 ".concat(mediumRadius, " ").concat(mediumRadius, " 0");
+  return (0, _styledComponents.css)(["height:", ";border-radius:", ";&:focus{::before{border-radius:", ";}}", "{padding-right:", ";}", ",", "{border-radius:", ";}"], mediumHeight, mediumRadius, mediumRadius, _Action.default, (0, _rem.default)(2), _Action.default, _Action.ActionContainer, mediumBorderRadius);
+};
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1sm93ik-1"
+})(["position:relative;font-family:", ";font-size:", ";font-weight:", ";align-items:center;justify-content:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";background-color:transparent;padding:0;", " &:focus{border:1px solid ", ";&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';border-radius:", ";", ";}}&:focus-visible{outline:none;}&:hover{", "{color:", ";}}", ";", ";", ";", ";"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), (0, _rem.default)(20), (0, _rem.default)(26), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["cursor:pointer;"])), (0, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _rem.default)(10), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.default, actionColor, sizeModifiers, colorModifiers, variantModifiers, contentSVGColor);
+
+exports.Container = Container;

package/lib/components/Tag/types.d.ts

@@ -1,24 +1,26 @@
-import React, { Ref, RefAttributes, ButtonHTMLAttributes } from 'react';
+import React, { Ref, RefAttributes, AriaAttributes, DOMAttributes } from 'react';
 import { CSSObject } from 'styled-components';
 import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 export declare type TagRef = HTMLDivElement;
-export declare type TagActionButtonRef = HTMLButtonElement;
+export declare type TagActionRef = HTMLDivElement;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
-export declare type ActionHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => unknown;
+export declare type ActionHandler = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => unknown;
 export declare type BaseProps = {
     color?: CommonUIColorKeys;
+    size?: 'medium' | 'small';
+    palette?: 'pastel' | 'bright' | 'dark';
     variant?: 'normal' | 'outline';
     style?: CSSObject;
 };
 declare type ContentProps = {
-    text?: string;
+    text?: React.ReactNode;
     icon?: IconComponent;
     action?: ActionHandler;
     actionIcon?: IconComponent;
 };
 declare type Text = {
-    text: string;
+    text: React.ReactNode;
 };
 declare type Icon = {
     icon: IconComponent;
@@ -34,14 +36,11 @@ declare type ConditionalProps = Text & {
 } | Icon & {
     action?: never;
 } | Text & Icon | Text & Action & ActionIcon | Text & Icon & Action & ActionIcon;
-export declare type ActionButtonContainerProps = {
-    isFocused: boolean;
-};
-export declare type ActionButtonExtraProps = {
-    actionRef?: Ref<TagActionButtonRef>;
+export declare type ActionExtraProps = {
+    actionRef?: Ref<TagActionRef>;
     actionIntent?: 'normal' | 'danger';
-    actionAttributes?: ButtonHTMLAttributes<HTMLButtonElement>;
+    actionAttributes?: AriaAttributes & DOMAttributes<HTMLDivElement>;
 };
-export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionButtonExtraProps;
+export declare type TagProps = RefAttributes<TagRef> & BaseProps & ContentProps & ConditionalProps & ActionExtraProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/components/Tag/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,kBAAkB,GAAG,iBAAiB,CAAC;AACnD,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KACnD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7B,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,0BAA0B,GAAG;IACvC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CAC5D,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,sBAAsB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EACZ,GAAG,EACH,aAAa,EACb,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,MAAM,GAAG,cAAc,CAAC;AACpC,oBAAY,YAAY,GAAG,cAAc,CAAC;AAC1C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,oBAAY,aAAa,GAAG,CAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAChD,OAAO,CAAC;AAEb,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AACtC,aAAK,IAAI,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AACpC,aAAK,MAAM,GAAG;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,CAAC;AACxC,aAAK,UAAU,GAAG;IAAE,UAAU,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhD,aAAK,gBAAgB,GACjB,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,GACjC,IAAI,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACzB,IAAI,GAAG,IAAI,GACX,IAAI,GAAG,MAAM,GAAG,UAAU,GAC1B,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtC,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;CACnE,CAAC;AAEF,oBAAY,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,GAC1C,SAAS,GACT,YAAY,GACZ,gBAAgB,GAChB,gBAAgB,CAAC"}

package/lib/components/TagInput/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TagInputProps, TagItem, TagObject } from './types';
+export { TagInputProps, TagItem, TagObject };
+export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, options, onSelect, maxTags, showMaxTagsCount, zIndex, ...props }: TagInputProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/TagInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI5D,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,eAkUf"}

package/lib/components/TagInput/index.js

@@ -0,0 +1,363 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TagInput;
+Object.defineProperty(exports, "TagInputProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.TagInputProps;
+  }
+});
+Object.defineProperty(exports, "TagItem", {
+  enumerable: true,
+  get: function get() {
+    return _types.TagItem;
+  }
+});
+Object.defineProperty(exports, "TagObject", {
+  enumerable: true,
+  get: function get() {
+    return _types.TagObject;
+  }
+});
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _breakpointObserver = require("@decisiv/breakpoint-observer");
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
+
+var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _DropdownList = _interopRequireDefault(require("../DropdownList"));
+
+var _types = require("./types");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { 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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function TagInput(_ref) {
+  var _ref$defaultTags = _ref.defaultTags,
+      defaultTags = _ref$defaultTags === void 0 ? [] : _ref$defaultTags,
+      tags = _ref.tags,
+      onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      label = _ref.label,
+      hiddenLabel = _ref.hiddenLabel,
+      options = _ref.options,
+      onSelect = _ref.onSelect,
+      maxTags = _ref.maxTags,
+      showMaxTagsCount = _ref.showMaxTagsCount,
+      zIndex = _ref.zIndex,
+      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel", "options", "onSelect", "maxTags", "showMaxTagsCount", "zIndex"]);
+
+  var clearButtonRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputVisible = _useState2[0],
+      setInputVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultTags),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerTags = _useState4[0],
+      setInnerTags = _useState4[1];
+
+  var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
+      _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
+      inputContainerRef = _useBreakpointObserve2[0],
+      dimensions = _useBreakpointObserve2[1].dimensions;
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isPopoverVisible = _useState6[0],
+      setIsPopoverVisible = _useState6[1];
+
+  var translate = (0, _useTranslations.default)();
+  var isControlled = (0, _react.useMemo)(function () {
+    return !!tags;
+  }, [tags]);
+  var tagsToRender = (0, _react.useMemo)(function () {
+    return tags || innerTags;
+  }, [tags, innerTags]);
+  var flatenTagsToRender = (0, _react.useMemo)(function () {
+    return tagsToRender.map(function (tag) {
+      return typeof tag === 'string' ? tag : tag.text;
+    });
+  }, [tagsToRender]);
+  var isDisabled = disabled || readOnly;
+  var handleNotifyChange = (0, _react.useCallback)(function (value) {
+    if (!onChange) return;
+    onChange(value);
+  }, [onChange]);
+  var hasOptions = (0, _react.useMemo)(function () {
+    return !(0, _isEmpty.default)(options);
+  }, [options]);
+  var handleAddTag = (0, _react.useCallback)(function (rawString) {
+    var text = rawString.replace(/\s+/g, ' ').trim();
+    if (!text || flatenTagsToRender.includes(text)) return;
+
+    if (isControlled) {
+      handleNotifyChange([].concat(_toConsumableArray(tags), [text]));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = [].concat(_toConsumableArray(oldState), [text]);
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [handleNotifyChange, tags, flatenTagsToRender, isControlled]);
+  var handleRemoveOnBackspace = (0, _react.useCallback)(function () {
+    if (isControlled) {
+      handleNotifyChange(_toConsumableArray(tags.slice(0, -1)));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = _toConsumableArray(oldState.slice(0, -1));
+
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [isControlled, handleNotifyChange, tags]);
+  var handleRemoveTag = (0, _react.useCallback)(function (text) {
+    return function (e) {
+      if (hasOptions) e.stopPropagation();
+
+      if (isControlled) {
+        handleNotifyChange(_toConsumableArray(tags).filter(function (tag) {
+          return typeof tag === 'string' ? tag !== text : tag.text !== text;
+        }));
+        return;
+      }
+
+      setInnerTags(function (oldState) {
+        var newState = _toConsumableArray(oldState).filter(function (tag) {
+          return typeof tag === 'string' ? tag !== text : tag.text !== text;
+        });
+
+        handleNotifyChange(newState);
+        return newState;
+      });
+    };
+  }, [isControlled, handleNotifyChange, tags, hasOptions]);
+  var handleOnKeyUp = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    var text = e.target.value;
+
+    if (!text && e.key === 'Backspace') {
+      handleRemoveOnBackspace();
+    }
+
+    if (text && e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag(text);
+      e.target.value = '';
+    }
+  }, [handleAddTag, handleRemoveOnBackspace]);
+  var handleFocus = (0, _react.useCallback)(function () {
+    setInputVisible(true);
+  }, []);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    // Suppress event if clicking in the X button
+    if (e.relatedTarget === clearButtonRef.current) {
+      return;
+    }
+
+    var text = e.target.value;
+    handleAddTag(text);
+    e.target.value = '';
+    setInputVisible(false);
+  }, [handleAddTag]);
+  var handleOnClearButtonClick = (0, _react.useCallback)(function (e) {
+    if (hasOptions) e.stopPropagation();
+
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, [hasOptions]);
+  var handleOnSelect = (0, _react.useCallback)(function (selection) {
+    var allSelection = Array.isArray(selection) ? selection : [selection];
+
+    if (onSelect) {
+      onSelect(allSelection);
+    }
+
+    if (isControlled) {
+      handleNotifyChange([].concat(_toConsumableArray(tags), _toConsumableArray(allSelection)));
+      setIsPopoverVisible(false);
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = [].concat(_toConsumableArray(oldState), _toConsumableArray(allSelection));
+      handleNotifyChange(newState);
+      return newState;
+    });
+    setIsPopoverVisible(false);
+  }, [handleNotifyChange, tags, isControlled, options, onSelect]);
+  /**
+   * Toggle the dropdown list.
+   */
+
+  var toggleIsPopoverVisible = (0, _react.useCallback)(function () {
+    setIsPopoverVisible(!isPopoverVisible);
+  }, [isPopoverVisible]);
+  /**
+   * Clicking anywhere within the InputField component (except the clear button) should toggle
+   * the dropdown list.
+   */
+
+  var handleContainerClick = (0, _react.useCallback)(function () {
+    toggleIsPopoverVisible();
+  }, [toggleIsPopoverVisible]); // When the dropdown is visible, clicking anywhere outside of the dropdown should close it.
+
+  var handleClickOutsideList = (0, _react.useCallback)(function () {
+    if (isPopoverVisible) {
+      setIsPopoverVisible(false);
+    }
+  }, [isPopoverVisible]);
+  (0, _react.useEffect)(function () {
+    if (isPopoverVisible) {
+      // Delay to ensure DOM updates are complete
+      var timer = setTimeout(function () {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
+      return function () {
+        return clearTimeout(timer);
+      }; // Cleanup the timer on unmount or state change
+    }
+
+    return function () {};
+  }, [isPopoverVisible, inputRef]);
+  (0, _useClickOutside.default)([listRef], handleClickOutsideList, {
+    capture: true
+  });
+  return _react.default.createElement(_styles.Wrapper, null, hasOptions && _react.default.createElement(_DropdownList.default, {
+    name: "".concat(label, "-dropdown-list"),
+    items: options,
+    borderRadius: "0",
+    minWidth: "".concat((dimensions.width || 0) + 1, "px"),
+    maxWidth: "unset",
+    showArrow: false,
+    target: inputContainerRef,
+    onChange: handleOnSelect,
+    listRef: listRef,
+    visible: isPopoverVisible,
+    zIndex: zIndex
+  }), _react.default.createElement(_InputField.default, _extends({
+    ref: inputRef,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    disabled: disabled,
+    readOnly: readOnly,
+    label: label,
+    hideLabel: hiddenLabel,
+    inputContainerRef: inputContainerRef,
+    onClick: handleContainerClick,
+    containerMaxCount: maxTags,
+    containerCount: tagsToRender.length,
+    showContainerCount: showMaxTagsCount
+  }, props), function (innerProps) {
+    return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
+      var _ref2 = typeof tag === 'string' ? {
+        text: tag
+      } : {
+        text: tag.text,
+        color: tag.color,
+        palette: tag.palette
+      },
+          text = _ref2.text,
+          _ref2$color = _ref2.color,
+          color = _ref2$color === void 0 ? 'information' : _ref2$color,
+          _ref2$palette = _ref2.palette,
+          palette = _ref2$palette === void 0 ? 'pastel' : _ref2$palette;
+
+      return _react.default.createElement(_Tag.default, {
+        key: text,
+        size: "small",
+        text: text,
+        palette: palette,
+        color: isDisabled ? 'licoriceMousse' : color,
+        action: isDisabled ? undefined : handleRemoveTag(text),
+        actionIntent: "danger",
+        actionAttributes: {
+          'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {
+            tagName: text
+          })
+        },
+        actionIcon: isDisabled ? undefined : _Times.default
+      });
+    }), _react.default.createElement(_styles.InputWrapper, null, _react.default.createElement(_styles.Input, _extends({}, innerProps, {
+      isVisible: inputVisible,
+      onKeyUp: handleOnKeyUp,
+      placeholder: " "
+    })), _react.default.createElement(_Button.default, {
+      ref: clearButtonRef,
+      style: {
+        display: 'none',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        paddingRight: (0, _rem.default)(_spacing.default.base * 0.8),
+        paddingLeft: (0, _rem.default)(_spacing.default.base * 0.8)
+      },
+      "aria-label": translate(undefined, 'tagInput.clearButton', {
+        inputLabel: label
+      }),
+      intent: "danger",
+      icon: _Times.default,
+      size: "small",
+      variant: "ghost",
+      onClick: handleOnClearButtonClick
+    })));
+  }));
+}