sales-frontend-design-system 0.0.138 → 0.0.140

package/dist/components/button/button.module.scss

@@ -16,6 +16,11 @@
   &.is-disabled {
     cursor: not-allowed;
   }
+
+  .button-content {
+    display: inline-flex;
+    align-items: center;
+  }
 }
 
 .button-size-large {

package/dist/index.cjs.js

@@ -1619,7 +1619,7 @@ const ComboBoxItem = ({
         ref: inputRef,
         type: type ?? "text",
         name,
-        readOnly,
+        readOnly: true,
         onClick: handleClick(handleOnClick),
         onKeyDown: handleKeyDown(handleKeyDownEvent),
         role: "combobox",
@@ -3402,7 +3402,6 @@ const TabRoot = ({ ref, ...props }) => {
   const { className, children, scroll, onValueChange, variant, size, defaultValue, ...rest } = props;
   const tabProps = useTab(props);
   const containerRef = React.useRef(null);
-  const prevValueRef = React.useRef(null);
   const [underlineStyle, setUnderlineStyle] = React.useState({ left: 0, width: 0 });
   const updateUnderlinePosition = React.useCallback(() => {
     if (variant === "sub" && containerRef.current && tabProps.value) {
@@ -3434,30 +3433,36 @@ const TabRoot = ({ ref, ...props }) => {
     if (scroll === "scrollable" && containerRef.current && tabProps.value) {
       const container = containerRef.current;
       const activeTab = container.querySelector(`[data-value="${tabProps.value}"]`);
-      const prevTab = prevValueRef.current ? container.querySelector(`[data-value="${prevValueRef.current}"]`) : null;
       if (activeTab) {
         const containerRect = container.getBoundingClientRect();
         const tabRect = activeTab.getBoundingClientRect();
-        const isTabHidden = tabRect.left < containerRect.left || tabRect.right > containerRect.right;
-        if (isTabHidden) {
-          const isMovingLeft = prevTab ? activeTab.offsetLeft < prevTab.offsetLeft : false;
-          const beforeStyle = getComputedStyle(container, "::before");
-          const isBeforeVisible = beforeStyle.display !== "none";
-          const scrollPadding = isBeforeVisible ? parseFloat(beforeStyle.width) || 0 : 0;
-          if (isMovingLeft) {
-            container.scrollTo({
-              left: Math.max(0, activeTab.offsetLeft - scrollPadding),
-              behavior: "smooth"
-            });
+        const shiftAmount = container.clientWidth * 0.2;
+        const currentScroll = container.scrollLeft;
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        const isHiddenLeft = tabRect.left < containerRect.left;
+        const isHiddenRight = tabRect.right > containerRect.right;
+        let newScroll;
+        if (isHiddenLeft) {
+          newScroll = Math.max(0, activeTab.offsetLeft - shiftAmount);
+        } else if (isHiddenRight) {
+          newScroll = Math.min(
+            maxScroll,
+            activeTab.offsetLeft + activeTab.offsetWidth + shiftAmount - container.clientWidth
+          );
+        } else {
+          const tabCenter = tabRect.left + tabRect.width / 2;
+          const containerCenter = containerRect.left + containerRect.width / 2;
+          if (tabCenter < containerCenter) {
+            newScroll = Math.max(0, currentScroll - shiftAmount);
           } else {
-            container.scrollTo({
-              left: activeTab.offsetLeft + activeTab.offsetWidth + scrollPadding - container.clientWidth,
-              behavior: "smooth"
-            });
+            newScroll = Math.min(maxScroll, currentScroll + shiftAmount);
           }
         }
+        container.scrollTo({
+          left: newScroll,
+          behavior: "smooth"
+        });
       }
-      prevValueRef.current = tabProps.value;
     }
   }, [tabProps.value, scroll]);
   return /* @__PURE__ */ jsxRuntime.jsx(TabRootContext.Provider, { value: tabProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$h("tab-container", `tab-container-variant-${props.variant}`), children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", ref, className: cx$h("tab-root", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(