fis-component 0.1.8 → 0.1.9

package/dist/cjs/index.js

@@ -63142,6 +63142,12 @@ const DivSwitchKnobSC = styled.div `
           left: ${getTheme("com/switch/item/size-md/left-padding")};
         `}
 `;
+const DivWrapperSC$6 = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${getTheme("com/input/vertical-gap")};
+  width: fit-content;
+`;
 const DivSwitchContainerSC = styled.div `
   display: flex;
   align-items: flex-start;
@@ -63209,9 +63215,29 @@ const DivSwitchContainerSC = styled.div `
     `}
 `;
 
-const FISSwitch = React.forwardRef(({ isOn, disabled = false, size = "md", label, subLabel, onToggle, ...props }, ref) => {
+const DivLabelSC = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+const LabelTextSC = styled.label `
+  ${getTheme("Label/Sm")}
+  color: ${getTheme("com/input/label/label/color-text")};
+`;
+const SpanRequiredSC = styled.span `
+  ${getTheme("Label/Sm")}
+  color: ${getTheme("com/input/label/required-mark/color-text")};
+`;
+
+const FISInputLabel = (props) => {
+    const { textLabel, required, iconLabel, onClickIconLabel } = props;
+    return (jsxRuntime.jsxs(DivLabelSC, { children: [jsxRuntime.jsxs(LabelTextSC, { children: [textLabel, required && jsxRuntime.jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsxRuntime.jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
+};
+FISInputLabel.displayName = "FISInputLabel";
+
+const FISSwitch = React.forwardRef(({ isOn, disabled = false, size = "md", label, subLabel, onToggle, textLabel = "", required, iconLabel, onClickIconLabel, ...props }, ref) => {
     const labelContent = label || subLabel ? (jsxRuntime.jsxs(DivSwitchLabelContainerSC, { children: [label && jsxRuntime.jsx(SpanLabelSC$2, { "$size": size, children: label }), subLabel && jsxRuntime.jsx(SpanSubLabelSC$1, { "$size": size, children: subLabel })] })) : null;
-    return (jsxRuntime.jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, onClick: () => !disabled && onToggle(), ...props, children: [jsxRuntime.jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsxRuntime.jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] }));
+    return (jsxRuntime.jsxs(DivWrapperSC$6, { ...props, onClick: () => !disabled && onToggle(), children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, children: [jsxRuntime.jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsxRuntime.jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] })] }));
 });
 // Add display name for better debugging experience
 FISSwitch.displayName = "FISSwitch";
@@ -65305,26 +65331,6 @@ const SpanHintSC$3 = styled.span `
   }
 `;
 
-const DivLabelSC = styled.div `
-  width: 100%;
-  display: flex;
-  align-items: center;
-`;
-const LabelTextSC = styled.label `
-  ${getTheme("Label/Sm")}
-  color: ${getTheme("com/input/label/label/color-text")};
-`;
-const SpanRequiredSC = styled.span `
-  ${getTheme("Label/Sm")}
-  color: ${getTheme("com/input/label/required-mark/color-text")};
-`;
-
-const FISInputLabel = (props) => {
-    const { textLabel, required, iconLabel, onClickIconLabel } = props;
-    return (jsxRuntime.jsxs(DivLabelSC, { children: [jsxRuntime.jsxs(LabelTextSC, { children: [textLabel, required && jsxRuntime.jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsxRuntime.jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
-};
-FISInputLabel.displayName = "FISInputLabel";
-
 /**
  * A utility function to merge multiple React refs into a single callback function.
  * This function accepts any number of refs as arguments and returns a callback function.
@@ -66513,13 +66519,13 @@ const FISInputArea = React.forwardRef((props, ref) => {
                             "input-area-icon": iconSuffix,
                         }) }), iconSuffix && (jsxRuntime.jsx(DivIconSC$1, { className: classNames({
                             "input-area-lg": size === "lg",
-                        }), children: jsxRuntime.jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsxRuntime.jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsxRuntime.jsx(ResizeIcon, {}) })] }), jsxRuntime.jsxs(DivBottomSC, { children: [jsxRuntime.jsx(SpanHintSC$2, { className: classNames({
+                        }), children: jsxRuntime.jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsxRuntime.jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsxRuntime.jsx(ResizeIcon, {}) })] }), (!!message || (showCount && maxLength > 0)) && (jsxRuntime.jsxs(DivBottomSC, { children: [jsxRuntime.jsx(SpanHintSC$2, { className: classNames({
                             disabled,
                             negative,
                             positive,
                         }), children: message ? message : "" }), jsxRuntime.jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxRuntime.jsxs("span", { className: classNames("text-area__count", {
                                 negative: getCurrentValue()?.length > maxLength,
-                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
+                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] }))] }));
 });
 FISInputArea.displayName = "FISInputArea";
 
@@ -72574,28 +72580,36 @@ const DivHeaderCellContainerSC = styled.div `
       justify-content: ${(props) => props.$textAlign === "right" ? "flex-end" : "space-between"};
       width: 100%;
       gap: ${getTheme("com/table/title-cell/default/label/vertical-gap")};
+      .label-container {
+        display: flex;
+        gap: 4px;
 
-      .label {
-        ${getTheme("Label/XS")};
-        width: 100%;
-        display: inline-block;
-        ${(props) => (props.$textAlign === "right" ? "text-align: end" : "")};
-        color: ${(props) => getTheme(`com/table/title-cell/${props?.$disabled ? "disable" : "default"}/label/color-text`)};
+        .label {
+          ${getTheme("Label/XS")};
+          width: 100%;
+          display: inline-block;
+          ${(props) => (props.$textAlign === "right" ? "text-align: end" : "")};
+          color: ${(props) => getTheme(`com/table/title-cell/${props?.$disabled ? "disable" : "default"}/label/color-text`)};
 
-        ${(props) => {
+          ${(props) => {
     if (props.$hasTruncateLabel) {
         return styled.css `
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            `;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              `;
     }
     else {
         return styled.css `
-              white-space: pre-wrap;
-            `;
+                white-space: pre-wrap;
+              `;
     }
 }};
+        }
+        .required-asterisk {
+          ${getTheme("Label/XS")};
+          color: #D92D20;
+        }
       }
 
       .right-component-father {
@@ -72629,8 +72643,8 @@ const DivHeaderCellContainerSC = styled.div `
   }
 `;
 
-const FISTableHeaderCell = React.forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", ...rest }, ref) => {
-    return (jsxRuntime.jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxRuntime.jsxs("div", { className: "header-cell-content", children: [jsxRuntime.jsxs("div", { className: "cell-content title", children: [label && jsxRuntime.jsx("div", { className: "label", children: label }), rightComponent && (jsxRuntime.jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsxRuntime.jsx("div", { className: "cell-content", children: jsxRuntime.jsx("div", { className: "description", children: description }) }))] }) }));
+const FISTableHeaderCell = React.forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", required, ...rest }, ref) => {
+    return (jsxRuntime.jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxRuntime.jsxs("div", { className: "header-cell-content", children: [jsxRuntime.jsxs("div", { className: "cell-content title", children: [label && (jsxRuntime.jsxs("div", { className: "label-container", children: [jsxRuntime.jsx("div", { className: "label", children: label }), required && jsxRuntime.jsx("div", { className: "required-asterisk", children: "*" })] })), rightComponent && (jsxRuntime.jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsxRuntime.jsx("div", { className: "cell-content", children: jsxRuntime.jsx("div", { className: "description", children: description }) }))] }) }));
 });
 FISTableHeaderCell.displayName = "FISTableHeaderCell";
 
@@ -72930,8 +72944,8 @@ const DivIconSC = styled.div `
 }}
 `;
 
-const FISTableCell = React.forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, ...rest }, ref) => {
-    return (jsxRuntime.jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content ? "true" : undefined, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxRuntime.jsxs("div", { className: "single-line-content", children: [icon && (jsxRuntime.jsx("div", { className: "icon-box", children: jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxRuntime.jsxs("div", { className: "content-box", children: [content && jsxRuntime.jsx("div", { className: "content", children: content }), description && (jsxRuntime.jsx("div", { className: "description", children: description }))] }))] })) : (jsxRuntime.jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxRuntime.jsxs("div", { className: "content-box", children: [icon && (jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsxRuntime.jsx("div", { className: "content", children: content })] })), description && jsxRuntime.jsx("div", { className: "description", children: description })] })) }));
+const FISTableCell = React.forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, tooltip = false, placement = "top", variantTooltip = "primary", ...rest }, ref) => {
+    return (jsxRuntime.jsx(FISTooltip, { variant: variantTooltip, placement: placement, title: tooltip ? content || "" : undefined, children: jsxRuntime.jsx(DivColumnCellContainerSC, { "$hasBorder": hasBorder, "$disabled": disabled, "$variant": variant, "$textAlign": textAlign, "$contentWrapText": contentWrapText, "$hasContent": content ? "true" : undefined, "$hasDescription": description, ref: ref, className: classNames("column-cell-container", className), ...rest, children: textAlign === COLUMN_TEXT_ALIGN.SINGLE_LINE ? (jsxRuntime.jsxs("div", { className: "single-line-content", children: [icon && (jsxRuntime.jsx("div", { className: "icon-box", children: jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxRuntime.jsxs("div", { className: "content-box", children: [content && jsxRuntime.jsx("div", { className: "content", children: content }), description && (jsxRuntime.jsx("div", { className: "description", children: description }))] }))] })) : (jsxRuntime.jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxRuntime.jsxs("div", { className: "content-box", children: [icon && (jsxRuntime.jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsxRuntime.jsx("div", { className: "content", children: content })] })), description && jsxRuntime.jsx("div", { className: "description", children: description })] })) }) }));
 });
 FISTableCell.displayName = "FISTableCell";
 
@@ -74344,48 +74358,6 @@ const FISSplitButton = React.forwardRef((props, ref) => {
 });
 FISSplitButton.displayName = "FISSplitButton";
 
-const DivWrapperSC$1 = styled.div `
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: ${getTheme("com/input/vertical-gap")};
-`;
-const preventSelection = styled.css `
-  user-select: none !important;
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  -ms-user-select: none !important;
-  cursor: pointer !important;
-`;
-const DivInputWrapperSC = styled.div `
-  position: relative;
-  display: inline-block;
-  width: 100%;
-
-  ${(props) => props.$hasValue &&
-    styled.css `
-      ${preventSelection}
-
-      input {
-        ${preventSelection}
-        pointer-events: none;
-      }
-    `}
-`;
-const DivDropdownMenuSC = styled.div `
-  margin-top: ${getTheme("com/select/vertical-gap")};
-`;
-const SelectedTagsWrapper = styled.div `
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${getTheme("com/combo-box/selected-data/horizontal-gap")};
-  width: 100%;
-  max-height: calc(
-    2 * ${getTheme("com/chips-button/size-xs/height")} +
-      ${getTheme("com/combo-box/selected-data/horizontal-gap")}
-  );
-`;
-
 const InputSC = styled.input `
   width: 100%;
   cursor: pointer;
@@ -74463,7 +74435,7 @@ const InputSC = styled.input `
     }
   }
 `;
-const DivWrapperSC = styled.div `
+const DivWrapperSC$1 = styled.div `
   width: 100%;
   display: flex;
   align-items: center;
@@ -74667,10 +74639,52 @@ const FISSelectItem = React.forwardRef((props, ref) => {
             iconPrefix: iconPrefix,
             negative: negative,
             activeDropdown: activeDropdown,
-        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxRuntime.jsxs(DivWrapperSC, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
+        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxRuntime.jsxs(DivWrapperSC$1, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
 
+const DivWrapperSC = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${getTheme("com/input/vertical-gap")};
+`;
+const preventSelection = styled.css `
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  cursor: pointer !important;
+`;
+const DivInputWrapperSC = styled.div `
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  ${(props) => props.$hasValue &&
+    styled.css `
+      ${preventSelection}
+
+      input {
+        ${preventSelection}
+        pointer-events: none;
+      }
+    `}
+`;
+const DivDropdownMenuSC = styled.div `
+  margin-top: ${getTheme("com/select/vertical-gap")};
+`;
+const SelectedTagsWrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${getTheme("com/combo-box/selected-data/horizontal-gap")};
+  width: 100%;
+  max-height: calc(
+    2 * ${getTheme("com/chips-button/size-xs/height")} +
+      ${getTheme("com/combo-box/selected-data/horizontal-gap")}
+  );
+`;
+
 function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
@@ -74684,7 +74698,9 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
     const inputRef = React.useRef(null);
     // Expose focus and openDropdown methods via ref
     React.useImperativeHandle(ref, () => ({
-        ...inputRef.current,
+        focus: () => {
+            inputRef.current?.focus();
+        },
         openDropdown: () => {
             if (!disabled && !isOpen) {
                 setIsOpen(true);
@@ -74865,7 +74881,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         }
         return selectInput;
     };
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxRuntime.jsxs(DivWrapperSC, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,