@synerise/ds-filter 0.16.4 → 0.17.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.17.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.17.0...@synerise/ds-filter@0.17.1) (2024-02-19)
+
+
+### Bug Fixes
+
+* **filter:** fixes z-index of .ghost-element ([b27386b](https://github.com/Synerise/synerise-design/commit/b27386bb5f1f421d89919c23470bba08dbecb342))
+
+
+
+
+
+# [0.17.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.16.4...@synerise/ds-filter@0.17.0) (2024-02-15)
+
+
+### Features
+
+* **filter:** updates styles for brackets ([0a3ba5f](https://github.com/Synerise/synerise-design/commit/0a3ba5f90cb120347de5d06669147263cd8d7575))
+
+
+
+
+
 ## [0.16.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-filter@0.16.3...@synerise/ds-filter@0.16.4) (2024-02-06)
 
 

package/dist/Filter.d.ts

@@ -1,3 +1,3 @@
 import { FilterProps } from './Filter.types';
-declare const Filter: ({ maxConditionsLimit, expressions, matching, onChangeOrder, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepFooter, renderStepContent, renderStepHeaderRightSide, addFilterComponent, texts, logicOptions, renderHeaderRightSide, visibilityConfig, readOnly, }: FilterProps) => JSX.Element;
+declare const Filter: ({ maxConditionsLimit, expressions, matching, onChangeOrder, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepFooter, renderStepContent, renderStepHeaderRightSide, addFilterComponent, texts, logicOptions, renderHeaderRightSide, visibilityConfig, readOnly, getMoveByLabel, }: FilterProps) => JSX.Element;
 export default Filter;

package/dist/Filter.js

@@ -54,7 +54,8 @@ var Filter = function Filter(_ref) {
     isStepCardHeaderVisible: true
   } : _ref$visibilityConfig,
       _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      getMoveByLabel = _ref.getMoveByLabel;
   var previousExpressions = usePrevious(expressions);
 
   var _useState = useState(null),
@@ -192,6 +193,12 @@ var Filter = function Filter(_ref) {
         moveTooltip: formatMessage({
           id: 'DS.STEP-CARD.MOVE'
         }),
+        moveUpTooltip: formatMessage({
+          id: 'DS.STEP-CARD.MOVE_UP'
+        }),
+        moveDownTooltip: formatMessage({
+          id: 'DS.STEP-CARD.MOVE_DOWN'
+        }),
         deleteTooltip: formatMessage({
           id: 'DS.STEP-CARD.DELETE'
         }),
@@ -274,11 +281,12 @@ var Filter = function Filter(_ref) {
         children: renderStepContent && renderStepContent(expression, !!activeExpressionId && !isActive(expression)),
         isHeaderVisible: visibilityConfig.isStepCardHeaderVisible,
         headerRightSide: renderStepHeaderRightSide && renderStepHeaderRightSide(expression, index),
+        getMoveByLabel: getMoveByLabel,
         texts: _objectSpread({}, text.step, {}, contextTypeTexts)
       })
     };
     return props[expression.type];
-  }, [activeExpressionId, getContextTypeTexts, handleMove, isActive, isLimitExceeded, logicOptions, movedExpressionId, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, stepExpressionCount, text.step, visibilityConfig.isStepCardHeaderVisible]);
+  }, [activeExpressionId, getContextTypeTexts, getMoveByLabel, handleMove, isActive, isLimitExceeded, logicOptions, onChangeLogic, onChangeStepMatching, onChangeStepName, onDeleteStep, onDuplicateStep, renderStepContent, renderStepFooter, renderStepHeaderRightSide, stepExpressionCount, text.step, visibilityConfig.isStepCardHeaderVisible]);
   var renderExpression = useCallback(function (expression, index) {
     var Component = component[expression.type];
     var LogicComponent = expression.logic && component[expression.logic.type];

package/dist/Filter.styles.js

@@ -7,15 +7,15 @@ export var FilterWrapper = styled.div.withConfig({
 export var FilterHeader = styled.div.withConfig({
   displayName: "Filterstyles__FilterHeader",
   componentId: "w5f27p-1"
-})(["display:flex;flex-direction:row;justify-content:space-between;width:100%;margin-bottom:24px;"]);
+})(["width:100%;display:flex;margin-bottom:24px;flex-direction:row;align-items:center;justify-content:space-between;"]);
 export var FilterHeaderRightSide = styled.div.withConfig({
   displayName: "Filterstyles__FilterHeaderRightSide",
   componentId: "w5f27p-2"
-})(["align-self:flex-end;flex:0 0 auto;"]);
+})(["flex:1;overflow-x:hidden;"]);
 export var MatchingWrapper = styled.div.withConfig({
   displayName: "Filterstyles__MatchingWrapper",
   componentId: "w5f27p-3"
-})(["display:flex;align-items:center;justify-content:space-between;align-content:flex-end;"]);
+})(["flex:0 0 auto;margin-right:24px;"]);
 export var ConditionsLimit = styled.div.withConfig({
   displayName: "Filterstyles__ConditionsLimit",
   componentId: "w5f27p-4"
@@ -31,7 +31,7 @@ export var LogicWrapper = styled.div.withConfig({
 export var ExpressionWrapper = styled.div.withConfig({
   displayName: "Filterstyles__ExpressionWrapper",
   componentId: "w5f27p-7"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 16px 32px 0 #23293619;", "{visibility:visible;opacity:1;}", "{position:absolute;opacity:0;height:0;}", ",", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:68px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{position:absolute;opacity:0;height:0;}}"], DragIcon, Body, Footer, LogicWrapper, function (props) {
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;&.sortable-chosen{cursor:grabbing;width:100%;opacity:1 !important;height:50px;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 16px 32px 0 #23293619;&&&&.ghost-element{z-index:100 !important;}", "{visibility:visible;opacity:1;}", "{position:absolute;opacity:0;height:0;}", ",", "{display:none;}}&.ghost-element{cursor:grabbing;width:100%;background-color:", ";border-left:2px solid ", ";border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:24px;height:68px;box-shadow:none;position:relative;&:before{content:attr(data-dropLabel);text-align:center;position:relative;color:", ";}*{position:absolute;opacity:0;height:0;}}"], DragIcon, Body, Footer, LogicWrapper, function (props) {
   return props.theme.palette['blue-050'];
 }, function (props) {
   return props.theme.palette['blue-600'];
@@ -45,6 +45,6 @@ export var AddButtonWrapper = styled.div.withConfig({
 export var FilterTitle = styled.div.withConfig({
   displayName: "Filterstyles__FilterTitle",
   componentId: "w5f27p-9"
-})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;margin-bottom:24px;&:first-letter{text-transform:uppercase;}"], function (props) {
+})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;margin-bottom:24px;flex:0 0 auto;&:first-letter{text-transform:uppercase;}"], function (props) {
   return props.theme.palette['grey-800'];
 });

package/dist/Filter.types.d.ts

@@ -35,6 +35,7 @@ export type FilterProps = {
     logicOptions?: LogicOperator[];
     readOnly?: boolean;
     renderHeaderRightSide?: (expressions: Expression[]) => React.ReactNode;
+    getMoveByLabel?: (moveByOffset: number) => string;
     texts?: {
         matching?: MatchingTexts;
         step?: {
@@ -50,6 +51,8 @@ export type FilterProps = {
             notEvent?: string;
             namePlaceholder?: string;
             moveTooltip?: string;
+            moveUpTooltip?: string;
+            moveDownTooltip?: string;
             deleteTooltip?: string;
             duplicateTooltip?: string;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-filter",
-  "version": "0.16.4",
+  "version": "0.17.1",
   "description": "Filter UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@synerise/ds-button": "^0.19.0",
     "@synerise/ds-logic": "^0.8.22",
-    "@synerise/ds-step-card": "^0.10.4",
+    "@synerise/ds-step-card": "^0.10.6",
     "@synerise/ds-utils": "^0.24.24",
     "react-intl": "3.12.0",
     "react-sortablejs": "^6.0.0",
@@ -51,5 +51,5 @@
     "@testing-library/dom": "^7.0.2",
     "@testing-library/jest-dom": "5.1.1"
   },
-  "gitHead": "413b02fb31c0c6fb8631fde0bc5b00e16f7f30b7"
+  "gitHead": "17e3bca1d4d134a28aaa186f0e2637616ca86174"
 }