@soul-refiner/design-system 0.2.73 → 0.2.75

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

@@ -6,7 +6,7 @@ import { FilterOptionProps } from './filter_option';
 type FilterTriggerTypes = 'outlined' | 'pill' | 'labeled' | 'avatar' | 'text';
 export interface FilterProps {
     closeOnBlur?: boolean;
-    defaultValue?: string;
+    defaultValue?: string | string[];
     disabled?: boolean;
     graphic?: React.ReactElement;
     label?: string;
@@ -14,10 +14,12 @@ export interface FilterProps {
     triggerType: FilterTriggerTypes;
     options: (Omit<FilterOptionProps, 'selected' | 'onClick'> | 'break')[];
     closeOnChange?: boolean;
-    onChange?: (event: React.MouseEvent) => void;
+    optionOnChange?: (event: React.MouseEvent) => void;
+    checkbox?: boolean;
+    applyOnClick?: (event: React.MouseEvent) => void;
 }
 declare const Filter: {
-    ({ closeOnBlur, disabled, graphic, label, sx, triggerType, options, defaultValue, closeOnChange, onChange, }: FilterProps): React.JSX.Element;
+    ({ closeOnBlur, disabled, graphic, label, sx, triggerType, options, defaultValue, closeOnChange, optionOnChange, checkbox, applyOnClick, }: FilterProps): React.JSX.Element;
     Trigger: {
         ({ disabled, graphic, label, onClick, open, type, value, }: FilterTriggerProps): React.JSX.Element;
         displayName: string;

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

@@ -1,20 +1,47 @@
 'use client';
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { P } from '../../';
+import { Box, Button, P } from '../../';
 import { ChevronDown, ChevronUp } from '../../../icons';
 import { Styles } from '../../../common';
 import { Spacer, Option } from './filter_option';
-const Filter = ({ closeOnBlur = true, disabled, graphic, label, sx, triggerType, options, defaultValue, closeOnChange = true, onChange, }) => {
+const Filter = ({ closeOnBlur = true, disabled, graphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, checkbox, applyOnClick, }) => {
+    const multiple = !!checkbox;
     const wrapperRef = React.useRef(null);
     const optionsRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
-    const [selected, setSelected] = React.useState(defaultValue || options[0]?.value);
+    const [selected, setSelected] = React.useState(() => defaultValue ? defaultValue : multiple ? [] : '');
+    const [filterLabel, setFilterLabel] = React.useState('');
     React.useEffect(() => {
         if (disabled) {
             setOpen(false);
         }
     }, [disabled]);
+    React.useEffect(() => {
+        if (triggerType === 'outlined' && !defaultValue) {
+            setSelected(multiple
+                ? [options[0]?.value]
+                : options[0]?.value);
+        }
+    }, [triggerType, defaultValue]);
+    React.useEffect(() => {
+        if (open) {
+            return;
+        }
+        if (!selected.length) {
+            setFilterLabel(label);
+            return;
+        }
+        // not using selected[0] since it is required to show the first
+        const firstSelected = options.find((option) => typeof option !== 'string' && isSelected(option.value));
+        if (typeof selected === 'string') {
+            setFilterLabel(firstSelected.label);
+            return;
+        }
+        setFilterLabel(selected.length > 1
+            ? `${firstSelected.label} +${selected.length - 1}`
+            : firstSelected.label);
+    }, [selected, options, open]);
     const handleOpen = () => {
         if (disabled) {
             return;
@@ -28,7 +55,7 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, label, sx, triggerType,
             setOpen(false);
         }
     };
-    const handleChange = (event) => {
+    const handleChangeSingle = (event) => {
         event.stopPropagation();
         const value = event.target.getAttribute('data-value') ?? '';
         if (selected !== value) {
@@ -37,27 +64,52 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, label, sx, triggerType,
         else {
             setSelected('');
         }
-        if (closeOnChange) {
+        if (closeOnChange && !applyOnClick) {
             setOpen(false);
         }
-        if (onChange)
-            onChange(event);
+        if (optionOnChange)
+            optionOnChange(event);
     };
-    const isSelected = (value) => value === selected;
-    const dropdownOptions = options.map((option, index) => {
-        if (typeof option === 'string' && option === 'break') {
-            return React.createElement(Spacer, { key: `${React.useId()}-spacer-${index}` });
+    const handleChangeMultiple = (event) => {
+        event.stopPropagation();
+        const value = event.target.getAttribute('data-value') ?? '';
+        if (Array.isArray(selected) && selected.includes(value)) {
+            setSelected((prev) => prev.filter((item) => item !== value));
         }
-        return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), ...option }));
-    });
+        else {
+            setSelected((prev) => [value, ...prev]);
+        }
+        if (closeOnChange && !applyOnClick) {
+            setOpen(false);
+        }
+        if (optionOnChange)
+            optionOnChange(event);
+    };
+    const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
+    const isSelected = (value) => multiple ? selected.includes(value) : value === selected;
+    const dropdownOptions = [
+        ...options.map((option, index) => {
+            if (typeof option === 'string' && option === 'break') {
+                return React.createElement(Spacer, { key: `${React.useId()}-spacer-${index}` });
+            }
+            return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: index === 0 && triggerType === 'pill', onClose: () => setOpen(false), ...option }));
+        }),
+        triggerType === 'pill' && React.createElement(Spacer, { key: `spacer-${options.length}` }),
+    ];
     return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
-        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: options.find((option) => {
-                if (typeof option === 'string' && option === 'break') {
-                    return false;
-                }
-                return isSelected(option.value);
-            })?.label }),
-        open && React.createElement(Container, { ref: optionsRef }, dropdownOptions)));
+        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: filterLabel }),
+        open && (React.createElement(Container, { ref: optionsRef },
+            React.createElement(React.Fragment, null,
+                dropdownOptions,
+                triggerType === 'pill' && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px" },
+                    React.createElement(Button, { onClick: () => {
+                            setSelected(multiple ? [] : '');
+                            setOpen(false);
+                        }, size: "small", type: "text" }, "Reset"),
+                    React.createElement(Button, { onClick: (event) => {
+                            applyOnClick && applyOnClick(event);
+                            setOpen(false);
+                        }, size: "small", type: "primary" }, "Apply"))))))));
 };
 const Wrapper = styled.div `
   position: relative;
@@ -98,7 +150,7 @@ const wrapperProps = {
 };
 const FilterTrigger = ({ disabled, graphic, label, onClick, open, type, value, }) => {
     if (type === 'pill') {
-        return (React.createElement(Pill, { disabled: disabled, onClick: onClick, ...wrapperProps },
+        return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
             graphic,
             React.createElement(P, { ...textProps }, value),
             !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
@@ -164,18 +216,28 @@ const Outlined = styled.button `
 const Pill = styled.button `
   ${sharedStyles}
   ${Styles.flex}
+  border: 1px solid var(--color-grey-8);
   border-radius: 24px;
-  background-color: var(--color-primary-blue-4);
+  background-color: var(--color-white);
   font-family: var(--font-inter);
 
-  & > * {
-    color: var(--color-primary-blue-2);
-    fill: currentColor;
+  ${({ $labelIsDefault }) => !$labelIsDefault
+    ? `
+      & > * {
+        color: var(--color-primary-blue-2);
+        fill: currentColor;
 
-    &:hover {
-      color: var(--color-primary-blue-1);
-    }
-  }
+        &:hover {
+          color: var(--color-primary-blue-1);
+          background-color: var(--color-primary-blue-4);
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-primary-blue-4);
+      }
+    `
+    : ''}
 `;
 const Labeled = styled.button `
   ${sharedStyles}

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

@@ -6,9 +6,13 @@ export interface FilterOptionProps {
     selected: boolean;
     sx?: string;
     value: string;
+    checkbox?: boolean;
+    radio?: boolean;
+    showClose?: boolean;
+    onClose?: () => void;
 }
 declare const Option: {
-    ({ label, onClick, selected, sx, value }: FilterOptionProps): React.JSX.Element;
+    ({ label, onClick, selected, sx, value, checkbox, radio, showClose, onClose, }: FilterOptionProps): React.JSX.Element;
     displayName: string;
 };
 export interface FilterSpacerProps {

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

@@ -1,10 +1,17 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box, P } from '../..';
-const Option = ({ label, onClick, selected, sx, value }) => {
-    return (React.createElement(OptionWrapper, { "data-value": value, onClick: onClick, "$selected": selected, "$sx": sx },
-        React.createElement(Box, { "$dir": "column", "$display": "flex" }, label && (React.createElement(P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label)))));
+import { Box, P, Checkbox, Radio } from '../..';
+import { Close } from '../../../icons';
+const Option = ({ label, onClick, selected, sx, value, checkbox, radio = false, showClose = false, onClose, }) => {
+    return (React.createElement(OptionWrapper, { "data-value": value, onClick: onClick, "$selected": selected, "$sx": sx, "$hasCheckbox": !!checkbox },
+        checkbox && React.createElement(Checkbox, { selected: selected }),
+        radio && React.createElement(Radio, { checked: selected, value: value }),
+        React.createElement(Box, { "$dir": "column", "$display": "flex" }, label && (React.createElement(P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label))),
+        showClose && (React.createElement(Close, { sx: "margin-left: auto; pointer-events: auto !important;", size: 16, onClick: (event) => {
+                event.stopPropagation();
+                onClose && onClose();
+            } }))));
 };
 Option.displayName = 'Filter.Option';
 const OptionWrapper = styled.div `
@@ -15,13 +22,13 @@ const OptionWrapper = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
-  min-width: 164px;
+  min-width: 217px;
 
   & > * {
     pointer-events: none;
   }
 
-  ${({ $selected }) => {
+  ${({ $selected, $hasCheckbox }) => {
     if ($selected) {
         return `
       background-color: var(--color-grey-9);
@@ -29,6 +36,11 @@ const OptionWrapper = styled.div `
         background-color: var(--color-grey-8);
       }`;
     }
+    if ($hasCheckbox) {
+        return `&:hover {
+        background-color: var(--color-grey-10);
+      }`;
+    }
     return `
     &:hover {
       background-color: var(--color-grey-10);

package/package.json

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