@officesdk/design 0.1.10 → 0.1.12

package/dist/components/cjs/index.d.ts

@@ -187,10 +187,12 @@ declare const Switch: React.FC<SwitchProps>;
 interface RadioProps {
     /**
      * Whether the radio is checked
+     * @default false
      */
     checked?: boolean;
     /**
      * Default checked state
+     * @default false
      */
     defaultChecked?: boolean;
     /**
@@ -213,6 +215,11 @@ interface RadioProps {
      * Callback when checked state changes
      */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * prevent default click event, if true, change event will not be triggered
+     * @default false
+     */
+    clickPreventDefault?: boolean;
     /**
      * Custom className
      */
@@ -265,6 +272,11 @@ interface CheckboxProps {
      * Callback when checked state changes
      */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * prevent default click event, if true, change event will not be triggered
+     * @default false
+     */
+    clickPreventDefault?: boolean;
     /**
      * Custom className
      */
@@ -391,6 +403,14 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
      * Custom inline styles
      */
     style?: React.CSSProperties;
+    /**
+     * Custom input className
+     */
+    inputClassName?: string;
+    /**
+     * Custom input styles
+     */
+    inputStyle?: React.CSSProperties;
 }
 /**
  * Input Component

package/dist/components/cjs/index.js

@@ -1684,6 +1684,7 @@ var RadioInner = exports.styled.div`
 }}
 `;
 var Radio = ({
+  clickPreventDefault = false,
   checked: controlledChecked,
   defaultChecked = false,
   disabled = false,
@@ -1716,12 +1717,18 @@ var Radio = ({
   const handleBlur = React3.useCallback(() => {
     setIsFocused(false);
   }, []);
+  const handleContainerClick = React3.useCallback((e) => {
+    if (clickPreventDefault) {
+      e.preventDefault();
+    }
+  }, []);
   return /* @__PURE__ */ React3__default.default.createElement(
     RadioContainer,
     {
       $disabled: disabled,
       className,
-      style
+      style,
+      onClick: handleContainerClick
     },
     /* @__PURE__ */ React3__default.default.createElement(
       HiddenInput2,
@@ -1873,6 +1880,7 @@ var Checkbox = ({
   name,
   id,
   onChange,
+  clickPreventDefault = false,
   className,
   style
 }) => {
@@ -1904,12 +1912,18 @@ var Checkbox = ({
   const handleBlur = React3.useCallback(() => {
     setIsFocused(false);
   }, []);
+  const handleContainerClick = React3.useCallback((e) => {
+    if (clickPreventDefault) {
+      e.preventDefault();
+    }
+  }, []);
   return /* @__PURE__ */ React3__default.default.createElement(
     CheckboxContainer,
     {
       $disabled: disabled,
       className,
-      style
+      style,
+      onClick: handleContainerClick
     },
     /* @__PURE__ */ React3__default.default.createElement(
       HiddenInput3,
@@ -2205,6 +2219,8 @@ var Input = React3.forwardRef(
     clearIcon,
     className,
     style,
+    inputClassName,
+    inputStyle,
     onFocus,
     onBlur,
     value,
@@ -2286,6 +2302,8 @@ var Input = React3.forwardRef(
           onChange: handleChange,
           onFocus: handleFocus,
           onBlur: handleBlur,
+          className: inputClassName,
+          style: inputStyle,
           ...rest
         }
       ), clearButtonNode),