ui-soxo-bootstrap-core 2.6.1-dev.31 → 2.6.1-dev.32

package/core/modules/steps/steps.js

@@ -1084,7 +1084,19 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
    * - Passes configuration, parameters, and handlers to the component.
    * - Handles missing steps or components gracefully.
    */
-  const DynamicComponent = () => {
+  /**
+   * Render the active step's dynamic component.
+   *
+   * Intentionally a plain function (not a component) called inline as
+   * `{renderDynamicStep()}`. Defining it as a component inside the parent's
+   * render body creates a fresh component *type* on every re-render — React
+   * then unmounts and remounts the step component on every parent state
+   * change (touchNavVisible, stepSlideDirection, activeStep timer, etc.),
+   * which caused visible re-render/jitter during swipe navigation. Evaluating
+   * it as a function just yields JSX for the real step Component, whose type
+   * is stable, so React reconciles in place.
+   */
+  const renderDynamicStep = () => {
     const step = steps[activeStep];
     if (!step) return <Empty description="No step selected" />;
 
@@ -1487,7 +1499,7 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                         <Spin />
                       </div>
                     ) : null}
-                    {!loading ? <DynamicComponent /> : null}
+                    {!loading ? renderDynamicStep() : null}
                   </div>
                 </div>
               </div>

package/core/modules/steps/steps.scss

@@ -328,56 +328,148 @@
   position: absolute;
   top: 50%;
   z-index: 6;
-  width: 48px;
-  height: 48px;
+  width: 52px;
+  height: 52px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: none;
   border-radius: 50%;
-  background: rgba(30, 58, 138, 0.88);
+  background: rgba(30, 58, 138, 0.55);
+  backdrop-filter: blur(8px) saturate(140%);
+  -webkit-backdrop-filter: blur(8px) saturate(140%);
   color: #ffffff;
   font-size: 18px;
   cursor: pointer;
-  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
+  box-shadow:
+    0 10px 24px rgba(15, 23, 42, 0.22),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-50%) scale(0.85);
-  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms, background-color 160ms ease;
+  transform: translateY(-50%) scale(0.82);
+  transition:
+    opacity 260ms ease,
+    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
+    visibility 0s linear 260ms,
+    background-color 200ms ease,
+    box-shadow 200ms ease;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
 }
 
+/*
+  Decorative pulsing ring around the button.
+  - Drawn via ::before so it does not interfere with click targets.
+  - Only animates while the button is visible and enabled, to keep the
+    idle state calm instead of visually noisy.
+*/
+.steps-touch-nav::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.45);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.steps-touch-nav.is-visible:not(:disabled)::before {
+  animation: steps-touch-nav-ring 2.4s ease-out infinite;
+}
+
+/*
+  Radial wash behind the icon for depth.
+  - Keeps the icon glyph crisp against varied content backgrounds.
+*/
+.steps-touch-nav::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%);
+  pointer-events: none;
+}
+
+.steps-touch-nav .anticon {
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.25));
+}
+
 .steps-touch-nav:hover:not(:disabled),
 .steps-touch-nav:focus-visible:not(:disabled) {
-  background: rgba(30, 58, 138, 1);
+  background: rgba(30, 58, 138, 0.92);
+  box-shadow:
+    0 14px 30px rgba(15, 23, 42, 0.32),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
   outline: none;
 }
 
+.steps-touch-nav:hover:not(:disabled),
+.steps-touch-nav:focus-visible:not(:disabled),
+.steps-touch-nav.is-visible:hover:not(:disabled),
+.steps-touch-nav.is-visible:focus-visible:not(:disabled) {
+  opacity: 1;
+}
+
 .steps-touch-nav:active:not(:disabled) {
-  transform: translateY(-50%) scale(0.9);
+  transform: translateY(-50%) scale(0.94);
+  transition:
+    transform 120ms ease,
+    opacity 120ms ease,
+    background-color 120ms ease,
+    box-shadow 120ms ease;
 }
 
 .steps-touch-nav:disabled {
-  background: rgba(148, 163, 184, 0.7);
+  background: rgba(148, 163, 184, 0.38);
+  color: rgba(255, 255, 255, 0.7);
   cursor: not-allowed;
-  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1);
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.steps-touch-nav:disabled::after {
+  display: none;
 }
 
 .steps-touch-nav-left {
-  left: 10px;
+  left: 14px;
 }
 
 .steps-touch-nav-right {
-  right: 10px;
+  right: 14px;
 }
 
 .steps-touch-nav.is-visible {
-  opacity: 1;
+  opacity: 0.68;
   visibility: visible;
   transform: translateY(-50%) scale(1);
-  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s, background-color 160ms ease;
+  transition:
+    opacity 260ms ease,
+    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
+    visibility 0s linear 0s,
+    background-color 200ms ease,
+    box-shadow 200ms ease;
+}
+
+@keyframes steps-touch-nav-ring {
+  0% {
+    opacity: 0.55;
+    transform: scale(1);
+  }
+
+  65% {
+    opacity: 0;
+    transform: scale(1.45);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.45);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -390,6 +482,10 @@
     transform: translateY(-50%);
     transition: opacity 120ms linear, visibility 0s linear 0s;
   }
+
+  .steps-touch-nav.is-visible:not(:disabled)::before {
+    animation: none;
+  }
 }
 
 .steps-stage-body::-webkit-scrollbar {
@@ -742,17 +838,17 @@
   }
 
   .steps-touch-nav {
-    width: 42px;
-    height: 42px;
+    width: 44px;
+    height: 44px;
     font-size: 16px;
   }
 
   .steps-touch-nav-left {
-    left: 6px;
+    left: 8px;
   }
 
   .steps-touch-nav-right {
-    right: 6px;
+    right: 8px;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.1-dev.31",
+  "version": "2.6.1-dev.32",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"