@decisiv/ui-components 2.0.1-alpha.154 → 2.0.1-alpha.156

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA2PjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA8PjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}

package/lib/components/Select/index.js

@@ -72,6 +72,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function Select(props, ref) {
   var actions = props.actions,
       clearButtonLabel = props.clearButtonLabel,
+      _props$hideClearButto = props.hideClearButton,
+      hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -246,7 +248,7 @@ function Select(props, ref) {
       "aria-owns": dropdownListId,
       clearButtonLabel: clearButtonLabel,
       disabled: disabled,
-      hasClearButton: Boolean(selectedValue),
+      hasClearButton: hideClearButton ? false : Boolean(selectedValue),
       id: targetId,
       inputFieldLabel: label,
       isPopoverVisible: isPopoverVisible,

package/lib/components/Select/index.test.js

@@ -187,16 +187,40 @@ describe('Select', function () {
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
+    describe('when "hideClearButton" is false', function () {
+      it('shows the clear button', function () {
+        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          defaultValue: cat0Opt0.id,
+          hideClearButton: false,
+          clearButtonLabel: "clear selection"
+        }))),
+            getByLabelText = _render7.getByLabelText;
+
+        expect(getByLabelText(/clear selection/i)).toBeInTheDocument();
+      });
+    });
+    describe('when "hideClearButton" is true', function () {
+      it('does not show the clear button', function () {
+        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          defaultValue: cat0Opt0.id,
+          hideClearButton: true,
+          clearButtonLabel: "clear selection"
+        }))),
+            queryByLabelText = _render8.queryByLabelText;
+
+        expect(queryByLabelText(/clear selection/i)).not.toBeInTheDocument();
+      });
+    });
     describe('clicking an option', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           defaultValue: opt1.id
         }))),
-            baseElement = _render7.baseElement,
-            getByText = _render7.getByText;
+            baseElement = _render9.baseElement,
+            getByText = _render9.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -205,11 +229,11 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('automatically updates the option label inside the input field', function () {
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: opt1.id
         }))),
-            baseElement = _render8.baseElement,
-            getByText = _render8.getByText;
+            baseElement = _render10.baseElement,
+            getByText = _render10.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -222,32 +246,32 @@ describe('Select', function () {
   });
   describe('when label hidden', function () {
     it('does not display the label element', function () {
-      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultvalue: opt1.id,
         hideLabel: true
       }))),
-          getByText = _render9.getByText;
+          getByText = _render11.getByText;
 
       expect(getByText(defaultProps.label, {
         selector: 'span'
       })).not.toBeVisible();
     });
     it('does display the input related to the label', function () {
-      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: opt1.id,
         hideLabel: true
       }))),
-          getByLabelText = _render10.getByLabelText;
+          getByLabelText = _render12.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toBeVisible();
     });
   });
   describe('when component is controlled', function () {
     it('displays the option label matching the value inside the input field', function () {
-      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: cat0Opt0.id
       }))),
-          getByText = _render11.getByText;
+          getByText = _render13.getByText;
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
@@ -255,12 +279,12 @@ describe('Select', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: opt1.id
         }))),
-            baseElement = _render12.baseElement,
-            getByText = _render12.getByText;
+            baseElement = _render14.baseElement,
+            getByText = _render14.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -269,12 +293,12 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('does NOT automatically update the option label inside the input field', function () {
-        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           value: opt1.id
         }))),
-            baseElement = _render13.baseElement,
-            getByText = _render13.getByText,
-            queryByText = _render13.queryByText;
+            baseElement = _render15.baseElement,
+            getByText = _render15.getByText,
+            queryByText = _render15.queryByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 

package/lib/components/Select/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Select/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAmEnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Select/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAwEnD,eAAe,MAAM,CAAC"}

package/lib/components/Select/schema.js

@@ -23,6 +23,7 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'Select'
 });
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'onChange', 'showCharacterCount']), {
+  hideClearButton: _reactDesc.PropTypes.bool.description('Whether or not to hide the clear button after selecting an item').defaultValue('false'),
   clearButtonLabel: _reactDesc.PropTypes.string.description("A hidden label value for the clear button. The select component's label is available within the string for clarity.").defaultValue('Clear {label} value'),
   containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the Select should be rendered in, or \"parent\" to render the Select in-place.").defaultValue('body'),
   defaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default.'),

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

@@ -11,6 +11,7 @@ interface BaseSelectProps extends ButtonHTMLAttributes<SelectRef>, Omit<BaseInpu
     onKeyDown?: KeyboardEventHandler;
 }
 export declare type SelectProps = BaseSelectProps & {
+    hideClearButton?: boolean;
     clearButtonLabel?: string;
     defaultValue?: string;
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}

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

@@ -0,0 +1,4 @@
+declare const Action: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default Action;
+//# sourceMappingURL=Action.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Action.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,MAAM,oEAcX,CAAC;AAEF,eAAO,MAAM,eAAe,oEAO3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Tag/Action.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionContainer = 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 = _interopRequireDefault(require("@decisiv/design-tokens"));
+
+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; } }
+
+var _designTokens$color = _designTokens.default.color,
+    baseColors = _designTokens$color.base,
+    interactionColors = _designTokens$color.interaction;
+var borderRadius = (0, _styledComponents.css)(["border-radius:0 ", " ", " 0;"], (0, _rem.default)(10), (0, _rem.default)(10));
+
+var Action = _styledComponents.default.div.withConfig({
+  displayName: "Action",
+  componentId: "sc-53eucd-0"
+})(["align-items:center;appearance:none;background-color:", ";border:0;color:", ";display:flex;height:100%;justify-content:flex-start;padding:0 0 0 ", ";width:", ";outline:none;", ""], (0, _toColorString.default)(baseColors.snowWhite), (0, _toColorString.default)(interactionColors.pacificOcean), (0, _rem.default)(4), (0, _rem.default)(_constants.ACTION_WIDTH), borderRadius);
+
+var ActionContainer = _styledComponents.default.div.withConfig({
+  displayName: "Action__ActionContainer",
+  componentId: "sc-53eucd-1"
+})(["height:", ";margin-right:2px;background-color:", ";box-shadow:", " 0 0 0 ", ";", ";"], (0, _rem.default)(18), (0, _toColorString.default)(baseColors.snowWhite), (0, _rem.default)(2), (0, _toColorString.default)(baseColors.snowWhite), borderRadius);
+
+exports.ActionContainer = ActionContainer;
+var _default = Action;
+exports.default = _default;

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

@@ -1,4 +1,4 @@
-export declare const ACTION_BUTTON_WIDTH = 22;
+export declare const ACTION_WIDTH = 20;
 export declare const CONTAINER_X_PADDING = 14;
 export declare const ICON_CONTENT_MARGIN = 5;
 export declare const MAX_CONTAINER_WIDTH = 300;

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}

package/lib/components/Tag/constants.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_BUTTON_WIDTH = void 0;
-var ACTION_BUTTON_WIDTH = 22;
-exports.ACTION_BUTTON_WIDTH = ACTION_BUTTON_WIDTH;
+exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_WIDTH = void 0;
+var ACTION_WIDTH = 20;
+exports.ACTION_WIDTH = ACTION_WIDTH;
 var CONTAINER_X_PADDING = 14;
 exports.CONTAINER_X_PADDING = CONTAINER_X_PADDING;
 var ICON_CONTENT_MARGIN = 5;

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

@@ -1,7 +1,7 @@
 import { RefForwardingComponent } from 'react';
 import { CommonUIColors } from '../../utils/commonUIColors';
 import { TagProps, TagRef } from './types';
-export { TagProps, TagRef, TagActionButtonRef } from './types';
+export { TagProps, TagRef, TagActionRef as TagActionButtonRef } from './types';
 export declare type ColorKeys = keyof CommonUIColors;
 declare const TagWithRef: RefForwardingComponent<TagRef, TagProps>;
 export default TagWithRef;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAkB,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAY5E,OAAO,EAA4B,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/D,oBAAY,SAAS,GAAG,MAAM,cAAc,CAAC;AA6L7C,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,cAAc,EACf,MAAM,4BAA4B,CAAC;AAapC,OAAO,EAGL,QAAQ,EACR,MAAM,EAEP,MAAM,SAAS,CAAC;AAQjB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/E,oBAAY,SAAS,GAAG,MAAM,cAAc,CAAC;AAkT7C,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,eAAe,UAAU,CAAC"}

package/lib/components/Tag/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "TagRef", {
 Object.defineProperty(exports, "TagActionButtonRef", {
   enumerable: true,
   get: function get() {
-    return _types.TagActionButtonRef;
+    return _types.TagActionRef;
   }
 });
 exports.default = void 0;
@@ -31,15 +31,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _designTokens = require("@decisiv/design-tokens");
+var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
 
 var _color = _interopRequireDefault(require("../../modifiers/color"));
 
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
 var _commonUIColors = require("../../utils/commonUIColors");
 
 var _Typography = require("../Typography");
 
-var _ActionButton = _interopRequireWildcard(require("./ActionButton"));
+var _Action = _interopRequireWildcard(require("./Action"));
 
 var _constants = require("./constants");
 
@@ -47,6 +49,10 @@ var _propTypes = require("./propTypes");
 
 var _types = require("./types");
 
+var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
+
+var _styleModifiers = require("../../utils/styleModifiers");
+
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,7 +77,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 borderColor = (0, _toColorString.default)(_designTokens.color.opacity.charcoal15);
+var _designTokens$color = _designTokens.default.color,
+    interactionColors = _designTokens$color.interaction,
+    statusColors = _designTokens$color.status;
 
 var getContentMaxWidth = function getContentMaxWidth(props) {
   var isSingleChild = props.isSingleChild,
@@ -81,27 +89,43 @@ var getContentMaxWidth = function getContentMaxWidth(props) {
   var containerBorder = 2;
   var baseWidth = _constants.MAX_CONTAINER_WIDTH - _constants.CONTAINER_X_PADDING - containerBorder;
   var valuesToSubtract = [];
-  !isSingleChild && valuesToSubtract.push(_constants.ACTION_BUTTON_WIDTH, actionBorder);
+  !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 colorModifiers = function colorModifiers(_ref) {
-  var variant = _ref.variant,
-      colorProp = _ref.color;
-  return variant === 'outline' ? (0, _color.default)(_objectSpread({}, _designTokens.color.base.snowWhite, {
-    fg: _designTokens.color.base.alaskanHusky
-  })) : (0, _color.default)(colorProp && colorProp in _commonUIColors.commonUIColors ? _commonUIColors.commonUIColors[colorProp] : _commonUIColors.commonUIColors.licoriceMousse);
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium',
+  dark: 'dark'
+};
+var FG_COLOR = {
+  pastel: _objectSpread({}, _designTokens.color.base.charcoal, {
+    alpha: 0.8
+  }),
+  bright: _designTokens.color.base.snowWhite,
+  dark: _designTokens.color.base.snowWhite
+};
+var BORDER_OPACITY = {
+  pastel: 0.1,
+  bright: 0.15,
+  dark: 0.3
 };
 
 var Content = _styledComponents.default.div.withConfig({
   displayName: "Tag__Content",
   componentId: "nifm8a-0"
-})(["align-items:center;border:0;display:flex;padding:0 ", ";", ";> svg{flex:1 0 auto;}* + *{margin-left:", ";}span{max-width:", ";}"], (0, _rem.default)(_constants.CONTAINER_X_PADDING / 2), function (_ref2) {
+})(["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 / 2), 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: BORDER_OPACITY[palette]
+  }));
+}, function (_ref2) {
   var isSingleChild = _ref2.isSingleChild;
-  return (0, _styledComponents.css)(["max-width:", ";"], isSingleChild ? '100%' : "calc(100% - ".concat(_constants.ACTION_BUTTON_WIDTH, "px)"));
+  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);
 
 var contentSVGColor = function contentSVGColor(_ref3) {
@@ -115,10 +139,61 @@ var contentSVGColor = function contentSVGColor(_ref3) {
   return null;
 };
 
-var Container = _styledComponents.default.div.withConfig({
+var getColorByProps = function getColorByProps(_ref4) {
+  var variant = _ref4.variant,
+      colorProp = _ref4.color,
+      _ref4$palette = _ref4.palette,
+      palette = _ref4$palette === void 0 ? 'bright' : _ref4$palette;
+  if (variant === 'outline') return _objectSpread({}, _designTokens.color.base.snowWhite, {
+    fg: _designTokens.color.base.alaskanHusky
+  });
+
+  if (colorProp && colorProp in _commonUIColors.commonUIThreeShadeColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[colorProp];
+    var fgColor = FG_COLOR[palette];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    return palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+  }
+
+  return _commonUIColors.commonUIColors.licoriceMousse;
+};
+
+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: BORDER_OPACITY[palette]
+  });
+
+  return (0, _styledComponents.css)(["", ";border:1px solid ", ";", ""], (0, _color.default)(getColorByProps(props)), (0, _toColorString.default)(borderColor), (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 ", ";", ";}"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:none;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 actionColors = {
+  normal: (0, _toColorString.default)(interactionColors.indianOcean),
+  danger: (0, _toColorString.default)(statusColors.danger.medium)
+};
+
+var actionColor = function actionColor(_ref5) {
+  var actionIntent = _ref5.actionIntent;
+  return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
+};
+
+var Container = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "Tag__Container",
   componentId: "nifm8a-1"
-})(["font-family:", ";font-size:", ";font-weight:", ";align-items:center;border-radius:", ";border:1px solid ", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";padding:0;", ";", ";", "{", ";}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default, (0, _rem.default)(10), borderColor, (0, _rem.default)(20), (0, _rem.default)(26), colorModifiers, contentSVGColor, _ActionButton.ActionButtonContainer, colorModifiers);
+})(["font-family:", ";font-size:", ";font-weight:", ";align-items:center;border-radius:", ";display:inline-flex;height:", ";max-width:100%;min-width:", ";padding:0;background-color:transparent;&:focus{border:1px solid ", ";", ";", "{height:", ";box-shadow:none;}}&: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, _toColorString.default)(_designTokens.color.base.blackSheep), (0, _focusRingWithColor.default)(_designTokens.color.opacity.charcoal40), _Action.ActionContainer, (0, _rem.default)(14), _Action.default, actionColor, colorModifiers, variantModifiers, contentSVGColor);
 
 function Tag(props, containerRef) {
   var action = props.action,
@@ -128,50 +203,44 @@ function Tag(props, containerRef) {
       actionRef = props.actionRef,
       Icon = props.icon,
       text = props.text,
-      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text"]);
+      palette = props.palette,
+      rest = _objectWithoutProperties(props, ["action", "actionAttributes", "actionIcon", "actionIntent", "actionRef", "icon", "text", "palette"]);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  var onActionFocus = (0, _react.useCallback)(function (e) {
-    var _ref4 = actionAttributes || {
+  var onTagFocus = (0, _react.useCallback)(function (e) {
+    var _ref6 = actionAttributes || {
       onFocus: undefined
     },
-        onFocus = _ref4.onFocus;
+        onFocus = _ref6.onFocus;
 
     setIsFocused(true);
     onFocus && onFocus(e);
   }, [actionAttributes]);
-  var onActionBlur = (0, _react.useCallback)(function (e) {
-    var _ref5 = actionAttributes || {
+  var onTagBlur = (0, _react.useCallback)(function (e) {
+    var _ref7 = actionAttributes || {
       onBlur: undefined
     },
-        onBlur = _ref5.onBlur;
+        onBlur = _ref7.onBlur;
 
     setIsFocused(false);
     onBlur && onBlur(e);
   }, [actionAttributes]);
-  var Action = (0, _react.useMemo)(function () {
+  var ActionElement = (0, _react.useMemo)(function () {
     if (!text || !action || !actionIcon) {
       return null;
     }
 
     var ActionIcon = actionIcon;
-    return _react.default.createElement(_ActionButton.ActionButtonContainer, {
-      isFocused: isFocused
-    }, _react.default.createElement(_ActionButton.default, _extends({}, actionAttributes, {
-      ref: actionRef,
-      type: "button",
-      onBlur: onActionBlur,
-      onClick: action,
-      onFocus: onActionFocus,
-      actionIntent: actionIntent
-    }), _react.default.createElement(ActionIcon, {
+    return _react.default.createElement(_Action.ActionContainer, null, _react.default.createElement(_Action.default, {
+      ref: actionRef
+    }, _react.default.createElement(ActionIcon, {
       size: "small"
     })));
-  }, [text, action, actionRef, isFocused, actionIcon, actionIntent, onActionBlur, onActionFocus, actionAttributes]);
+  }, [text, action, actionRef, actionIcon]);
   var contentIsSingleChild = !action || !!action && !text;
   /**
    * We render the "content" twice below. The first one is visible to the user
@@ -182,9 +251,17 @@ function Tag(props, containerRef) {
    * seconds content component, and calculate the max width of the container.
    */
 
-  return _react.default.createElement(Container, _extends({}, rest, {
-    ref: containerRef
+  return _react.default.createElement(Container, _extends({}, rest, actionAttributes, {
+    isSingleChild: contentIsSingleChild,
+    palette: palette,
+    ref: containerRef,
+    onBlur: onTagBlur,
+    onClick: action,
+    onFocus: onTagFocus,
+    isFocused: isFocused,
+    actionIntent: actionIntent
   }), _react.default.createElement(Content, {
+    palette: palette,
     hasIcon: !!Icon,
     isSingleChild: contentIsSingleChild
   }, Icon && _react.default.createElement(Icon, {
@@ -194,7 +271,7 @@ function Tag(props, containerRef) {
     color: "inherit",
     size: "small",
     truncate: true
-  }, text)), Action);
+  }, text)), ActionElement);
 }
 
 var TagWithRef = (0, _react.forwardRef)(Tag); // @ts-ignore