@omniumretail/component-library 1.2.21 → 1.2.23

package/dist/main.css

@@ -8,7 +8,7 @@
 .YPXf1KvhUKPvYzjuCpbK{display:block;color:var(--color-black);text-transform:capitalize;font-size:var(--font-size-body-base);line-height:125%;font-weight:var(--font-weight-semibold)}.YPXf1KvhUKPvYzjuCpbK:not(:first-child){margin-top:8px}.ExPJyFK95xTcgtx9cRbg{text-transform:uppercase}
 .EBnBgAHgtsQFrDoso9Dw{background-color:var(--color-orange);height:1px;border:none}.FLVlQ5eFtNDkCl4IcIIx{opacity:50%}.L2HU9MLCi6B1ZsJyWfp9{background-color:var(--color-blue)}.MQcBac9Gnb9D2ONENY8Q{margin:8px 0}.tdvYp9O5RnLEsNa3E_wz{margin:16px 0}.hWWGCDnwP_ROWFDlyVxe{margin:24px 0}
 .pwZdBKCECvzAH92fQDTI{display:flex;flex-wrap:wrap;flex-direction:column}.pwZdBKCECvzAH92fQDTI .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.pwZdBKCECvzAH92fQDTI .ant-table-thead>tr>th:before{display:none}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr{cursor:pointer}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.pwZdBKCECvzAH92fQDTI .ant-space{align-self:flex-end}.pwZdBKCECvzAH92fQDTI .ant-select-selection-placeholder{color:var(--color-black)}.pwZdBKCECvzAH92fQDTI .ant-select-selector,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.pwZdBKCECvzAH92fQDTI .ant-select-selector:focus,.pwZdBKCECvzAH92fQDTI .ant-select-selector:hover,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:focus,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.pwZdBKCECvzAH92fQDTI .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.pwZdBKCECvzAH92fQDTI button[type=button].ant-pagination-item-link{margin-top:0 !important}.pwZdBKCECvzAH92fQDTI button[type=button]{margin-top:-50px}.ant-spin-dot-item{background-color:var(--color-blue) !important;opacity:1 !important}.ant-spin-dot-item:nth-child(2){background-color:var(--color-orange) !important;opacity:1}.ant-spin-dot-item:nth-child(3){background-color:var(--color-blue) !important;opacity:1}.ant-spin-dot-item:nth-child(4){background-color:var(--color-orange) !important;opacity:1}
-.yhGDUJJiYhqjPCJgNdjI{contain:inline-size}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI{margin-top:16px}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI.sFDpKKys2XzhCHAvcoE3{pointer-events:none}.LEywos4xlf3LV6eEFLFv{height:50px;display:flex;align-items:center;gap:12px;padding:16px;margin-inline-end:0;width:100%}.LEywos4xlf3LV6eEFLFv .ant-input{height:50px;padding-left:40px}.VhQgSZHBi1swQZeQePfL{height:50px}.Hfh5KLg4Y_g44Ajhx9aV .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-right:24px;min-height:34px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close{color:var(--color-white);font-size:12px;position:absolute;right:4px;top:10px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover{color:var(--color-black)}.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{display:flex;align-items:center;gap:32px;width:calc(100% - 40px)}@media(max-width: 768px){.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{gap:12px;width:calc(100% - 20px)}}.yhGDUJJiYhqjPCJgNdjI .Gj9zvBh4toFNL6uoWOIk{display:flex;gap:12px}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL{display:flex;flex-direction:row;gap:12px;font-family:"SilkaBold";text-decoration:underline}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL div{cursor:pointer}.yhGDUJJiYhqjPCJgNdjI .Qw2jwswWLKYVmJayZ1oJ{display:flex;gap:20px}.yhGDUJJiYhqjPCJgNdjI .rxp2cwAB1kcsYH2aGI5w{margin-top:2px}
+.yhGDUJJiYhqjPCJgNdjI{contain:inline-size}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI{margin-top:16px}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI.sFDpKKys2XzhCHAvcoE3{pointer-events:none}.LEywos4xlf3LV6eEFLFv{height:50px;display:flex;align-items:center;gap:12px;padding:16px;margin-inline-end:0;width:100%}.LEywos4xlf3LV6eEFLFv .ant-input{height:50px;padding-left:40px}.VhQgSZHBi1swQZeQePfL{height:50px}.Hfh5KLg4Y_g44Ajhx9aV .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-right:24px;min-height:34px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close{color:var(--color-white);font-size:12px;position:absolute;right:4px;top:10px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover{color:var(--color-black)}.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{display:flex;align-items:center;gap:32px;width:calc(100% - 40px)}@media(max-width: 768px){.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{gap:12px;width:calc(100% - 20px)}}.yhGDUJJiYhqjPCJgNdjI .Gj9zvBh4toFNL6uoWOIk{display:flex;gap:12px}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL{display:flex;flex-direction:row;gap:12px;font-family:"SilkaBold";text-decoration:underline}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL div{cursor:pointer}.yhGDUJJiYhqjPCJgNdjI .Qw2jwswWLKYVmJayZ1oJ{display:flex;gap:20px}.yhGDUJJiYhqjPCJgNdjI .rxp2cwAB1kcsYH2aGI5w{margin-top:2px}.yhGDUJJiYhqjPCJgNdjI .EEQhox2z9ItIwQp0EGGL{width:100%;justify-content:flex-end}
 .gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
 .vdTO5pKaLXA2FdyblLq5{border-color:rgba(var(--color-black-rgb), 0.5)}
 .e3BZiSKkbgvekUOREMi6{font-weight:var(--font-weight-medium);font-size:var(--font-size-body-3);margin-right:44px;margin-top:18px}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner{border-color:var(--color-black)}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner:after{background-color:var(--color-black)}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked:hover .ant-radio-inner:after{background-color:var(--color-orange)}.e3BZiSKkbgvekUOREMi6 .ant-radio:hover .ant-radio-inner{border-color:var(--color-orange)}

package/dist/types/components/Tag/index.d.ts

@@ -12,5 +12,10 @@ export interface customTagProps extends TagProps {
     disable?: boolean;
     addSwitch?: boolean;
     setInactiveUsersSwitch?: React.Dispatch<React.SetStateAction<boolean>>;
+    hideAdvancedFilters?: boolean;
+    defaultAdvancedFilters?: {
+        display: string;
+        value: string;
+    }[];
 }
 export declare const TagField: (props: customTagProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.2.21",
+  "version": "1.2.23",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/CategoryResponse/index.tsx

@@ -354,13 +354,13 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
 
                                     {props.addButtons &&
                                         <>
-                                            {(form.getFieldValue(`Questions`)?.[index].Note || isNoteVisible) &&
+                                            {(form.getFieldValue(`Questions`)?.[index].Note || (isNoteVisible && showNote)) &&
                                                 <div className={styles.noteContainer}>
                                                     <span className={styles.note}>{t('components.categoryResponse.note')}: </span>
 
                                                     <Form.Item name={["Questions", index, "Note"]} className={styles.form}>
                                                         <TextArea
-                                                            disabled={!isNoteVisible}
+                                                            disabled={(!isNoteVisible || !showNote)}
                                                             variant={showNote ? "outlined" : "borderless"}
                                                             onBlur={() => setIsNoteVisible(null)}
                                                             className={styles.textArea}

package/src/components/Tag/Tag.stories.tsx

@@ -15,13 +15,14 @@ const Template: Story<TagProps> = (args) => {
     const advancedsFilters = [{ display: t('components.tag.State'), value: "State" }, { display: t('components.tag.1'), value: "Olaaaaaa" }];
     const [switchTest, setSwitchTest] = useState<boolean>(false);
 
-    console.log(switchTest);
-
     console.log('page: basic', tagsInfo, 'advanced', advancedTagsInfo);
 
     return <TagField
         disable={false}
         {...args}
+        defaultAdvancedFilters={[
+            { display: `${t('components.tag.State')}=xpto`, value: "State=xpto" },
+        ]}
         setInactiveUsersSwitch={setSwitchTest}
         advancedTags={advancedsFilters}
         tagsInfo={setTagsInfo}

package/src/components/Tag/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { SearchOutlined } from '@ant-design/icons';
+import { DownOutlined, SearchOutlined, UpOutlined } from '@ant-design/icons';
 import type { InputRef } from 'antd';
 import { Input, Tag, TagProps } from 'antd';
 import { TweenOneGroup } from 'rc-tween-one';
@@ -17,18 +17,26 @@ export interface customTagProps extends TagProps {
     disable?: boolean;
     addSwitch?: boolean;
     setInactiveUsersSwitch?: React.Dispatch<React.SetStateAction<boolean>>;
+    hideAdvancedFilters?: boolean;
+    defaultAdvancedFilters?: { display: string; value: string }[];
 }
 
 export const TagField = (props: customTagProps) => {
-    const { customTags = [], advancedTags, disable } = props;
+    const { customTags = [], advancedTags, disable, defaultAdvancedFilters = [], hideAdvancedFilters = false } = props;
 
     const [tags, setTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
     const [inputVisible, setInputVisible] = useState<boolean>(false);
     const [inputValue, setInputValue] = useState('');
     // const [switchValue, setSwitchValue] = useState<boolean>(false);
     const inputRef = useRef<InputRef>(null);
-    const [advancedTagList, setAdvancedTagList] = useState<Array<{ display: string; value: string }>>([]);
-    const [allTags, setAllTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
+    const [advancedTagList, setAdvancedTagList] = useState<Array<{ display: string; value: string }>>(
+        defaultAdvancedFilters
+    );
+    const [allTags, setAllTags] = useState<string[]>([
+        ...customTags.filter(tag => !tag.includes('=')),
+        ...defaultAdvancedFilters.map((filter) => `${filter.display}`),
+    ]);
+    const [showAdvancedFilters, setShowAdvancedFilters] = useState<boolean>(true);
 
     useEffect(() => {
         if (inputVisible) {
@@ -43,6 +51,9 @@ export const TagField = (props: customTagProps) => {
         const newTags = tags.filter((tag) => tag !== removedTag);
         setTags(newTags);
 
+        console.log(advancedTagList, "2");
+        console.log(removedTag, "1");
+
         if (advancedTags && advancedTagList.some(tag => tag.display === removedTag)) {
             const newAdvancedTags = advancedTagList.filter((tag) => tag.display !== removedTag);
             setAdvancedTagList(newAdvancedTags);
@@ -111,6 +122,12 @@ export const TagField = (props: customTagProps) => {
         }
     };
 
+    const handleHideAdvancedFilters = () => {
+        if (hideAdvancedFilters) {
+            setShowAdvancedFilters(!showAdvancedFilters);
+        }
+    };
+
     const doSomething = (e: any) => {
         const tag = e.target.innerText;
         if (!advancedTagList.map(tagObj => tagObj.display).includes(tag)) {
@@ -184,18 +201,34 @@ export const TagField = (props: customTagProps) => {
                         onPressEnter={handleInputConfirm}
                         className={styles['tagfield__input']}
                         disabled={disable}
+                        suffix={
+                            hideAdvancedFilters ? (
+                                showAdvancedFilters ? (
+                                    <UpOutlined onClick={() => setShowAdvancedFilters(false)} />
+                                ) : (
+                                    <DownOutlined onClick={() => setShowAdvancedFilters(true)} />
+                                )
+                            ) : null
+                        }
                     />
                 )}
 
                 {!inputVisible && (
                     <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
                         <SearchOutlined /> {t('components.tag.search')}
+
+                        {hideAdvancedFilters && (
+                            showAdvancedFilters ? (
+                                <UpOutlined className={styles.tagIcon} onClick={() => setShowAdvancedFilters(false)} />
+                            ) : (
+                                <DownOutlined className={styles.tagIcon} onClick={() => setShowAdvancedFilters(true)} />
+                            )
+                        )}
                     </Tag>
                 )}
             </div>
 
-            {
-                advancedTags &&
+            {showAdvancedFilters && advancedTags && (
                 <div style={{ marginTop: 16, marginBottom: 16 }} className={styles.advancedTagsWrapper}>
                     <div className={styles.label}>
                         {t('components.tag.advancedFields')}:
@@ -204,7 +237,7 @@ export const TagField = (props: customTagProps) => {
                         {advancedTagsChild}
                     </div>
                 </div>
-            }
+            )}
 
             {props.setInactiveUsersSwitch &&
                 <div className={styles.switchContainer}>

package/src/components/Tag/styles.module.scss

@@ -96,4 +96,9 @@
     .inactiveSwitchStyle {
         margin-top: 2px;
     }
+
+    .tagIcon {
+        width: 100%;
+        justify-content: flex-end;
+    }
 }