techsbcn-storybook 2.11.2 → 2.13.0

package/dist/components/fields/SelectFieldComponent/SelectAsyncField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchFilters } from '../../../interfaces';
+import { SearchFilters, SelectOptionTag } from '../../../interfaces';
 
 type MenuPlacement = 'bottom' | 'auto' | 'top';
 interface SelectAsyncFieldProps {
@@ -22,6 +22,7 @@ interface SelectAsyncFieldProps {
     menuPlacement?: MenuPlacement;
     value?: any[];
     getOptionLabel?: (option: any) => any;
+    getOptionTag?: (option: any) => SelectOptionTag | undefined;
     noBorders?: boolean;
 }
 export declare const SelectAsyncField: React.FunctionComponent<SelectAsyncFieldProps>;

package/dist/components/fields/SelectFieldComponent/SelectField.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SelectOptionTag } from '../../../interfaces';
 
 type MenuPlacement = 'bottom' | 'auto' | 'top';
 interface SelectFieldProps {
@@ -22,6 +23,7 @@ interface SelectFieldProps {
     isLoading?: boolean;
     value?: any[];
     getOptionLabel?: (option: any) => any;
+    getOptionTag?: (option: any) => SelectOptionTag | undefined;
     addExtraOption?: any;
     noBorders?: boolean;
 }

package/dist/components/fields/SelectFieldComponent/SelectOptionWithTag.d.ts

@@ -0,0 +1,4 @@
+import { SelectOptionTag } from '../../../interfaces';
+export declare const buildFormatOptionLabel: (getOptionTag?: (option: any) => SelectOptionTag | undefined, getOptionLabel?: (option: any) => any) => (option: any, meta: {
+    context: "menu" | "value";
+}) => any;

package/dist/components/tables/SearchComponent/SearchComponent.d.ts

@@ -10,6 +10,7 @@ export interface SearchComponentProps {
     extraActions?: {
         action: any;
     }[];
+    inlineExtraActions?: boolean;
     filters?: {
         singleFilter?: any;
         doubleFilter?: DoubleFilter;

package/dist/index.js

@@ -139,15 +139,17 @@ var SearchComponent = (props) => {
     setAnchorEl(null);
   };
   const randId = Math.random().toString(36).substring(7);
+  const inlineExtraActions = !!props.extraActions && !!props.inlineExtraActions;
+  const extraActions = props.extraActions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "extra-actions", sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: inlineExtraActions ? 0 : 2 } }, props.extraActions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, { key: i }, action.action)));
   return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: `search-component ${props.className}` }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { mb: props.divider ? 2 : 0, px: 2 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, sx: { alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.Grid,
     {
       size: {
         xs: props.actions ? 8 : 12,
-        md: props.actions && props.searchBar ? 4 : props.searchBar ? 7 : props.actions ? 6 : 12
+        md: inlineExtraActions ? "grow" : props.actions && props.searchBar ? 4 : props.searchBar ? 7 : props.actions ? 6 : 12
       }
     },
-    /* @__PURE__ */ React10__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 2 } }, /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
         sx: {
@@ -158,7 +160,7 @@ var SearchComponent = (props) => {
         className: `${props.enableAfter ? "main-background-color-after" : ""} title`
       },
       props.title
-    )
+    ), inlineExtraActions && extraActions)
   ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: props.title ? 4 : 12 }, sx: { display: { xs: "block", md: "none" } } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "flex" } } }, ActionsList(props.actions)), /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "flex", md: "none" } } }, props.actions.length > 1 ? /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React10__default.default.createElement(
     material.IconButton,
     {
@@ -185,27 +187,36 @@ var SearchComponent = (props) => {
       className: "search-menu-actions"
     },
     props.actions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(material.MenuItem, { key: i, className: "wrapper-actions" }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "btn-action main-color", sx: { color: "primary.main" } }, action.action)))
-  )) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React10__default.default.createElement(material.Grid, { size: { xs: 12, md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 5 } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
-    material.Box,
+  )) : /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { ml: "auto" }, className: `wrapper-actions ${props.title ? "min-action-width" : ""}` }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && /* @__PURE__ */ React10__default.default.createElement(
+    material.Grid,
     {
-      sx: {
-        ml: "auto",
-        display: "flex",
-        width: "100%",
-        ...(props.searchBar || props.filters) && { mt: { xs: 2, md: 0 } }
+      size: {
+        xs: 12,
+        md: inlineExtraActions ? "auto" : props.actions && props.searchBar ? 8 : props.actions ? 6 : 5
       }
     },
-    props.searchBar,
-    !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React10__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React10__default.default.createElement(
       material.Box,
       {
-        onClick: () => setIsOpen(!isOpen),
-        className: "tune-btn main-background-color",
-        sx: { bgcolor: "primary.main", color: "primary.contrastText", "&:hover": { boxShadow: 4 } }
+        sx: {
+          ml: "auto",
+          display: "flex",
+          width: "100%",
+          ...(props.searchBar || props.filters) && { mt: { xs: 2, md: 0 } }
+        }
       },
-      /* @__PURE__ */ React10__default.default.createElement(material.Badge, { badgeContent: props.activeFiltersCount, color: "error" }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Tune, null))
-    )
-  ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions))))), props.extraActions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "extra-actions", sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 2 } }, props.extraActions.map((action, i) => /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, { key: i }, action.action)))), props.divider && /* @__PURE__ */ React10__default.default.createElement(material.Divider, null), /* @__PURE__ */ React10__default.default.createElement(material.Collapse, { in: isOpen }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React10__default.default.createElement(material.Grid, { key: i, size: { xs: 12, sm: props.filtersSize ?? 6, xl: props.filtersSize ?? 4 } }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter))))));
+      props.searchBar,
+      !!props.fixedOpen || props.filters && props.searchBar && /* @__PURE__ */ React10__default.default.createElement(
+        material.Box,
+        {
+          onClick: () => setIsOpen(!isOpen),
+          className: "tune-btn main-background-color",
+          sx: { bgcolor: "primary.main", color: "primary.contrastText", "&:hover": { boxShadow: 4 } }
+        },
+        /* @__PURE__ */ React10__default.default.createElement(material.Badge, { badgeContent: props.activeFiltersCount, color: "error" }, /* @__PURE__ */ React10__default.default.createElement(iconsMaterial.Tune, null))
+      )
+    ), props.actions && /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { display: { xs: "none", md: "block" } }, className: "wrapper-actions" }, ActionsList(props.actions)))
+  )), !inlineExtraActions && extraActions), props.divider && /* @__PURE__ */ React10__default.default.createElement(material.Divider, null), /* @__PURE__ */ React10__default.default.createElement(material.Collapse, { in: isOpen }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "filters", sx: { px: 2, mt: 2, mb: props.divider ? 0 : 1 } }, /* @__PURE__ */ React10__default.default.createElement(material.Grid, { container: true, spacing: 3, sx: { justifyContent: "end" } }, props.filters && props.filters.length > 0 && props.filters.map((filter, i) => /* @__PURE__ */ React10__default.default.createElement(material.Grid, { key: i, size: { xs: 12, sm: props.filtersSize ?? 6, xl: props.filtersSize ?? 4 } }, filter.doubleFilter ? DoubleFilter(filter.doubleFilter) : filter.singleFilter))))));
 };
 
 // src/components/wrappers/LinearProgressComponent/LinearProgressComponent.scss
@@ -2147,6 +2158,27 @@ var selectFieldSx = (theme) => ({
     }
   }
 });
+var buildFormatOptionLabel = (getOptionTag, getOptionLabel) => (option, meta) => {
+  const optionLabel = getOptionLabel ? getOptionLabel(option) : option.label;
+  const tag = getOptionTag && meta.context === "menu" ? getOptionTag(option) : void 0;
+  if (!tag) return optionLabel;
+  const color = tag.color ?? "primary";
+  return /* @__PURE__ */ React10__default.default.createElement(material.Box, { className: "select-option-with-tag", sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React10__default.default.createElement(material.Box, { sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" } }, optionLabel), /* @__PURE__ */ React10__default.default.createElement(
+    material.Chip,
+    {
+      className: "select-option-tag",
+      label: tag.label,
+      size: "small",
+      sx: (theme) => ({
+        height: 20,
+        borderRadius: 1,
+        fontWeight: 600,
+        color: `${theme.palette[color].main} !important`,
+        backgroundColor: styles.alpha(theme.palette[color].main, 0.12)
+      })
+    }
+  ));
+};
 
 // src/components/fields/SelectFieldComponent/SelectField.scss
 var css16 = `.select-field .MuiFormLabel-root {
@@ -2218,6 +2250,7 @@ var SelectField = ({
       menuPlacement: props.menuPlacement,
       value: props.value,
       getOptionLabel: props.getOptionLabel,
+      formatOptionLabel: props.getOptionTag ? buildFormatOptionLabel(props.getOptionTag, props.getOptionLabel) : void 0,
       theme: buildReactSelectTheme(theme),
       styles: buildReactSelectStyles(theme)
     }
@@ -2292,6 +2325,7 @@ var SelectAsyncField = ({
       menuPlacement: props.menuPlacement,
       value: props.value,
       getOptionLabel: props.getOptionLabel,
+      formatOptionLabel: props.getOptionTag ? buildFormatOptionLabel(props.getOptionTag, props.getOptionLabel) : void 0,
       theme: buildReactSelectTheme(theme),
       styles: buildReactSelectStyles(theme)
     }