@officesdk/design 0.1.9 → 0.1.11

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
      */

package/dist/components/cjs/index.js

@@ -1473,9 +1473,9 @@ var Track = exports.styled.div`
 var Thumb = exports.styled.div`
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
   border-style: solid;
   box-sizing: border-box;
+  left: 0;
   transition: ${({ theme: theme3 }) => theme3.components.switch.transition || "all 0.2s ease"};
 
   ${({ $size, $checked, theme: theme3 }) => {
@@ -1484,12 +1484,17 @@ var Thumb = exports.styled.div`
   const thumbOffset = sizeConfig.thumb.offset;
   const thumbBorderRadius = sizeConfig.thumb.borderRadius;
   const thumbBorderWidth = sizeConfig.thumb.borderWidth;
+  const trackWidth = sizeConfig.container.width;
+  const thumbSizeNum = parseFloat(thumbSize);
+  const offsetNum = parseFloat(thumbOffset);
+  const trackWidthNum = parseFloat(trackWidth);
+  const leftPosition = $checked ? `${trackWidthNum - thumbSizeNum - offsetNum}px` : thumbOffset;
   return `
       width: ${thumbSize};
       height: ${thumbSize};
       border-radius: ${thumbBorderRadius};
       border-width: ${thumbBorderWidth};
-      ${$checked ? "right" : "left"}: ${thumbOffset};
+      transform: translate(${leftPosition}, -50%);
     `;
 }}
 
@@ -1679,6 +1684,7 @@ var RadioInner = exports.styled.div`
 }}
 `;
 var Radio = ({
+  clickPreventDefault = false,
   checked: controlledChecked,
   defaultChecked = false,
   disabled = false,
@@ -1711,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,
@@ -1868,6 +1880,7 @@ var Checkbox = ({
   name,
   id,
   onChange,
+  clickPreventDefault = false,
   className,
   style
 }) => {
@@ -1899,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,