fis-component 0.1.8 → 0.1.9

package/dist/cjs/types/src/components/Select/index.d.ts

@@ -1,3 +1,3 @@
-import { SelectProps } from "./types";
-declare const FISSelect: import("react").ForwardRefExoticComponent<SelectProps<string | number> & import("react").RefAttributes<HTMLInputElement>>;
+import { FISSelectRef, SelectProps } from "./types";
+declare const FISSelect: import("react").ForwardRefExoticComponent<SelectProps<string | number> & import("react").RefAttributes<FISSelectRef>>;
 export default FISSelect;

package/dist/cjs/types/src/components/Select/types.d.ts

@@ -43,4 +43,8 @@ export type MultiSelectProps<T extends string | number> = BaseSelectProps<T> & {
     displayValue?: (items: SelectOptionItem<T>[]) => string;
 };
 export type SelectProps<T extends string | number> = SingleSelectProps<T> | MultiSelectProps<T>;
+export interface FISSelectRef {
+    focus: () => void;
+    openDropdown: () => void;
+}
 export {};

package/dist/cjs/types/src/components/Switch/Switch.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import FISSwitch from '.';
+import type { Meta, StoryObj } from "@storybook/react";
+import FISSwitch from ".";
 declare const meta: Meta<typeof FISSwitch>;
 export default meta;
 type Story = StoryObj<typeof FISSwitch>;

package/dist/cjs/types/src/components/Switch/index.d.ts

@@ -46,6 +46,10 @@ interface SwitchProps {
      * - Used to update the `isOn` state.
      */
     onToggle: () => void;
+    textLabel?: string;
+    required?: boolean;
+    iconLabel?: React.ReactNode;
+    onClickIconLabel?: () => void;
 }
 declare const FISSwitch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLDivElement>>;
 export default FISSwitch;

package/dist/cjs/types/src/components/Switch/styles.d.ts

@@ -13,6 +13,7 @@ export declare const DivSwitchKnobSC: import("styled-components/dist/types").ISt
     $isOn: boolean;
     $size: SwitchSize;
 }>> & string;
+export declare const DivWrapperSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DivSwitchContainerSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $size: SwitchSize;
     $isOn: boolean;

package/dist/cjs/types/src/components/Table/ColumnCell/index.d.ts

@@ -1,4 +1,5 @@
 import { DetailedHTMLProps, HTMLAttributes, ReactElement } from "react";
+import { TooltipPlacement } from "antd/es/tooltip";
 interface ColumnCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "content"> {
     className?: string;
     textAlign?: string;
@@ -9,6 +10,9 @@ interface ColumnCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivE
     icon?: ReactElement;
     disabled?: boolean;
     hasBorder?: boolean;
+    tooltip?: boolean;
+    placement?: TooltipPlacement;
+    variantTooltip?: "primary" | "secondary";
 }
 declare const FISTableCell: import("react").ForwardRefExoticComponent<ColumnCellProps & import("react").RefAttributes<HTMLLabelElement>>;
 export default FISTableCell;

package/dist/cjs/types/src/components/Table/HeaderCell/index.d.ts

@@ -9,6 +9,7 @@ interface HeaderCellProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivE
     hasRightDivider?: boolean;
     hasTruncateLabel?: boolean;
     onlyIcon?: boolean;
+    required?: boolean;
 }
 declare const FISTableHeaderCell: import("react").ForwardRefExoticComponent<HeaderCellProps & import("react").RefAttributes<HTMLLabelElement>>;
 export default FISTableHeaderCell;

package/dist/cjs/types/src/components/Tooltip/index.d.ts

@@ -16,7 +16,7 @@ interface TooltipProps extends Omit<TooltipPropsAntd, "variant" | "title"> {
     /** Additional class names to apply to the tooltip*/
     className?: string | undefined;
     /** The color of the tooltip */
-    variant: TooltipColor;
+    variant?: TooltipColor;
     /** The tooltip title, which can be a custom object or a React node */
     title: TooltipTitleCustom | React.ReactNode;
     /** The size of the tooltip (optional) */

package/dist/esm/index.js

@@ -63122,6 +63122,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;
@@ -63189,9 +63195,29 @@ const DivSwitchContainerSC = styled.div `
     `}
 `;
 
-const FISSwitch = 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 (jsxs(DivLabelSC, { children: [jsxs(LabelTextSC, { children: [textLabel, required && jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
+};
+FISInputLabel.displayName = "FISInputLabel";
+
+const FISSwitch = forwardRef(({ isOn, disabled = false, size = "md", label, subLabel, onToggle, textLabel = "", required, iconLabel, onClickIconLabel, ...props }, ref) => {
     const labelContent = label || subLabel ? (jsxs(DivSwitchLabelContainerSC, { children: [label && jsx(SpanLabelSC$2, { "$size": size, children: label }), subLabel && jsx(SpanSubLabelSC$1, { "$size": size, children: subLabel })] })) : null;
-    return (jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, onClick: () => !disabled && onToggle(), ...props, children: [jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] }));
+    return (jsxs(DivWrapperSC$6, { ...props, onClick: () => !disabled && onToggle(), children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxs(DivSwitchContainerSC, { ref: ref, "$size": size, "$isOn": isOn, "$disabled": disabled, children: [jsx(DivSwitchTrackSC, { "$isOn": isOn, children: jsx(DivSwitchKnobSC, { "$isOn": isOn, "$size": size }) }), labelContent] })] }));
 });
 // Add display name for better debugging experience
 FISSwitch.displayName = "FISSwitch";
@@ -65285,26 +65311,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 (jsxs(DivLabelSC, { children: [jsxs(LabelTextSC, { children: [textLabel, required && jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (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.
@@ -66493,13 +66499,13 @@ const FISInputArea = forwardRef((props, ref) => {
                             "input-area-icon": iconSuffix,
                         }) }), iconSuffix && (jsx(DivIconSC$1, { className: classNames({
                             "input-area-lg": size === "lg",
-                        }), children: jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsx(ResizeIcon, {}) })] }), jsxs(DivBottomSC, { children: [jsx(SpanHintSC$2, { className: classNames({
+                        }), children: jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsx(ResizeIcon, {}) })] }), (!!message || (showCount && maxLength > 0)) && (jsxs(DivBottomSC, { children: [jsx(SpanHintSC$2, { className: classNames({
                             disabled,
                             negative,
                             positive,
                         }), children: message ? message : "" }), jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxs("span", { className: classNames("text-area__count", {
                                 negative: getCurrentValue()?.length > maxLength,
-                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
+                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] }))] }));
 });
 FISInputArea.displayName = "FISInputArea";
 
@@ -72554,28 +72560,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 css `
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            `;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              `;
     }
     else {
         return css `
-              white-space: pre-wrap;
-            `;
+                white-space: pre-wrap;
+              `;
     }
 }};
+        }
+        .required-asterisk {
+          ${getTheme("Label/XS")};
+          color: #D92D20;
+        }
       }
 
       .right-component-father {
@@ -72609,8 +72623,8 @@ const DivHeaderCellContainerSC = styled.div `
   }
 `;
 
-const FISTableHeaderCell = forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", ...rest }, ref) => {
-    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && jsx("div", { className: "label", children: label }), rightComponent && (jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsx("div", { className: "cell-content", children: jsx("div", { className: "description", children: description }) }))] }) }));
+const FISTableHeaderCell = forwardRef(({ className, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, textAlign = "left", required, ...rest }, ref) => {
+    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content title", children: [label && (jsxs("div", { className: "label-container", children: [jsx("div", { className: "label", children: label }), required && jsx("div", { className: "required-asterisk", children: "*" })] })), rightComponent && (jsx("div", { className: "right-component-father", children: rightComponent }))] }), description && (jsx("div", { className: "cell-content", children: jsx("div", { className: "description", children: description }) }))] }) }));
 });
 FISTableHeaderCell.displayName = "FISTableHeaderCell";
 
@@ -72910,8 +72924,8 @@ const DivIconSC = styled.div `
 }}
 `;
 
-const FISTableCell = forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, ...rest }, ref) => {
-    return (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 ? (jsxs("div", { className: "single-line-content", children: [icon && (jsx("div", { className: "icon-box", children: jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxs("div", { className: "content-box", children: [content && jsx("div", { className: "content", children: content }), description && (jsx("div", { className: "description", children: description }))] }))] })) : (jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxs("div", { className: "content-box", children: [icon && (jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsx("div", { className: "content", children: content })] })), description && jsx("div", { className: "description", children: description })] })) }));
+const FISTableCell = forwardRef(({ className, textAlign, variant = COLUMN_VARIANT.PRIMARY, content, description, icon, disabled, hasBorder, onChange, contentWrapText = false, tooltip = false, placement = "top", variantTooltip = "primary", ...rest }, ref) => {
+    return (jsx(FISTooltip, { variant: variantTooltip, placement: placement, title: tooltip ? content || "" : undefined, children: 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 ? (jsxs("div", { className: "single-line-content", children: [icon && (jsx("div", { className: "icon-box", children: jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon }) })), (content || description) && (jsxs("div", { className: "content-box", children: [content && jsx("div", { className: "content", children: content }), description && (jsx("div", { className: "description", children: description }))] }))] })) : (jsxs("div", { className: "left-right-content", children: [(icon || content) && (jsxs("div", { className: "content-box", children: [icon && (jsx(DivIconSC, { "$textAlign": textAlign, "$variant": variant, "$disabled": disabled, "$hasContent": content ? "true" : undefined, "$hasDescription": description, children: icon })), content && jsx("div", { className: "content", children: content })] })), description && jsx("div", { className: "description", children: description })] })) }) }));
 });
 FISTableCell.displayName = "FISTableCell";
 
@@ -74324,48 +74338,6 @@ const FISSplitButton = 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 = 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 &&
-    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;
@@ -74443,7 +74415,7 @@ const InputSC = styled.input `
     }
   }
 `;
-const DivWrapperSC = styled.div `
+const DivWrapperSC$1 = styled.div `
   width: 100%;
   display: flex;
   align-items: center;
@@ -74647,10 +74619,52 @@ const FISSelectItem = forwardRef((props, ref) => {
             iconPrefix: iconPrefix,
             negative: negative,
             activeDropdown: activeDropdown,
-        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
+        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxs(DivWrapperSC$1, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size, autoComplete: "off" }), iconSuffix && (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 = 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 &&
+    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";
 }
@@ -74664,7 +74678,9 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
     const inputRef = useRef(null);
     // Expose focus and openDropdown methods via ref
     useImperativeHandle(ref, () => ({
-        ...inputRef.current,
+        focus: () => {
+            inputRef.current?.focus();
+        },
         openDropdown: () => {
             if (!disabled && !isOpen) {
                 setIsOpen(true);
@@ -74845,7 +74861,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         }
         return selectInput;
     };
-    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    return (jsxs(DivWrapperSC, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,