fis-component 0.0.65 → 0.0.66

package/dist/cjs/index.js

@@ -73320,12 +73320,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 = React.forwardRef((props, ref) => {
-    const { size = "md", iconPrefix, iconSuffix, disabled, activeDropdown, ...rest } = props;
+    const { size = "md", iconPrefix, iconSuffix, disabled, activeDropdown, negative, ...rest } = props;
     return (jsxRuntime.jsx(DivContainerSC, { className: classNames({
             iconPrefix: iconPrefix,
+            negative: negative,
         }), "$size": size, children: jsxRuntime.jsxs(DivWrapperSC, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
@@ -73469,7 +73492,7 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [referenceElement, popperElement]);
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && 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$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && 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,