fis-component 0.0.64 → 0.0.66

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

@@ -18,6 +18,10 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
      * Defines the type of the button.
      */
     underline?: boolean;
+    /**
+     * If true, text will be truncated with ellipsis on single line
+     */
+    singleLine?: boolean;
 }
 declare const FISLinkButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default FISLinkButton;

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

@@ -3,6 +3,7 @@ interface ButtonProps {
     $variant?: ButtonVariant;
     $size: ButtonSize;
     $underline?: boolean;
+    $singleLine?: boolean;
 }
 export declare const LinkButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;
 export declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

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

@@ -11,6 +11,8 @@ export interface SelectFieldProps extends Omit<ComponentPropsWithoutRef<"input">
     actived?: boolean;
     /**active-dropdown for current field*/
     activeDropdown?: boolean;
+    /**negative for current field*/
+    negative?: boolean;
 }
 declare const FISSelectItem: import("react").ForwardRefExoticComponent<SelectFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default FISSelectItem;

package/dist/esm/index.js

@@ -60832,6 +60832,15 @@ const LinkButtonStyled = styled.button `
     css `
       text-decoration: underline;
     `}
+
+  ${(props) => props.$singleLine &&
+    css `
+      .button-content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    `}
 `;
 const IconStyled$1 = styled.span `
   display: inline-flex;
@@ -60839,10 +60848,10 @@ const IconStyled$1 = styled.span `
 `;
 
 const FISLinkButton = forwardRef((props, ref) => {
-    const { type, children, size = "sm", variant = "default", underline, startIcon: startIconProp, endIcon: endIconProp, ...rest } = props;
+    const { children, size = "sm", variant = "default", underline, startIcon: startIconProp, endIcon: endIconProp, singleLine = false, ...rest } = props;
     const startIcon = startIconProp && (jsx(IconStyled$1, { className: "button-icon", children: startIconProp }));
     const endIcon = endIconProp && (jsx(IconStyled$1, { className: "button-icon", children: endIconProp }));
-    return (jsxs(LinkButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$underline": underline, children: [startIcon, jsx("span", { className: "button-content", children: children }), endIcon] }));
+    return (jsxs(LinkButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$underline": underline, "$singleLine": singleLine, children: [startIcon, jsx("span", { className: "button-content", children: children }), endIcon] }));
 });
 FISLinkButton.displayName = "FISLinkButton";
 
@@ -61456,7 +61465,7 @@ function FISProgressCircular({ variant, ...rest }) {
 FISProgressCircular.displayName = "FISProgressCircular";
 
 const FISIconButton = forwardRef((props, ref) => {
-    const { type, children, active = false, size = "md", variant = "primary", icon: iconProp, loading = false, disabled = false, ...rest } = props;
+    const { children, active = false, size = "md", variant = "primary", icon: iconProp, loading = false, disabled = false, ...rest } = props;
     return (jsx(ButtonStyled, { type: "button", ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, "$loading": loading, disabled: disabled || loading, children: loading ? (jsx(FISProgressCircular, { size: size, variant: "indeterminate", invert: variant === "primary-white" ||
                 variant === "secondary-white" ||
                 variant === "secondary-invisible-white" })) : (iconProp) }));
@@ -62377,10 +62386,10 @@ const ProgressCircularSC$1 = styled(FISProgressCircular) `
 `;
 
 const FISButton = forwardRef((props, ref) => {
-    const { active, type, children, size = "md", variant = "primary", loading, disabled = false, startIcon: startIconProp, endIcon: endIconProp, ...rest } = props;
+    const { active, children, size = "md", variant = "primary", loading, disabled = false, startIcon: startIconProp, endIcon: endIconProp, ...rest } = props;
     const startIcon = startIconProp && jsx(SpanIconSC$2, { children: startIconProp });
     const endIcon = endIconProp && jsx(SpanIconSC$2, { children: endIconProp });
-    return (jsxs(ButtonSC, { type: "button", ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, "$loading": loading, disabled: disabled || loading, children: [loading && (jsx(ProgressCircularSC$1, { size: size, variant: "indeterminate", invert: variant === "primary-white" || variant === "secondary-white" })), startIcon, jsx("span", { className: "button-content", children: children }), endIcon] }));
+    return (jsxs(ButtonSC, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, "$loading": loading, disabled: disabled || loading, children: [loading && (jsx(ProgressCircularSC$1, { size: size, variant: "indeterminate", invert: variant === "primary-white" || variant === "secondary-white" })), startIcon, jsx("span", { className: "button-content", children: children }), endIcon] }));
 });
 FISButton.displayName = "FISButton";
 
@@ -73291,12 +73300,35 @@ const DivContainerSC = styled.div `
       color: ${getTheme("com/select/field/default/icon/color-icon/active")};
     }
   }
+
+  // Design chưa có negative
+  &.negative {
+    outline-color: ${getTheme("com/input/field/negative/border/default")};
+    background-color: ${getTheme("com/input/field/negative/background/default")};
+
+    &:hover {
+      outline-color: ${getTheme("com/input/field/negative/border/hover")};
+      background-color: ${getTheme("com/input/field/negative/background/hover")};
+    }
+
+    &:has(${InputSC}:focus) {
+      outline-color: ${getTheme("com/input/field/negative/border/active")};
+      background-color: ${getTheme("com/input/field/negative/background/active")};
+      box-shadow: 0 0 0 ${getTheme("com/actived-mark/gap-spacing")}
+        ${getTheme("com/actived-mark/color-gap-spacing-negative")};
+    }
+
+    &::placeholder {
+      color: ${getTheme("com/input/field/negative/label/color-text/placeholder")};
+    }
+  }
 `;
 
 const FISSelectItem = forwardRef((props, ref) => {
-    const { size = "md", iconPrefix, iconSuffix, disabled, activeDropdown, ...rest } = props;
+    const { size = "md", iconPrefix, iconSuffix, disabled, activeDropdown, negative, ...rest } = props;
     return (jsx(DivContainerSC, { className: classNames({
             iconPrefix: iconPrefix,
+            negative: negative,
         }), "$size": size, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
@@ -73440,7 +73472,7 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [referenceElement, popperElement]);
-    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && 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$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && 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,