@luscii-healthtech/web-ui 55.0.1 → 55.1.0

package/dist/index.development.js

@@ -4463,16 +4463,50 @@ function SectionItemWithContent(props) {
 var css_248z$2 = ".customized-select [class*=MenuList] [class*=option]::after {\n  position: absolute;\n  content: \"\";\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E    %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E        %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  right: 12px;\n  height: 1rem;\n  width: 1rem;\n}";
 styleInject(css_248z$2);
 
-const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(ChevronDownIcon, {}) }));
+const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: props.isMulti ? jsxRuntime.jsx(ChevronDoubleIcon, {}) : jsxRuntime.jsx(ChevronDownIcon, {}) }));
 
 const SelectLoadingIndicator = (props) => jsxRuntime.jsx(LoadingIndicator, Object.assign({ asSpinner: true, spinnerColor: "gray" }, props.innerProps, { style: props.getStyles("loadingIndicator", props) }));
 
+const SelectOptionAvatar = ({ avatar }) => {
+  var _a, _b;
+  return jsxRuntime.jsx(Avatar, {
+    size: "xsmall",
+    color: avatar.isSelf ? "primary" : "slate",
+    // First code point + combining marks, so a decomposed "Ángela" keeps its accent.
+    initials: (_b = (_a = avatar.initials.trim().match(/^.\p{M}*/u)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "",
+    src: avatar.src,
+    alt: avatar.alt,
+    className: "ui:shrink-0 ui:border ui:border-solid ui:border-border-neutral-secondary-default"
+  });
+};
+
+const SelectMultiValueLabel = (props) => {
+  var _a;
+  const avatar = (_a = props.data) === null || _a === void 0 ? void 0 : _a.avatar;
+  return jsxRuntime.jsx(ReactSelect.components.MultiValueLabel, Object.assign({}, props, { children: avatar ? jsxRuntime.jsxs("span", { className: "ui:flex ui:items-center ui:gap-f_base", children: [jsxRuntime.jsx(SelectOptionAvatar, { avatar }), props.children] }) : props.children }));
+};
+
+const SelectOption = (props) => {
+  var _a;
+  const avatar = (_a = props.data) === null || _a === void 0 ? void 0 : _a.avatar;
+  return jsxRuntime.jsx(ReactSelect.components.Option, Object.assign({}, props, { children: props.isMulti && avatar ? jsxRuntime.jsxs("span", { className: "ui:flex ui:items-center ui:gap-f_base", children: [jsxRuntime.jsx(SelectOptionAvatar, { avatar }), props.children] }) : props.children }));
+};
+
+const MULTI_FONT_SIZE = "14px";
+const MULTI_LINE_HEIGHT = "var(--ui-semantic-size-m, 20px)";
+const MULTI_MIN_HEIGHT = "44px";
+const RADIUS_S = "var(--ui-semantic-radius-s, 4px)";
+const SPACING_XS = "var(--ui-semantic-spacing-xs, 2px)";
+const SPACING_S = "var(--ui-semantic-spacing-s, 4px)";
+const SPACING_BASE = "var(--ui-semantic-spacing-base, 8px)";
+const SPACING_M = "var(--ui-semantic-spacing-m, 12px)";
 function generateCustomStyles(hasError) {
   return {
     option: (baseStyles, state) => {
       return Object.assign(Object.assign({}, baseStyles), {
         fontWeight: state.isSelected ? "bold" : "normal",
-        fontSize: "14px",
+        fontSize: state.isMulti ? MULTI_FONT_SIZE : "14px",
+        lineHeight: state.isMulti ? MULTI_LINE_HEIGHT : void 0,
         // tailwind blue-50
         backgroundColor: state.isFocused ? "#F2FAFD" : "none",
         color: "inherit",
@@ -4496,30 +4530,55 @@ function generateCustomStyles(hasError) {
     input: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
     },
-    multiValue: (baseStyles) => {
+    multiValue: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
       return Object.assign(Object.assign({}, baseStyles), {
-        // background-info-primary-default (blue-300)
-        backgroundColor: "#d7e3fb",
-        borderRadius: "4px",
-        lineHeight: "1rem"
+        backgroundColor: hasAvatar ? "var(--ui-color-background-neutral-secondary-default, #ffffff)" : "var(--ui-color-background-info-primary-default, #d7e3fb)",
+        border: hasAvatar ? "1px solid var(--ui-color-border-neutral-secondary-default, #cbd5e1)" : "none",
+        borderRadius: RADIUS_S,
+        // Clip the children so their backgrounds respect the corner radius.
+        overflow: "hidden",
+        margin: 0
       });
     },
-    multiValueLabel: (baseStyles) => {
+    multiValueLabel: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
       return Object.assign(Object.assign({}, baseStyles), {
-        // text-info-primary-default (brand-900)
-        color: "#112d9c",
-        fontSize: "14px"
+        color: hasAvatar ? "var(--ui-color-text-neutral-primary-default, #162130)" : "var(--ui-color-text-info-primary-default, #112d9c)",
+        fontSize: MULTI_FONT_SIZE,
+        lineHeight: MULTI_LINE_HEIGHT,
+        // Shorthand resets react-select's narrower `paddingLeft` default.
+        // No avatar → more leading space, nothing holds the label off the edge.
+        padding: `${SPACING_S} ${SPACING_S} ${SPACING_S} ${hasAvatar ? SPACING_BASE : SPACING_M}`
       });
     },
-    multiValueRemove: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { color: "#112d9c", borderRadius: "0 4px 4px 0", "&:hover": {
-        // background-info-primary-hovered (blue-500)
-        backgroundColor: "#b3cafc",
-        color: "#112d9c"
-      } });
+    multiValueRemove: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
+      const color = hasAvatar ? "var(--ui-color-icon-brand-primary-default, #1e40af)" : "var(--ui-color-text-info-primary-default, #112d9c)";
+      return Object.assign(Object.assign({}, baseStyles), {
+        color,
+        // react-select hardcodes a 14px cross here (its ClearIndicator gets 20).
+        // Resize to the design's 20px via the SVG, and drop the vertical padding
+        // so the button's 24px content box stays under the 28px label and the
+        // tag height — and so the control height — is unchanged. The button is a
+        // stretched flex child, so the hit area is still the full 28px.
+        padding: `${SPACING_XS} ${SPACING_S}`,
+        "& svg": { width: "20px", height: "20px" },
+        borderRadius: 0,
+        "&:hover": {
+          backgroundColor: hasAvatar ? "var(--ui-color-background-neutral-primary-default, #f5f7fa)" : "var(--ui-color-background-info-primary-hovered, #b3cafc)",
+          color
+        }
+      });
     },
-    valueContainer: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem", margin: 0 });
+    valueContainer: (baseStyles, state) => {
+      return Object.assign(Object.assign(Object.assign({}, baseStyles), { margin: 0 }), state.isMulti ? {
+        gap: SPACING_BASE,
+        padding: `${SPACING_BASE} ${SPACING_BASE} ${SPACING_BASE} ${SPACING_M}`
+      } : { padding: ".5rem" });
     },
     control: (baseStyles, state) => {
       const navyBlue = "rgb(30 64 175)";
@@ -4533,19 +4592,20 @@ function generateCustomStyles(hasError) {
       const validatedBorderColor = hasError ? red : defaultBorderColor;
       const defaultOutline = hasError ? lightRedTransparent : darkBlue;
       const validatedOutline = `2px solid ${state.isFocused ? defaultOutline : "transparent"}`;
+      const multiOnly = state.isMulti;
       return Object.assign(Object.assign({}, baseStyles), {
-        fontSize: "14px",
+        fontSize: multiOnly ? MULTI_FONT_SIZE : "14px",
         transition: "border 0.3s ease-in-out",
         // primary outline
-        outline: validatedOutline,
-        outlineOffset: "-2px",
-        borderColor: validatedBorderColor,
+        outline: multiOnly ? void 0 : validatedOutline,
+        outlineOffset: multiOnly ? void 0 : "-2px",
+        borderColor: multiOnly ? hasError ? red : state.isFocused || state.menuIsOpen ? "var(--ui-color-border-neutral-primary-selected, #1e40af)" : "var(--ui-color-border-neutral-secondary-default, #cbd5e1)" : validatedBorderColor,
         borderWidth: "1px !important",
         borderStyle: "solid",
-        borderRadius: "4px",
-        minHeight: state.isMulti ? "44px" : void 0,
-        height: state.isMulti ? void 0 : "44px",
-        boxShadow: `0px 1px 2px ${lightShadow}`,
+        borderRadius: multiOnly ? RADIUS_S : "4px",
+        minHeight: multiOnly ? MULTI_MIN_HEIGHT : void 0,
+        height: multiOnly ? void 0 : "44px",
+        boxShadow: multiOnly ? "none" : `0px 1px 2px ${lightShadow}`,
         "&:hover": {
           borderColor: mediumGray,
           // selector for the chevron
@@ -4557,7 +4617,7 @@ function generateCustomStyles(hasError) {
     },
     // The placeholder has the following css prop: grid-area: 1/1/2/3;
     // And grid-area doesn't work on IE11, so we need to style it slightly different.
-    placeholder: (baseStyles) => Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", margin: 0 }),
+    placeholder: (baseStyles, state) => Object.assign(Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", margin: 0 }), state.isMulti ? { fontSize: MULTI_FONT_SIZE, lineHeight: MULTI_LINE_HEIGHT } : {}),
     singleValue: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { fontSize: "14px" });
     },
@@ -4631,7 +4691,9 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
     components: {
       SelectContainer: CustomContainer,
       DropdownIndicator: SelectDropdownIndicator,
-      LoadingIndicator: SelectLoadingIndicator
+      LoadingIndicator: SelectLoadingIndicator,
+      MultiValueLabel: SelectMultiValueLabel,
+      Option: SelectOption
     }
   });
   if (isCreatable) {