techsbcn-storybook 2.11.0 → 2.12.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/index.js

@@ -551,7 +551,7 @@ var TextFieldComponent = ({
         input: {
           className: `${noBorders ? "no-border" : ""} ${!rest.disabled && hover ? "main-border-color" : ""}
           ${endIcon ? "end-icon-padding" : ""}`,
-          disableUnderline,
+          ...variant !== "outlined" && { disableUnderline },
           startAdornment: startIcon,
           endAdornment: endIcon,
           classes: { focused: "main-border-color" },
@@ -2147,6 +2147,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 +2239,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 +2314,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)
     }
@@ -2775,7 +2798,7 @@ var DatePickerComponent = ({
           slotProps: {
             input: {
               className: `${noBorders ? "no-border" : ""} ${!rest.disabled && hover ? "main-border-color" : ""}`,
-              disableUnderline,
+              ...variant !== "outlined" && { disableUnderline },
               startAdornment: startIcon,
               endAdornment: endIcon,
               classes: { focused: "main-border-color" },