@dt-dds/react-checkbox 1.0.0-beta.61 → 1.0.0-beta.63

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @dt-ui/react-checkbox
 
+## 1.0.0-beta.63
+
+### Patch Changes
+
+- fix: checkbox box width reduction on long label
+
+## 1.0.0-beta.62
+
+### Minor Changes
+
+- feat: change theme icons to sharp
+
+### Patch Changes
+
+- fix: checkbox label alignment
+- Updated dependencies
+  - @dt-dds/react-icon@1.0.0-beta.62
+  - @dt-dds/themes@1.0.0-beta.14
+  - @dt-dds/react-core@1.0.0-beta.59
+
 ## 1.0.0-beta.61
 
 ### Patch Changes

package/dist/index.js

@@ -74,6 +74,11 @@ var SIZES = {
   small: 20,
   large: 24
 };
+var LABEL_HEIGHT_BUFFER = 1;
+var LABEL_LINE_HEIGHT = {
+  small: 16,
+  large: 20
+};
 
 // src/Checkbox.styled.ts
 var getCheckboxColors = (theme) => ({
@@ -150,6 +155,7 @@ var CheckboxBoxStyled = (0, import_styled.default)("div", {
   align-items: center;
   justify-content: center;
   border-radius: ${({ theme }) => theme.shape.checkbox};
+  flex-shrink: 0;
 
   ${({ theme, $checked, $indeterminate, $disabled, $error, $size }) => {
   const state = getCheckboxState(
@@ -242,11 +248,21 @@ var Checkbox = (0, import_react.forwardRef)(
     const theme = (0, import_react2.useTheme)();
     const internalRef = (0, import_react.useRef)(null);
     const mergedRef = mergeRefs(internalRef, ref);
+    const labelRef = (0, import_react.useRef)(null);
     (0, import_react.useEffect)(() => {
       if (internalRef.current) {
         internalRef.current.indeterminate = isIndeterminate;
       }
     }, [isIndeterminate]);
+    (0, import_react.useLayoutEffect)(() => {
+      if (!labelRef.current) return;
+      const labelContainer = labelRef.current.closest("label");
+      if (!labelContainer) return;
+      const el = labelRef.current;
+      const maxSingleLineHeight = LABEL_LINE_HEIGHT[size] + LABEL_HEIGHT_BUFFER;
+      const isWrapped = el.offsetHeight > maxSingleLineHeight;
+      labelContainer.style.alignItems = isWrapped ? "flex-start" : "center";
+    }, [label, children]);
     const handleChange = (event) => {
       if (isDisabled) return;
       onChange == null ? void 0 : onChange(event);
@@ -301,7 +317,15 @@ var Checkbox = (0, import_react.forwardRef)(
               ) : null
             }
           ),
-          hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxLabelStyled, { $disabled: isDisabled, $size: size, children: label || children }) : null
+          hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CheckboxLabelStyled,
+            {
+              $disabled: isDisabled,
+              $size: size,
+              ref: labelRef,
+              children: label || children
+            }
+          ) : null
         ]
       }
     );

package/dist/index.mjs

@@ -28,7 +28,12 @@ var __objRest = (source, exclude) => {
 };
 
 // src/Checkbox.tsx
-import { forwardRef, useEffect, useRef } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef
+} from "react";
 import { useTheme } from "@emotion/react";
 import { Icon } from "@dt-dds/react-icon";
 
@@ -41,6 +46,11 @@ var SIZES = {
   small: 20,
   large: 24
 };
+var LABEL_HEIGHT_BUFFER = 1;
+var LABEL_LINE_HEIGHT = {
+  small: 16,
+  large: 20
+};
 
 // src/Checkbox.styled.ts
 var getCheckboxColors = (theme) => ({
@@ -117,6 +127,7 @@ var CheckboxBoxStyled = styled("div", {
   align-items: center;
   justify-content: center;
   border-radius: ${({ theme }) => theme.shape.checkbox};
+  flex-shrink: 0;
 
   ${({ theme, $checked, $indeterminate, $disabled, $error, $size }) => {
   const state = getCheckboxState(
@@ -209,11 +220,21 @@ var Checkbox = forwardRef(
     const theme = useTheme();
     const internalRef = useRef(null);
     const mergedRef = mergeRefs(internalRef, ref);
+    const labelRef = useRef(null);
     useEffect(() => {
       if (internalRef.current) {
         internalRef.current.indeterminate = isIndeterminate;
       }
     }, [isIndeterminate]);
+    useLayoutEffect(() => {
+      if (!labelRef.current) return;
+      const labelContainer = labelRef.current.closest("label");
+      if (!labelContainer) return;
+      const el = labelRef.current;
+      const maxSingleLineHeight = LABEL_LINE_HEIGHT[size] + LABEL_HEIGHT_BUFFER;
+      const isWrapped = el.offsetHeight > maxSingleLineHeight;
+      labelContainer.style.alignItems = isWrapped ? "flex-start" : "center";
+    }, [label, children]);
     const handleChange = (event) => {
       if (isDisabled) return;
       onChange == null ? void 0 : onChange(event);
@@ -268,7 +289,15 @@ var Checkbox = forwardRef(
               ) : null
             }
           ),
-          hasLabel ? /* @__PURE__ */ jsx(CheckboxLabelStyled, { $disabled: isDisabled, $size: size, children: label || children }) : null
+          hasLabel ? /* @__PURE__ */ jsx(
+            CheckboxLabelStyled,
+            {
+              $disabled: isDisabled,
+              $size: size,
+              ref: labelRef,
+              children: label || children
+            }
+          ) : null
         ]
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-checkbox",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.63",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,9 +20,9 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-core": "1.0.0-beta.58",
-    "@dt-dds/react-icon": "1.0.0-beta.61",
-    "@dt-dds/themes": "1.0.0-beta.13"
+    "@dt-dds/react-core": "1.0.0-beta.59",
+    "@dt-dds/react-icon": "1.0.0-beta.62",
+    "@dt-dds/themes": "1.0.0-beta.14"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",