sales-frontend-design-system 0.0.138 → 0.0.139

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

@@ -1591,11 +1591,12 @@ const ComboBoxItem = ({
   validator,
   value,
   onValueChange,
+  inputMode = "none",
   ...props
 }) => {
   const inputRef = React.useRef(null);
   const { errorState, setForceUpdate } = useFormValidator({ validator, name });
-  const { disabled, error, readOnly, size, ...rest } = useFieldControl(props);
+  const { disabled, error, readOnly = true, size, ...rest } = useFieldControl(props);
   const { handleClick, handleKeyDown } = usePreventInteraction({ disabled, readOnly });
   const handleKeyDownEvent = (e) => {
     if (e.key === " " || e.key === "Enter") {
@@ -1620,6 +1621,7 @@ const ComboBoxItem = ({
         type: type ?? "text",
         name,
         readOnly,
+        inputMode,
         onClick: handleClick(handleOnClick),
         onKeyDown: handleKeyDown(handleKeyDownEvent),
         role: "combobox",
@@ -3402,7 +3404,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 +3435,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(