@soul-refiner/design-system 1.7.16 → 1.7.17

package/dist/components/input/filter/filter.d.ts

@@ -10,6 +10,7 @@ export interface FilterProps {
     disabled?: boolean;
     graphic?: React.ReactElement;
     graphicAlignment?: 'left' | 'right';
+    resetGraphic?: boolean;
     label?: string;
     sx?: string;
     triggerType: FilterTriggerTypes;
@@ -23,9 +24,9 @@ export interface FilterProps {
     applyResetActions?: boolean;
 }
 declare const Filter: {
-    ({ closeOnBlur, disabled, graphic, graphicAlignment, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }: FilterProps): React.JSX.Element;
+    ({ closeOnBlur, disabled, graphic, graphicAlignment, resetGraphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }: FilterProps): React.JSX.Element;
     Trigger: {
-        ({ disabled, graphic, graphicAlignment, label, onClick, open, type, value, }: FilterTriggerProps): React.JSX.Element;
+        ({ disabled, graphic, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }: FilterTriggerProps): React.JSX.Element;
         displayName: string;
     };
 };
@@ -35,7 +36,9 @@ export interface FilterTriggerProps {
     graphicAlignment?: 'left' | 'right';
     label?: string;
     onClick?: (event: React.MouseEvent) => void;
+    onReset?: (event: React.MouseEvent) => void;
     open: boolean;
+    resetGraphic?: boolean;
     type: FilterTriggerTypes;
     value?: string;
 }

package/dist/components/input/filter/filter.js

@@ -2,10 +2,10 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { Box, Button, P } from '../../';
-import { ChevronDown, ChevronUp } from '../../../icons';
+import { ChevronDown, ChevronUp, Close } from '../../../icons';
 import { Styles } from '../../../common';
 import { Spacer, Option } from './filter_option';
-const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
+const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', resetGraphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
     const multiple = !!checkbox;
     const wrapperRef = React.useRef(null);
     const optionsRef = React.useRef(null);
@@ -98,8 +98,17 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'lef
         }),
         triggerType === 'pill' && React.createElement(Spacer, { key: `spacer-${options.length}` }),
     ];
+    const showResetGraphic = resetGraphic &&
+        (typeof selected === 'string' ? !!selected : !!selected.length);
     return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
-        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, open: open, type: triggerType, value: filterLabel }),
+        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, onReset: resetGraphic
+                ? (event) => {
+                    event.stopPropagation();
+                    resetOnClick && resetOnClick(event);
+                    setSelected(multiple ? [] : '');
+                    setOpen(false);
+                }
+                : undefined, open: open, resetGraphic: showResetGraphic, type: triggerType, value: filterLabel }),
         open && (React.createElement(Container, { ref: optionsRef },
             React.createElement(React.Fragment, null,
                 dropdownOptions,
@@ -151,13 +160,14 @@ const wrapperProps = {
     $dir: 'row',
     $gap: 16,
 };
-const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, open, type, value, }) => {
+const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }) => {
     if (type === 'pill') {
         return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
             graphicAlignment === 'left' ? graphic : null,
             React.createElement(P, { ...textProps }, value),
+            resetGraphic ? React.createElement(Close, { color: "blue-3", onClick: onReset }) : null,
             graphicAlignment === 'right' ? graphic : null,
-            !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
+            !graphic && !resetGraphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
     }
     if (type === 'labeled') {
         return (React.createElement(Labeled, { disabled: disabled, onClick: onClick, ...wrapperProps },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.7.16",
+  "version": "1.7.17",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {