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

package/lib/components/Filter/StyledFilter.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
+
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
 var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
@@ -23,17 +25,42 @@ var _styleModifiers = require("../../utils/styleModifiers");
 
 var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
 
+var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
 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 activeStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.status.information.medium), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.status.information.medium), (0, _toColorString.default)(_color.default.base.snowWhite));
 var focusStyles = (0, _styledComponents.css)(["border:", " solid ", ";", ";"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_colors.focusRingColors.light.normal.secondary.shadow));
+var altActionVariantStyles = (0, _styledComponents.css)(["border:", " solid transparent;background:transparent;svg{color:", ";}&:hover{border:", " solid transparent;color:", ";background:transparent;svg{color:inherit;}}&:disabled:disabled{border:none;background:transparent;}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean));
+var variantKindMapper = {
+  primary: '',
+  primaryAlt: altActionVariantStyles,
+  secondary: altActionVariantStyles
+};
+
+var variant = function variant(_ref) {
+  var _ref$kind = _ref.kind,
+      kindProp = _ref$kind === void 0 ? 'primary' : _ref$kind;
+  return _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
+    simple: {
+      light: '',
+      dark: ''
+    },
+    action: {
+      light: variantKindMapper[kindProp],
+      dark: variantKindMapper[kindProp]
+    }
+  });
+};
 
 var StyledFilter = _styledComponents.default.button.withConfig({
   displayName: "StyledFilter",
   componentId: "sc-10cidio-0"
-})(["display:flex;background:none;padding:", " ", ";border:", " solid ", ";border-radius:", ";justify-content:center;align-items:center;outline:none;font:inherit;color:", ";&:focus{", "}", ";", ";&:hover{", ";}"], (0, _rem.default)(_spacing.default.base * 0.6), (0, _rem.default)(_spacing.default.base), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _rem.default)(2), (0, _toColorString.default)(_color.default.interaction.pacificOcean), focusStyles, _kind.default, (0, _styleModifiers.when)('active', activeStyles), _kind.hoverStyles);
+})(["display:flex;box-sizing:border-box;background:none;padding:", " ", ";border:", " solid ", ";border-radius:", ";justify-content:center;align-items:center;outline:none;font:inherit;color:", ";&:hover{", ";}&:disabled:disabled{background:", ";border:", " solid ", ";&,&:hover{color:", ";cursor:not-allowed;svg{color:", ";}", "{background-color:", ";svg{color:", ";}}}}", ";", ";&:focus{", ";}", ";"], (0, _rem.default)(_spacing.default.base * 0.6), (0, _rem.default)(_spacing.default.base), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _rem.default)(2), (0, _toColorString.default)(_color.default.interaction.pacificOcean), _kind.hoverStyles, (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _toColorString.default)(_color.default.opacity.charcoal40), (0, _toColorString.default)(_color.default.opacity.charcoal40), _IconWrapper.default, (0, _toColorString.default)(_color.default.opacity.charcoal15), (0, _toColorString.default)(_color.default.opacity.charcoal40), _kind.default, variant, focusStyles, (0, _styleModifiers.when)('active', activeStyles));
 
 var _default = StyledFilter;
 exports.default = _default;

package/lib/components/Filter/StyledLabel/index.d.ts

@@ -1,7 +1,7 @@
 import { FlexComponentProps } from '../../Flex';
-interface Props extends FlexComponentProps {
-    active: boolean;
-    hasBadge: boolean;
+import { FilterProps } from '../types';
+interface Props extends FlexComponentProps, Pick<FilterProps, 'active' | 'kind'> {
+    hasBadge?: boolean;
 }
 declare const StyledLabel: import("styled-components").StyledComponent<"span", any, Props, never>;
 export default StyledLabel;

package/lib/components/Filter/StyledLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/StyledLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,UAAU,KAAM,SAAQ,kBAAkB;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,WAAW,wEAMhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/StyledLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,UAAU,KACR,SAAQ,kBAAkB,EACxB,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,wEAehB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Filter/StyledLabel/index.js

@@ -11,18 +11,26 @@ var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
+var _designTokens = require("@decisiv/design-tokens");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var StyledLabel = _styledComponents.default.span.withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1r95cia-0"
-})(["margin-top:", ";margin-right:", ";margin-left:", ";"], (0, _rem.default)(_spacing.default.base * 0.2), function (_ref) {
-  var hasBadge = _ref.hasBadge,
-      marginRight = _ref.marginRight;
-  return hasBadge && marginRight ? (0, _rem.default)(_spacing.default.base) : '0';
+})(["font-size:", ";margin-right:", ";margin-left:", ";"], function (_ref) {
+  var _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'primary' : _ref$kind;
+  return kind === 'secondary' ? (0, _rem.default)(_designTokens.typography.size.alias.paragraph2) : (0, _rem.default)(_designTokens.typography.size.alias.default);
 }, function (_ref2) {
-  var hasBadge = _ref2.hasBadge,
-      marginLeft = _ref2.marginLeft;
+  var _ref2$hasBadge = _ref2.hasBadge,
+      hasBadge = _ref2$hasBadge === void 0 ? false : _ref2$hasBadge,
+      marginRight = _ref2.marginRight;
+  return hasBadge && marginRight ? (0, _rem.default)(_spacing.default.base) : '0';
+}, function (_ref3) {
+  var _ref3$hasBadge = _ref3.hasBadge,
+      hasBadge = _ref3$hasBadge === void 0 ? false : _ref3$hasBadge,
+      marginLeft = _ref3.marginLeft;
   return hasBadge && marginLeft ? (0, _rem.default)(_spacing.default.base) : '0';
 });
 

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

@@ -1,27 +1,6 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
-import { FilterProps } from './types';
-declare const Filter: {
-    ({ active: filterActive, variant, kind, onClick, ...rest }: FilterProps): JSX.Element;
-    propTypes: {
-        active: PropTypes.Requireable<boolean>;
-        variant: PropTypes.Requireable<string>;
-        kind: PropTypes.Requireable<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        text: PropTypes.Validator<string>;
-        badgeColor: PropTypes.Requireable<import("../../utils/commonUIColors").CommonUIColorKeys>;
-        badgeIcon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        count: PropTypes.Requireable<number>;
-    };
-    defaultProps: {
-        active: boolean;
-        variant: string;
-        onClick: null;
-        kind: string;
-        badgeIcon: null;
-        badgeColor: string;
-        count: undefined;
-    };
-};
+import React from 'react';
+import { SimpleFilterProps, ActionFilterProps } from './types';
+declare const Filter: React.ForwardRefExoticComponent<(ActionFilterProps & React.RefAttributes<HTMLButtonElement>) | (SimpleFilterProps & React.RefAttributes<HTMLButtonElement>)>;
+export { FilterProps } from './types';
 export default Filter;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWtC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CAsCX,CAAC;AAuBF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAe,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAK5E,QAAA,MAAM,MAAM,8JAgDX,CAAC;AA4BF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,eAAe,MAAM,CAAC"}

package/lib/components/Filter/index.js

@@ -3,17 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FilterProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.FilterProps;
+  }
+});
 exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _SimplePrimary = _interopRequireDefault(require("./SimplePrimary"));
+var _commonUIColors = require("../../utils/commonUIColors");
+
+var _types = require("./types");
 
 var _StyledFilter = _interopRequireDefault(require("./StyledFilter"));
 
-var _commonUIColors = require("../../utils/commonUIColors");
+var _SimplePrimary = _interopRequireDefault(require("./SimplePrimary"));
+
+var _ActionFilter = _interopRequireDefault(require("./ActionFilter"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,28 +43,26 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var components = {
-  simple: _SimplePrimary.default
-}; // variant uses basic
-
-var Filter = function Filter(_ref) {
-  var filterActive = _ref.active,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'simple' : _ref$variant,
-      _ref$kind = _ref.kind,
-      kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
-      onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, ["active", "variant", "kind", "onClick"]);
+var Filter = (0, _react.forwardRef)(function (props, ref) {
+  var filterActive = props.active,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'simple' : _props$variant,
+      _props$kind = props.kind,
+      kind = _props$kind === void 0 ? 'primary' : _props$kind,
+      onClick = props.onClick,
+      disabled = props.disabled,
+      rest = _objectWithoutProperties(props, ["active", "variant", "kind", "onClick", "disabled"]);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       active = _useState2[0],
       setActive = _useState2[1];
 
-  var Component = components[variant];
   var toggleStatus = (0, _react.useCallback)(function () {
-    return setActive(!active);
-  }, [active, setActive]);
+    if (variant === 'simple') {
+      setActive(!active);
+    }
+  }, [active, setActive, variant]);
   var handleOnClick = (0, _react.useCallback)(function (e) {
     if (typeof onClick === 'function') {
       onClick(e);
@@ -63,33 +71,37 @@ var Filter = function Filter(_ref) {
     }
   }, [onClick, toggleStatus]);
   return _react.default.createElement(_StyledFilter.default, _extends({
-    kind: kind,
+    ref: ref,
+    kind: variant === 'simple' ? 'primary' : kind,
+    variant: variant,
     tabIndex: 0,
     active: filterActive || active,
-    onClick: handleOnClick
-  }, rest), _react.default.createElement(Component, _extends({
-    active: active
-  }, rest)));
-};
+    onClick: handleOnClick,
+    disabled: disabled
+  }, rest), variant === 'simple' ? _react.default.createElement(_SimplePrimary.default, props) : _react.default.createElement(_ActionFilter.default, props));
+}); // @ts-ignore
 
 Filter.propTypes = {
   active: _propTypes.default.bool,
-  variant: _propTypes.default.oneOf(['simple']),
-  kind: _propTypes.default.oneOf(['primary']),
+  variant: _propTypes.default.oneOf(['simple', 'action']),
+  kind: _propTypes.default.oneOf(['primary', 'secondary']),
   onClick: _propTypes.default.func,
   text: _propTypes.default.string.isRequired,
   badgeColor: _propTypes.default.oneOf(_commonUIColors.commonUIColorKeys),
   badgeIcon: _propTypes.default.elementType,
-  count: _propTypes.default.number
+  count: _propTypes.default.number,
+  disabled: _propTypes.default.bool
 };
 Filter.defaultProps = {
   active: false,
   variant: 'simple',
-  onClick: null,
+  onClick: undefined,
   kind: 'primary',
-  badgeIcon: null,
+  badgeIcon: undefined,
   badgeColor: 'information',
-  count: undefined
+  count: undefined,
+  disabled: false
 };
+Filter.displayName = 'Filter';
 var _default = Filter;
 exports.default = _default;

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

@@ -12,12 +12,10 @@ describe('Filter', function () {
   describe('Simple primary variant', function () {
     it('renders label', function () {
       var _render = (0, _react2.render)(_react.default.createElement(_.default, {
-        "aria-label": "text sample",
         variant: "simple",
         text: "text sample"
       })),
-          container = _render.container,
-          queryByText = _render.queryByText;
+          container = _render.container;
 
       expect(container).toMatchSnapshot();
     });
@@ -25,7 +23,6 @@ describe('Filter', function () {
       var onClick = jest.fn();
 
       var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
-        "aria-label": "text sample",
         active: false,
         variant: "simple",
         text: "text",
@@ -38,4 +35,36 @@ describe('Filter', function () {
       expect(onClick).toHaveBeenCalled();
     });
   });
+  describe('Expect Disable to prevent OnClick', function () {
+    it('Prevent onClick', function () {
+      var onClick = jest.fn();
+
+      var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+        active: false,
+        variant: "simple",
+        text: "text",
+        onClick: onClick,
+        disabled: true
+      })),
+          getByText = _render3.getByText;
+
+      _react2.fireEvent.click(getByText(/text/));
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+  describe('kind', function () {
+    ['primary', 'primaryAlt', 'secondary'].forEach(function (kind) {
+      it("Renders ".concat(kind, " kind as expected"), function () {
+        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+          variant: "action",
+          text: "text sample",
+          kind: kind
+        })),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
 });

package/lib/components/Filter/kind.d.ts

@@ -1,6 +1,7 @@
 import theme from 'styled-theming';
-import { FlattenSimpleInterpolation as CSS } from 'styled-components';
-export declare const hoverStyles: CSS;
-declare const kindStyles: theme.ThemeSet;
+export declare const hoverStyles: import("styled-components").FlattenSimpleInterpolation;
+export declare const primaryStyle: import("styled-components").FlattenSimpleInterpolation;
+export declare const secondaryStyle: import("styled-components").FlattenSimpleInterpolation;
+declare const kindStyles: theme.VariantSet;
 export default kindStyles;
 //# sourceMappingURL=kind.d.ts.map

package/lib/components/Filter/kind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,OAAO,EAAO,0BAA0B,IAAI,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAU3E,eAAO,MAAM,WAAW,KAQvB,CAAC;AAyBF,QAAA,MAAM,UAAU,gBAGd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAInC,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAE1B,CAAC;AAEF,QAAA,MAAM,UAAU,kBAUd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/Filter/kind.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.hoverStyles = void 0;
+exports.default = exports.secondaryStyle = exports.primaryStyle = exports.hoverStyles = void 0;
 
-var _styledTheming = _interopRequireDefault(require("styled-theming"));
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
 var _styledComponents = require("styled-components");
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
 
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
@@ -21,25 +23,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var hoverStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.base.snowWhite));
 exports.hoverStyles = hoverStyles;
-var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles);
-// light and dark are the same ATM.
-var lightStyles = {
-  primary: primaryStyle
-};
-var darkStyles = {
-  primary: primaryStyle
-};
-var kindStyles = (0, _styledTheming.default)(_ConfigProvider.themeKeys.mode, {
-  light: function light(_ref) {
-    var _ref$kind = _ref.kind,
-        kind = _ref$kind === void 0 ? 'primary' : _ref$kind;
-    return lightStyles[kind];
+var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles, (0, _toColorString.default)(_color.default.opacity.charcoal40));
+exports.primaryStyle = primaryStyle;
+var secondaryStyle = (0, _styledComponents.css)(["height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2.4));
+exports.secondaryStyle = secondaryStyle;
+
+var kindStyles = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'kind', {
+  primary: {
+    light: primaryStyle,
+    dark: primaryStyle
   },
-  dark: function dark(_ref2) {
-    var _ref2$kind = _ref2.kind,
-        kind = _ref2$kind === void 0 ? 'primary' : _ref2$kind;
-    return darkStyles[kind];
+  secondary: {
+    light: secondaryStyle,
+    right: secondaryStyle
   }
 });
+
 var _default = kindStyles;
 exports.default = _default;

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

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

package/lib/components/Filter/schema.js

@@ -17,9 +17,14 @@ var makeFilterSchemaPropTypes = function makeFilterSchemaPropTypes(extensions) {
   return _objectSpread({
     text: _reactDesc.PropTypes.string.description("The Filter's text"),
     active: _reactDesc.PropTypes.bool.description("The Filter's active status. Use when you want to control the Filter with onClick.").defaultValue('false'),
-    badgeIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render'),
-    badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided.').defaultValue('information'),
-    count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered.")
+    badgeIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render, only usable with the "simple" variant'),
+    badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided. Only usable with the "simple" variant').defaultValue('information'),
+    count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered."),
+    disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false'),
+    kind: _reactDesc.PropTypes.oneOf(['primary', 'primaryAlt', 'secondary']).defaultValue('primary'),
+    variant: _reactDesc.PropTypes.oneOf(['simple', 'action']).description('Use the variant to define the type of filter that you want to use').defaultValue('simple'),
+    startIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render before the filter text, only usable with the "action" variant'),
+    endIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render after the filter text, only usable with the "action" variant')
   }, extensions);
 };
 

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

@@ -2,16 +2,30 @@ import { ButtonHTMLAttributes } from 'react';
 import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 import { TranslatedText } from '../../utils/useTranslations';
-export declare type Variant = 'simple';
-export declare type Kind = 'primary';
+export declare type Variant = 'simple' | 'action';
+export declare type Kind = 'primary' | 'primaryAlt' | 'secondary';
 export declare type IconComponent = (props: IconProps) => JSX.Element;
-export interface FilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    active?: boolean;
+export interface BaseFilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    kind?: Kind;
+    variant?: Variant;
+    text: TranslatedText;
     count?: number;
+    active?: boolean;
+    disabled?: boolean;
+}
+export interface SimpleFilterProps extends BaseFilterProps {
+    variant: 'simple';
     badgeIcon?: IconComponent;
     badgeColor?: CommonUIColorKeys;
-    kind?: Kind;
-    text: TranslatedText;
-    variant?: Variant;
+    startIcon?: never;
+    endIcon?: never;
+}
+export interface ActionFilterProps extends BaseFilterProps {
+    variant: 'action';
+    startIcon?: IconComponent;
+    endIcon?: IconComponent;
+    badgeIcon?: never;
+    badgeColor?: never;
 }
+export declare type FilterProps = SimpleFilterProps | ActionFilterProps;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,CAAC;AAC/B,oBAAY,IAAI,GAAG,SAAS,CAAC;AAC7B,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1C,oBAAY,IAAI,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;AAC1D,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,oBAAY,WAAW,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}

package/lib/components/JumpTo/JumpToMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JumpToMenu.d.ts","sourceRoot":"","sources":["../../../src/components/JumpTo/JumpToMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAa9E,OAAO,EAAc,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiH7D,QAAA,MAAM,iBAAiB,+EAAyB,CAAC;AAKjD,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"JumpToMenu.d.ts","sourceRoot":"","sources":["../../../src/components/JumpTo/JumpToMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAcf,OAAO,EAAc,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA4J7D,QAAA,MAAM,iBAAiB,+EAAyB,CAAC;AAKjD,eAAe,iBAAiB,CAAC"}

package/lib/components/JumpTo/JumpToMenu.js

@@ -15,6 +15,8 @@ var _focusWithoutScrolling = _interopRequireDefault(require("../../utils/focusWi
 
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
+var _useDebounce = _interopRequireDefault(require("../../utils/useDebounce"));
+
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Menu = _interopRequireDefault(require("../Menu"));
@@ -55,20 +57,30 @@ function JumpToMenu(props, forwardedRef) {
       globalOffset = props.offset,
       onKeyDown = props.onKeyDown,
       zIndex = props.zIndex,
-      rest = _objectWithoutProperties(props, ["items", "label", "offset", "onKeyDown", "zIndex"]);
+      _props$openOnMouseHov = props.openOnMouseHover,
+      openOnMouseHover = _props$openOnMouseHov === void 0 ? false : _props$openOnMouseHov,
+      rest = _objectWithoutProperties(props, ["items", "label", "offset", "onKeyDown", "zIndex", "openOnMouseHover"]);
 
   var translate = (0, _useTranslations.default)();
   var itemSelected = (0, _react.useRef)(false);
 
-  var _useState = (0, _react.useState)({
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPopoverVisible = _useState2[0],
+      setIsPopoverVisible = _useState2[1];
+
+  var debouncedVisible = (0, _useDebounce.default)(isPopoverVisible, 200);
+
+  var _useState3 = (0, _react.useState)({
     hide: function hide() {},
     isVisible: false,
     show: function show() {},
-    toggle: function toggle() {}
+    toggle: function toggle() {},
+    contentNode: null
   }),
-      _useState2 = _slicedToArray(_useState, 2),
-      popover = _useState2[0],
-      setPopover = _useState2[1];
+      _useState4 = _slicedToArray(_useState3, 2),
+      popover = _useState4[0],
+      setPopover = _useState4[1];
 
   var buttonRef = (0, _react.useRef)(null);
   var popoverRef = (0, _react.useCallback)(setPopover, [popover]);
@@ -102,6 +114,7 @@ function JumpToMenu(props, forwardedRef) {
         selector = _ref2.selector;
     itemSelected.current = true;
     popover.hide();
+    setIsPopoverVisible(false);
     selector && (0, _utils.jumpToSelector)(selector, globalOffset, itemOffset);
   };
 
@@ -111,6 +124,29 @@ function JumpToMenu(props, forwardedRef) {
   var onHide = (0, _react.useCallback)(function () {
     itemSelected && !itemSelected.current && buttonRef && buttonRef.current && (0, _focusWithoutScrolling.default)(buttonRef.current);
   }, []);
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    setIsPopoverVisible(true);
+
+    if (popover && popover.contentNode) {
+      (0, _focusWithoutScrolling.default)(popover.contentNode);
+    }
+  }, [openOnMouseHover, popover, popover && popover.contentNode]);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    setIsPopoverVisible(false);
+  }, [openOnMouseHover, popover]);
+  var handleMouseEnterButton = (0, _react.useCallback)(function () {
+    if (openOnMouseHover) {
+      buttonRef && buttonRef.current && (0, _focusWithoutScrolling.default)(buttonRef.current);
+      setIsPopoverVisible(true);
+
+      if (popover && popover.contentNode) {
+        (0, _focusWithoutScrolling.default)(popover.contentNode);
+      }
+    }
+  }, [openOnMouseHover, buttonRef, popover && popover.contentNode]);
+  (0, _react.useEffect)(function () {
+    if (!debouncedVisible) itemSelected.current = false;
+  }, [debouncedVisible, itemSelected.current]);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Button.default, _extends({
     icon: popover.isVisible ? _ChevronUp.default : _ChevronDown.default,
     iconPosition: "right",
@@ -119,16 +155,21 @@ function JumpToMenu(props, forwardedRef) {
     ref: buttonRef,
     size: "small",
     text: translate(label, 'jumpTo.menuLabel'),
-    variant: "ghost"
+    variant: "ghost",
+    onMouseEnter: handleMouseEnterButton,
+    onMouseLeave: handleMouseLeave
   }, popover.ariaAttributes)), _react.default.createElement(_Popover.default, {
     contentRole: "menu",
-    manageEvents: false,
+    manageEvents: openOnMouseHover ? 'click' : false,
     onRequestHide: onRequestHide,
     ref: popoverRef,
     target: buttonRef,
     zIndex: zIndex,
     onShow: onShow,
-    onHide: onHide
+    onHide: onHide,
+    visible: openOnMouseHover ? debouncedVisible && !itemSelected.current : undefined,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, _react.default.createElement(_Menu.default, _extends({
     items: menuItems,
     onSelectItem: onSelectItem,