selectedItem component was updated

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js

@@ -3,7 +3,7 @@ import moment from "moment";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 
-import SelectedItem from "./SelectedItem";
+import SelectedItem from "@docspace/components/selected-item";
 import Link from "@docspace/components/link";
 
 const StatusBarWrapper = styled.div`
@@ -48,7 +48,8 @@ const StatusBar = (props) => {
           " - " +
           moment(historyFilters.deliveryTo).format("HH:mm")
         }
-        removeSelectedItem={clearDate}
+        onClose={clearDate}
+        onClick={clearDate}
       />
     );
   };
@@ -56,16 +57,13 @@ const StatusBar = (props) => {
   const SelectedDate = () => (
     <SelectedItem
       label={moment(historyFilters.deliveryDate).format("DD MMM YYYY")}
-      removeSelectedItem={clearDate}
+      onClose={clearDate}
+      onClick={clearDate}
     />
   );
 
   const SelectedStatuses = historyFilters.status.map((statusCode) => (
-    <SelectedItem
-      label={statusCode}
-      key={statusCode}
-      removeSelectedItem={() => unselectStatus(statusCode)}
-    />
+    <SelectedItem label={statusCode} key={statusCode} onClose={clearDate} onClick={clearDate} />
   ));
 
   const isEqualDates = (firstDate, secondDate) => {

packages/common/components/FilterInput/index.js

@@ -11,7 +11,7 @@ import Link from "@docspace/components/link";
 
 import FilterButton from "./sub-components/FilterButton";
 import SortButton from "./sub-components/SortButton";
-import SelectedItem from "./sub-components/SelectedItem";
+import SelectedItem from "@docspace/components/selected-item";
 
 import { StyledFilterInput, StyledSearchInput } from "./StyledFilterInput";
 
@@ -122,7 +122,7 @@ const FilterInput = React.memo(
 
         removeSelectedItem({ key, group });
       },
-      [selectedItems, removeSelectedItem]
+      [selectedItems, removeSelectedItem],
     );
 
     React.useEffect(() => {
@@ -198,7 +198,8 @@ const FilterInput = React.memo(
                 propKey={item.key}
                 label={item.selectedLabel ? item.selectedLabel : item.label}
                 group={item.group}
-                removeSelectedItem={removeSelectedItemAction}
+                onClose={removeSelectedItemAction}
+                onClick={removeSelectedItemAction}
               />
             ))}
             {selectedItems.filter((item) => item.label).length > 1 && (
@@ -208,8 +209,7 @@ const FilterInput = React.memo(
                 fontWeight={600}
                 isSemitransparent
                 type="action"
-                onClick={clearAll}
-              >
+                onClick={clearAll}>
                 {t("Common:ClearAll")}
               </Link>
             )}
@@ -217,7 +217,7 @@ const FilterInput = React.memo(
         )}
       </StyledFilterInput>
     );
-  }
+  },
 );
 
 FilterInput.defaultProps = {

packages/components/selected-item/index.js

@@ -1,48 +1,74 @@
 import React from "react";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
+import { StyledSelectedItem } from "./styled-selected-item";
 import PropTypes from "prop-types";
-import CrossIconReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
-import IconButton from "../icon-button";
-import {
-  StyledCloseButton,
-  StyledSelectedTextBox,
-  StyledSelectedItem,
-  StyledText,
-} from "./styled-selected-item";
+
+import Text from "@docspace/components/text";
+import IconButton from "@docspace/components/icon-button";
 
 const SelectedItem = (props) => {
-  const { isDisabled, text, onClose } = props;
+  const {
+    label,
+    onClose,
+    isDisabled,
+    onClick,
+    isInline,
+    className,
+    id,
+    propKey,
+    group,
+  } = props;
+  if (!label) return <></>;
 
   const onCloseClick = (e) => {
-    !isDisabled && onClose && onClose(e);
+    !isDisabled && onClose && onClose(propKey, label, group);
+  };
+
+  const handleOnClick = (e) => {
+    !isDisabled &&
+      onClick &&
+      !e.target.classList.contains("selected-tag-removed") &&
+      onClick(propKey, label, group);
   };
 
-  //console.log("SelectedItem render");
   return (
-    <StyledSelectedItem {...props}>
-      <StyledSelectedTextBox>
-        <StyledText as="span" truncate isDisabled={isDisabled} fontWeight={600}>
-          {text}
-        </StyledText>
-      </StyledSelectedTextBox>
-      <StyledCloseButton onClick={onCloseClick} isDisabled={isDisabled}>
-        <IconButton
-          size={10}
-          iconName={CrossIconReactSvgUrl}
-          isFill={true}
-          isDisabled={isDisabled}
-        />
-      </StyledCloseButton>
+    <StyledSelectedItem
+      onClick={handleOnClick}
+      isInline={isInline}
+      className={className}
+      isDisabled={isDisabled}
+      id={id}
+    >
+      <Text
+        className={"selected-item_label"}
+        title={label}
+        truncate={true}
+        noSelect
+        isDisabled={isDisabled}
+      >
+        {label}
+      </Text>
+      <IconButton
+        className="selected-tag-removed"
+        iconName={CrossReactSvgUrl}
+        size={12}
+        onClick={onCloseClick}
+        isFill
+        isDisabled={isDisabled}
+      />
     </StyledSelectedItem>
   );
 };
 
 SelectedItem.propTypes = {
   /** Selected item text */
-  text: PropTypes.string,
-  /** Sets the 'display: inline-block' property */
+  label: PropTypes.string,
+  /** Sets the 'width: fit-content' property */
   isInline: PropTypes.bool,
-  /** Sets a callback function that is triggered when the selected item is clicked */
+  /** Sets a callback function that is triggered when the cross icon is clicked */
   onClose: PropTypes.func.isRequired,
+  /** Sets a callback function that is triggered when the selected item is clicked */
+  onClick: PropTypes.func,
   /** Sets the button to present a disabled state */
   isDisabled: PropTypes.bool,
   /** Accepts class  */
@@ -51,6 +77,10 @@ SelectedItem.propTypes = {
   id: PropTypes.string,
   /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Accepts key to remove item */
+  propKey: PropTypes.string,
+  /** Accepts group key to remove item */
+  group: PropTypes.string,
 };
 
 SelectedItem.defaultProps = {
@@ -58,4 +88,4 @@ SelectedItem.defaultProps = {
   isDisabled: false,
 };
 
-export default SelectedItem;
+export default React.memo(SelectedItem);

packages/components/selected-item/selected-item.stories.js

@@ -15,7 +15,7 @@ const Template = ({ onClose, ...args }) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  text: "Selected item",
+  label: "Selected item",
   isInline: true,
   isDisabled: false,
 };
@@ -45,12 +45,12 @@ const AllTemplate = ({ onClose, ...args }) => {
     <>
       <StyledContainerInline>
         <SelectedItem
-          text="Selected item"
+          label="Selected item"
           isInline={true}
           onClose={onCloseHandler}
         />
         <SelectedItem
-          text="Selected item"
+          label="Selected item"
           isInline={true}
           isDisabled
           onClose={onCloseHandler}
@@ -59,7 +59,7 @@ const AllTemplate = ({ onClose, ...args }) => {
 
       <StyledContainer>
         <SelectedItem
-          text="Selected item"
+          label="Selected item"
           isInline={false}
           onClose={onCloseHandler}
         />

packages/components/selected-item/styled-selected-item.js

@@ -1,68 +1,43 @@
-import styled from "styled-components";
-
-import Text from "../text";
-import Base from "../themes/base";
+import React from "react";
+import { Base } from "@docspace/components/themes";
+import styled, { css } from "styled-components";
 
 const StyledSelectedItem = styled.div`
-  position: relative;
-  display: ${(props) => (props.isInline ? "inline-grid" : "grid")};
-  grid-template-columns: 1fr auto;
+  width: ${(props) => (props.isInline ? "fit-content" : "100%")};
+  height: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+
   box-sizing: border-box;
-  background: ${(props) => props.theme.selectedItem.background};
-  border: ${(props) => props.theme.selectedItem.border};
-  border-radius: ${(props) => props.theme.selectedItem.borderRadius};
+
+  border-radius: 3px;
+
+  padding: 6px 8px;
+
+  margin-right: 4px;
+  margin-bottom: 4px;
+
+  background: ${(props) => props.theme.filterInput.selectedItems.background};
+
+  ${(props) =>
+    !props.isDisabled &&
+    css`
+      :hover {
+        background: ${(props) =>
+          props.theme.filterInput.selectedItems.hoverBackground};
+      }
+    `}
+
+  .selected-item_label {
+    line-height: 20px;
+    margin-right: 10px;
+    max-width: 23ch;
+    color: ${(props) => props.isDisabled && props.theme.text.disableColor};
+  }
 `;
+
 StyledSelectedItem.defaultProps = { theme: Base };
 
-const StyledSelectedTextBox = styled.div`
-  display: grid;
-  padding: ${(props) => props.theme.selectedItem.textBox.padding};
-  height: ${(props) => props.theme.selectedItem.textBox.height};
-  align-items: ${(props) => props.theme.selectedItem.textBox.alignItems};
-  border-right: ${(props) => props.theme.selectedItem.textBox.borderRight};
-  cursor: default;
-`;
-StyledSelectedTextBox.defaultProps = { theme: Base };
-
-const StyledCloseButton = styled.div`
-  display: flex;
-  align-items: ${(props) => props.theme.selectedItem.closeButton.alignItems};
-  padding: ${(props) => props.theme.selectedItem.closeButton.padding};
-  cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
-
-  path {
-    ${(props) =>
-      !props.isDisabled &&
-      `fill: ${props.theme.selectedItem.closeButton.color};`}
-  }
-
-  &:hover {
-    path {
-      ${(props) =>
-        !props.isDisabled &&
-        `fill: ${props.theme.selectedItem.closeButton.colorHover};`}
-    }
-  }
-
-  &:active {
-    ${(props) =>
-      !props.isDisabled &&
-      `background-color: ${props.theme.selectedItem.closeButton.backgroundColor};`}
-  }
-`;
-StyledCloseButton.defaultProps = { theme: Base };
-
-const StyledText = styled(Text)`
-  color: ${(props) =>
-    props.isDisabled
-      ? props.theme.selectedItem.text.disabledColor
-      : props.theme.selectedItem.text.color};
-`;
-StyledText.defaultProps = { theme: Base };
-
-export {
-  StyledCloseButton,
-  StyledSelectedTextBox,
-  StyledSelectedItem,
-  StyledText,
-};
+export { StyledSelectedItem };