@synerise/ds-logic 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@0.6.4...@synerise/ds-logic@0.7.0) (2022-04-05)
+
+
+### Features
+
+* **logic:** removes dropdown, now value is changing by clicking on it like Logic.Matching ([711abcf](https://github.com/Synerise/synerise-design/commit/711abcf35191b8376418242b23ad6f7680ab52e1))
+
+
+
+
+
+## [0.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@0.6.3...@synerise/ds-logic@0.6.4) (2022-03-30)
+
+**Note:** Version bump only for package @synerise/ds-logic
+
+
+
+
+
+## [0.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@0.6.2...@synerise/ds-logic@0.6.3) (2022-03-24)
+
+**Note:** Version bump only for package @synerise/ds-logic
+
+
+
+
+
 ## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@0.6.1...@synerise/ds-logic@0.6.2) (2022-03-24)
 
 **Note:** Version bump only for package @synerise/ds-logic

package/dist/Logic.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import Dropdown from '@synerise/ds-dropdown';
-import { useOnClickOutside } from '@synerise/ds-utils';
 import { useIntl } from 'react-intl';
+import { Title } from '@synerise/ds-typography';
 import * as S from './Logic.style';
 import Matching from './Matching/Matching';
 var DEFAULT_OPTIONS = ['AND', 'OR'];
@@ -11,15 +10,6 @@ var Logic = function Logic(_ref) {
       options = _ref.options,
       onChange = _ref.onChange;
   var intl = useIntl();
-
-  var _React$useState = React.useState(false),
-      optionsVisible = _React$useState[0],
-      setOptionsVisible = _React$useState[1];
-
-  var ref = React.useRef(null);
-  useOnClickOutside(ref, function () {
-    setOptionsVisible(false);
-  });
   var operators = React.useMemo(function () {
     if (options !== undefined && options.length) {
       return options;
@@ -34,28 +24,12 @@ var Logic = function Logic(_ref) {
       };
     });
   }, [options, intl]);
-  var getOptions = React.useMemo(function () {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-      // @ts-ignore
-      React.createElement(S.Wrapper, {
-        ref: ref
-      }, /*#__PURE__*/React.createElement(S.LogicMenu, {
-        asDropdownMenu: true
-      }, operators.map(function (operator) {
-        return /*#__PURE__*/React.createElement(S.MenuItem, {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-          // @ts-ignore
-          key: operator,
-          checked: operator.value === value,
-          onClick: function onClick() {
-            setOptionsVisible(false);
-            onChange(operator.value);
-          }
-        }, operator.label);
-      })))
-    );
+  var handleNextLogic = React.useCallback(function () {
+    var currentOperatorIndex = operators.findIndex(function (operator) {
+      return operator.value === value;
+    });
+    var nextOperatorIndex = currentOperatorIndex + 1 >= operators.length ? 0 : currentOperatorIndex + 1;
+    onChange(operators[nextOperatorIndex].value);
   }, [onChange, operators, value]);
   var renderValue = React.useMemo(function () {
     var _operators$find;
@@ -64,18 +38,13 @@ var Logic = function Logic(_ref) {
       return option.value === value;
     })) == null ? void 0 : _operators$find.label;
   }, [operators, value]);
-  return /*#__PURE__*/React.createElement(Dropdown, {
-    overlay: getOptions,
-    visible: optionsVisible
-  }, /*#__PURE__*/React.createElement(S.Logic, {
-    className: "ds-logic"
-  }, /*#__PURE__*/React.createElement(Dropdown.TextTrigger, {
-    value: renderValue,
-    size: 4,
-    onClick: function onClick() {
-      return setOptionsVisible(!optionsVisible);
-    }
-  })));
+  return /*#__PURE__*/React.createElement(S.Logic, {
+    className: "ds-logic",
+    onClick: handleNextLogic
+  }, /*#__PURE__*/React.createElement(Title, {
+    withoutMargin: true,
+    level: 4
+  }, renderValue));
 };
 
 Logic.Matching = Matching;

package/dist/Logic.style.d.ts

@@ -1,6 +1 @@
-/// <reference types="react" />
-import Menu from '@synerise/ds-menu';
-export declare const MenuItem: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-menu/dist/Elements/SubMenu/SubMenu.types").SubMenuProps & import("@synerise/ds-menu").MenuItemProps>, any, {}, never>;
-export declare const LogicMenu: import("styled-components").StyledComponent<typeof Menu, any, {}, never>;
 export declare const Logic: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Logic.style.js

@@ -1,19 +1,16 @@
-import Menu from '@synerise/ds-menu';
-import styled from 'styled-components';
-import Dropdown from '@synerise/ds-dropdown';
-export var MenuItem = styled(Menu.Item).withConfig({
-  displayName: "Logicstyle__MenuItem",
-  componentId: "yp0pif-0"
-})(["min-width:80px;"]);
-export var LogicMenu = styled(Menu).withConfig({
-  displayName: "Logicstyle__LogicMenu",
-  componentId: "yp0pif-1"
-})(["&&&{width:auto;}"]);
+import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
+
 export var Logic = styled.div.withConfig({
   displayName: "Logicstyle__Logic",
-  componentId: "yp0pif-2"
-})(["&&&{.ds-title{text-transform:uppercase;}}"]);
-export var Wrapper = styled(Dropdown.Wrapper).withConfig({
-  displayName: "Logicstyle__Wrapper",
-  componentId: "yp0pif-3"
-})(["width:auto;"]);
+  componentId: "yp0pif-0"
+})(["user-select:none;position:relative;.ds-title{cursor:pointer;&:after{position:absolute;bottom:-2px;width:100%;content:'';height:1px;left:1px;background-image:linear-gradient( to right,", " 25%,", " 0% );background-position:top;background-size:4px 1px;background-repeat:repeat-x;}}&:hover{.ds-title{color:", ";&:after{background-image:linear-gradient( to right,", " 25%,", " 0% );}}}"], function (props) {
+  return props.theme.palette['grey-600'];
+}, function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.palette['blue-700'];
+}, function (props) {
+  return props.theme.palette['blue-700'];
+}, function (props) {
+  return props.theme.palette.white;
+});

package/dist/Matching/Matching.js

@@ -34,7 +34,8 @@ var Matching = function Matching(_ref) {
   var getToggle = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.Toggle, {
       onClick: handleClick,
-      matching: matching
+      matching: matching,
+      className: "ds-matching-toggle"
     }, matching ? text.matching : text.notMatching);
   }, [handleClick, matching, text]);
   var getLabelWithToggle = React.useMemo(function () {

package/dist/Matching/Matching.styles.js

@@ -8,8 +8,16 @@ export var MatchingWrapper = styled.div.withConfig({
 export var Toggle = styled.span.withConfig({
   displayName: "Matchingstyles__Toggle",
   componentId: "sc-7z57qz-1"
-})(["cursor:pointer;font-size:16px;font-weight:500;line-height:1.25;color:", ";transition:color 0.1s ease-in-out;&:hover{color:", ";}"], function (props) {
+})(["cursor:pointer;font-size:16px;font-weight:500;line-height:1.25;color:", ";transition:color 0.1s ease-in-out;position:relative;&:after{position:absolute;bottom:-2px;width:100%;content:'';height:1px;left:1px;background-image:linear-gradient( to right,", " 25%,", " 0% );background-position:top;background-size:4px 1px;background-repeat:repeat-x;}&:hover{color:", ";&:after{background-image:linear-gradient( to right,", " 25%,", " 0% );}}"], function (props) {
   return props.theme.palette["blue-600"];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+}, function (props) {
+  return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette["blue-700"];
+}, function (props) {
+  return props.theme.palette['blue-700'];
+}, function (props) {
+  return props.theme.palette.white;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-logic",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Logic UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,14 +32,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.17.13",
-    "@synerise/ds-icon": "^0.48.0",
-    "@synerise/ds-menu": "^0.13.0",
+    "@synerise/ds-icon": "^0.49.0",
+    "@synerise/ds-typography": "^0.12.2",
     "@synerise/ds-utils": "^0.19.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "7f696cdfd31f36bbeeb750df44b0f6d2010d0c9d"
+  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
 }