@soul-refiner/design-system 0.2.67 → 0.2.69

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

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

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

@@ -4,10 +4,12 @@ import styled, { css } from 'styled-components';
 import { P } from '../../';
 import { ChevronDown, ChevronUp } from '../../../icons';
 import { Styles } from '../../../common';
-const Filter = ({ closeOnBlur = true, children, disabled, graphic, label, sx, triggerType, value, }) => {
+import { Spacer, Option } from './filter_option';
+const Filter = ({ closeOnBlur = true, disabled, graphic, label, sx, triggerType, options, defaultValue, closeOnChange = true, onChange, }) => {
     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);
     React.useEffect(() => {
         if (disabled) {
             setOpen(false);
@@ -26,9 +28,36 @@ const Filter = ({ closeOnBlur = true, children, disabled, graphic, label, sx, tr
             setOpen(false);
         }
     };
+    const handleChange = (event) => {
+        event.stopPropagation();
+        const value = event.target.getAttribute('data-value') ?? '';
+        if (selected !== value) {
+            setSelected(value);
+        }
+        else {
+            setSelected('');
+        }
+        if (closeOnChange) {
+            setOpen(false);
+        }
+        if (onChange)
+            onChange(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}` });
+        }
+        return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), ...option }));
+    });
     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: value }),
-        open && React.createElement(Container, { ref: optionsRef }, children)));
+        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)));
 };
 const Wrapper = styled.div `
   position: relative;
@@ -41,6 +70,18 @@ const Container = styled.div `
   width: max-content;
   z-index: 100;
   outline: none;
+  box-shadow: var(--elevation-2);
+  background-color: var(--color-white);
+  cursor: pointer;
+  border-radius: 8px;
+
+  & > div:first-of-type {
+    border-radius: 8px 8px 0px 0px;
+  }
+
+  & > div:last-of-type {
+    border-radius: 0px 0px 8px 8px;
+  }
 `;
 /********************************************************
  *  Triggers

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface FilterOptionProps {
+    color?: string;
+    label: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
+    selected: boolean;
+    sx?: string;
+    value: string;
+}
+declare const Option: {
+    ({ label, onClick, selected, sx, value }: FilterOptionProps): React.JSX.Element;
+    displayName: string;
+};
+export interface FilterSpacerProps {
+    sx?: string;
+}
+export declare const Spacer: {
+    ({ sx }: FilterSpacerProps): React.JSX.Element;
+    displayName: string;
+};
+export { Option };

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

@@ -0,0 +1,58 @@
+'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)))));
+};
+Option.displayName = 'Filter.Option';
+const OptionWrapper = styled.div `
+  position: relative;
+  z-index: 1;
+  padding: 12px 16px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 164px;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  ${({ $selected }) => {
+    if ($selected) {
+        return `
+      background-color: var(--color-grey-9);
+      &:active {
+        background-color: var(--color-grey-8);
+      }`;
+    }
+    return `
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+
+    &:active {
+      background-color: var(--color-grey-8);
+    }
+    `;
+}}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+export const Spacer = ({ sx }) => {
+    return React.createElement(SpacerWrapper, { "$sx": sx });
+};
+Spacer.displayName = 'Filter.Spacer';
+const SpacerWrapper = styled.div `
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-grey-8);
+
+  &:hover {
+    appearance: none;
+  }
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+export { Option };

package/package.json

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