@decisiv/ui-components 2.0.1-alpha.173 → 2.0.1-alpha.175

package/lib/atoms/InputField/index.d.ts

@@ -42,7 +42,7 @@ export interface BaseInputFieldProps {
     showCharacterCount?: boolean;
     hideLabel?: boolean;
     style?: React.CSSProperties;
-    value: string;
+    value?: string;
     warningMessage?: string;
     isTextArea?: boolean;
     multiple?: boolean;

package/lib/atoms/InputField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2KD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2KD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}

package/lib/components/Button/StyledButton.d.ts

@@ -6,6 +6,7 @@ export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButton
     minWidth?: string;
     size: Size;
     variant?: Variant;
+    loading?: boolean;
 }
 declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
 export default StyledButton;

package/lib/components/Button/StyledButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AAuKnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AA6LnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Button/StyledButton.js

@@ -47,8 +47,8 @@ var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'var
     dark: (0, _styledComponents.css)(["background-color:", ";color:", ";&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){background-color:", ";color:", ";}"], _colors.interactionPrimaryLightFg, _colors.interactionPrimaryLight, _colors.focusRingColors.dark.inverted.primary.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.inverted.primary.shadow), _colors.snowWhiteAlpha, _colors.interactionPrimaryLightFg)
   },
   ghost: {
-    light: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], _colors.interactionPrimaryLight, _colors.focusRingColors.light.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.light.ghost.shadow), _colors.interactionSecondaryLight, (0, _toColorString.default)(opacityColors.charcoal40)),
-    dark: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], _colors.interactionPrimaryDark, _colors.focusRingColors.dark.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.ghost.shadow), _colors.interactionSecondaryLight, (0, _toColorString.default)(opacityColors.charcoal40))
+    light: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}"], _colors.interactionPrimaryLight, _colors.focusRingColors.light.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.light.ghost.shadow), _colors.interactionSecondaryLight),
+    dark: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}"], _colors.interactionPrimaryDark, _colors.focusRingColors.dark.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.ghost.shadow), _colors.interactionSecondaryLight)
   }
 });
 /** map the Button size values to the matching font size scalar values */
@@ -83,7 +83,20 @@ var buttonSizeModifier = function buttonSizeModifier(_ref) {
 };
 
 var disabledStyles = function disabledStyles(_ref2) {
-  var variant = _ref2.variant;
+  var variant = _ref2.variant,
+      loading = _ref2.loading;
+
+  if (loading) {
+    if (variant === 'ghost') {
+      return (0, _styledComponents.css)(["&:disabled:disabled{border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.interactionSecondaryLight);
+    }
+
+    if (variant === 'inverted') {
+      return (0, _styledComponents.css)(["&:disabled:disabled{background-color:", ";border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.snowWhiteAlpha, _colors.interactionPrimaryLightFg);
+    }
+
+    return (0, _styledComponents.css)(["&:disabled:disabled{background-color:", ";border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.interactionSecondaryLight, _colors.interactionPrimaryLightFg);
+  }
 
   if (variant === 'ghost') {
     return (0, _styledComponents.css)(["&:disabled:disabled{background-color:transparent;color:", ";cursor:not-allowed;}"], (0, _toColorString.default)(opacityColors.charcoal40));

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAMhF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAkGrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAchF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAoJrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}

package/lib/components/Button/index.js

@@ -28,6 +28,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes2 = require("@decisiv/prop-types");
 
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Loading = _interopRequireDefault(require("../Loading"));
+
 var _StyledButton = _interopRequireDefault(require("./StyledButton"));
 
 var _schema = require("./schema");
@@ -72,7 +76,7 @@ var iconMarginProp = {
   left: 'margin-right',
   right: 'margin-left'
 };
-var sizeToIconSize = {
+var buttonSizeToSize = {
   small: 'small',
   medium: 'medium',
   large: 'medium',
@@ -94,24 +98,44 @@ var Button = function Button(props, ref) {
       iconPosition = props.iconPosition,
       intent = props.intent,
       kind = props.kind,
+      loading = props.loading,
+      propLoadingText = props.loadingText,
       minWidth = props.minWidth,
       onClick = props.onClick,
       size = props.size,
       text = props.text,
       variant = props.variant,
-      rest = _objectWithoutProperties(props, ["disabled", "icon", "iconPosition", "intent", "kind", "minWidth", "onClick", "size", "text", "variant"]);
+      rest = _objectWithoutProperties(props, ["disabled", "icon", "iconPosition", "intent", "kind", "loading", "loadingText", "minWidth", "onClick", "size", "text", "variant"]);
 
+  var translate = (0, _useTranslations.default)();
+  var loadingVariant = (0, _react.useMemo)(function () {
+    if (variant === 'ghost') return 'normal';
+    return 'inverted';
+  }, [variant]);
   var ButtonIcon = (0, _react.useMemo)(function () {
     var Icon = icon;
     return Icon && _react.default.createElement(IconContainer, {
       position: iconPosition,
       iconOnly: !text
     }, _react.default.createElement(Icon, {
-      size: sizeToIconSize[size]
+      size: buttonSizeToSize[size]
     }));
   }, [icon, iconPosition, size, text]);
+  var ButtonContent = (0, _react.useMemo)(function () {
+    if (loading) {
+      var loadingText = text ? translate(propLoadingText, 'button.loading') : undefined;
+      var showLoadingText = !!text || !!loadingText;
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Loading.default, {
+        variant: loadingVariant,
+        size: "small",
+        marginRight: showLoadingText ? 0.5 : 0
+      }), _react.default.createElement(_react.default.Fragment, null, showLoadingText && loadingText));
+    }
+
+    return _react.default.createElement(_react.default.Fragment, null, !!icon && iconPosition !== 'right' && ButtonIcon, !!text && text, !!icon && iconPosition === 'right' && ButtonIcon);
+  }, [ButtonIcon, icon, iconPosition, loading, loadingVariant, propLoadingText, text, translate]);
   return _react.default.createElement(_StyledButton.default, _extends({
-    disabled: disabled,
+    disabled: disabled || loading,
     intent: intent,
     kind: kind,
     minWidth: minWidth,
@@ -119,8 +143,9 @@ var Button = function Button(props, ref) {
     ref: ref,
     size: size,
     type: "button",
-    variant: variant
-  }, rest), !!icon && iconPosition !== 'right' && ButtonIcon, !!text && text, !!icon && iconPosition === 'right' && ButtonIcon);
+    variant: variant,
+    loading: loading
+  }, rest), ButtonContent);
 };
 
 var propTypes = {
@@ -133,6 +158,8 @@ var propTypes = {
   iconPosition: _propTypes.default.oneOf(['left', 'right']),
   intent: _propTypes.default.oneOf(['success', 'danger']),
   kind: _propTypes.default.oneOf(['primary', 'secondary']),
+  loading: _propTypes.default.bool,
+  loadingText: _propTypes.default.string,
   minWidth: _propTypes.default.string,
   size: _propTypes.default.oneOf(['small', 'medium', 'large', 'extraLarge']),
   text: _propTypes.default.string,
@@ -144,6 +171,8 @@ var defaultProps = {
   iconPosition: 'left',
   intent: undefined,
   kind: undefined,
+  loading: false,
+  loadingText: null,
   minWidth: undefined,
   size: 'medium',
   text: undefined,

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

@@ -117,39 +117,58 @@ describe('Button', function () {
 
     expect(container).toMatchSnapshot();
   });
+  describe('loading', function () {
+    it('renders loading with default text', function () {
+      var _renderButton5 = renderButton({
+        loading: true
+      }),
+          container = _renderButton5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('renders loading with custom message', function () {
+      var _renderButton6 = renderButton({
+        loading: true,
+        loadingText: 'Action...'
+      }),
+          container = _renderButton6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
   describe('kind=secondary', function () {
     it('renders correctly with the light theme', function () {
-      var _renderButton5 = renderButton({
+      var _renderButton7 = renderButton({
         kind: 'secondary'
       }),
-          container = _renderButton5.container;
+          container = _renderButton7.container;
 
       expect(container).toMatchSnapshot();
     });
     it('renders correctly with the dark theme', function () {
-      var _renderButton6 = renderButton({
+      var _renderButton8 = renderButton({
         kind: 'secondary'
       }, 'dark'),
-          container = _renderButton6.container;
+          container = _renderButton8.container;
 
       expect(container).toMatchSnapshot();
     });
     describe('inverted', function () {
       it('renders correctly with the light theme', function () {
-        var _renderButton7 = renderButton({
+        var _renderButton9 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }),
-            container = _renderButton7.container;
+            container = _renderButton9.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with the dark theme', function () {
-        var _renderButton8 = renderButton({
+        var _renderButton10 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }, 'dark'),
-            container = _renderButton8.container;
+            container = _renderButton10.container;
 
         expect(container).toMatchSnapshot();
       });

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAqCpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CA6CpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Button/schema.js

@@ -22,6 +22,8 @@ var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes(extensions) {
     iconPosition: _reactDesc.PropTypes.oneOf(['left', 'right']).description('In which side of the text the icon should be rendered').defaultValue('left'),
     intent: _reactDesc.PropTypes.oneOf(['success', 'danger']).description('Applies desired hover state of button'),
     kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).description('Applies inverted button styles'),
+    loading: _reactDesc.PropTypes.bool.description('Defines if the loading animation within the button should be displayed').defaultValue('false'),
+    loadingText: _reactDesc.PropTypes.string.description('Loading animation text'),
     minWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the min-width attribute'),
     variant: _reactDesc.PropTypes.oneOf(['normal', 'inverted']).description('Applies secondary button styles')
   }, extensions);

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

@@ -14,6 +14,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: IconPosition;
     intent?: Intent;
     kind?: Kind;
+    loading?: boolean;
+    loadingText?: string;
     minWidth?: string;
     ref?: Ref<ButtonRef>;
     size?: Size;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC/D,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC/D,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BaseInputFieldProps } from '../../atoms/InputField';
+export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
+    hiddenLabel?: boolean;
+    defaultTags?: string[];
+    tags?: string[];
+    onChange?: (value: string[]) => void;
+}
+export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, ...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":";AAeA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMzE,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,eAqMf"}

package/lib/components/TagInput/index.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TagInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+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 _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+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,
+      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel"]);
+
+  var clearButtonRef = (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 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 isDisabled = disabled || readOnly;
+  var handleNotifyChange = (0, _react.useCallback)(function (value) {
+    if (!onChange) return;
+    onChange(value);
+  }, [onChange]);
+  var handleAddTag = (0, _react.useCallback)(function (rawString) {
+    var text = rawString.replace(/\s+/g, ' ').trim();
+    if (!text || tagsToRender.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, tagsToRender, 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) {
+    if (isControlled) {
+      handleNotifyChange(tags.filter(function (tag) {
+        return tag !== text;
+      }));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = oldState.filter(function (tag) {
+        return tag !== text;
+      });
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [isControlled, handleNotifyChange, tags]);
+  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 () {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, []);
+  return _react.default.createElement(_styles.Wrapper, null, _react.default.createElement(_InputField.default, _extends({
+    ref: inputRef,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    disabled: disabled,
+    readOnly: readOnly,
+    label: label,
+    hideLabel: hiddenLabel
+  }, props), function (innerProps) {
+    return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
+      return _react.default.createElement(_Tag.default, {
+        key: tag,
+        size: "small",
+        text: tag,
+        palette: "pastel",
+        color: isDisabled ? 'licoriceMousse' : 'information',
+        action: isDisabled ? undefined : function () {
+          return handleRemoveTag(tag);
+        },
+        actionIntent: "danger",
+        actionAttributes: {
+          'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {
+            tagName: tag
+          })
+        },
+        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
+    })));
+  }));
+}