@heliux-org/design-system-core 0.0.264 → 0.0.265

package/src/components/SegmentControl/SegmentControlList/SegmentControlList.module.scss

@@ -1,6 +1,11 @@
 .segmentControlList {
-  display: inline-flex;
-  flex-direction: column;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background-color: var(--surface-level-200);
+  border-radius: var(--border-radius-medium);
+  padding: 2px;
 
   &.stretched {
     display: flex;
@@ -9,12 +14,29 @@
 }
 
 .segmentControlUl {
-  display: inline-flex;
-  list-style: none;
-  padding: 2px;
+  display: flex;
+  width: 100%;
+  height: 100%;
   margin: 0;
-  background-color: var(--surface-level-200);
-  border-radius: var(--border-radius-medium);
+  padding: 0;
+  list-style: none;
+  position: relative;
+  z-index: 1;
+
+  > li {
+    flex: 1 1 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  > li:first-child {
+    padding-left: 2px;
+  }
+
+  > li:last-child {
+    padding-right: 2px;
+  }
 
   .stretched & {
     display: flex;
@@ -22,20 +44,36 @@
   }
 }
 
+.animatedBackground {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 2px;
+  right: 2px;
+  transition: left 0.3s ease, width 0.3s ease;
+  background-color: var(--surface-level-100);
+  border-radius: calc(var(--border-radius-medium) - 2px);
+  box-shadow: 0px 1px 1px 0px #00000014;
+  z-index: 0;
+}
+
 .small {
-  .segmentControlUl {
-    height: 24px;
-  }
+  --segment-height: 24px;
 }
 
 .medium {
-  .segmentControlUl {
-    height: 32px;
-  }
+  --segment-height: 32px;
 }
 
 .large {
-  .segmentControlUl {
-    height: 40px;
-  }
+  --segment-height: 40px;
+}
+
+.segmentControlList {
+  height: var(--segment-height);
+}
+
+.segmentControlUl,
+.animatedBackground {
+  height: calc(var(--segment-height) - 4px);
 }

package/src/components/SegmentControl/SegmentControlList/SegmentControlList.tsx

@@ -1,18 +1,26 @@
-import React, { FC, useCallback, useMemo, useState, useEffect } from "react";
+import React, { FC, useCallback, useMemo, useState, useEffect, useRef } from "react";
 import cx from "classnames";
-import usePrevious from "../../../hooks/usePrevious";
 import styles from "./SegmentControlList.module.scss";
-import { SegmentControlCellProps } from "../SegmentControlCell/SegmentControlCell";
 
 export type SegmentControlSize = 'small' | 'medium' | 'large';
 
 export interface SegmentControlListProps {
   className?: string;
-  onChange?: (value: number) => void;
+  onChange?: (segmentId: number) => void;
   activeSegment?: number;
   size?: SegmentControlSize;
   stretched?: boolean;
-  children: React.ReactElement<SegmentControlCellProps>[];
+  children: React.ReactElement | React.ReactElement[];
+}
+
+interface SegmentControlItemProps {
+  value?: number;
+  active?: boolean;
+  onClick?: (value: number) => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  size?: SegmentControlSize;
+  stretched?: boolean;
 }
 
 const SegmentControlList: FC<SegmentControlListProps> = ({
@@ -24,13 +32,31 @@ const SegmentControlList: FC<SegmentControlListProps> = ({
   children,
 }) => {
   const [activeSegmentState, setActiveSegmentState] = useState<number>(activeSegment);
-  const prevActiveSegment = usePrevious(activeSegment);
+  const [hoverPosition, setHoverPosition] = useState<number | null>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const [segmentWidths, setSegmentWidths] = useState<number[]>([]);
 
   useEffect(() => {
-    if (activeSegment !== prevActiveSegment && activeSegment !== activeSegmentState) {
-      setActiveSegmentState(activeSegment);
+    if (listRef.current) {
+      const widths = Array.from(listRef.current.children).map(
+        (child) => (child as HTMLElement).offsetWidth
+      );
+      setSegmentWidths(widths);
     }
-  }, [activeSegment, prevActiveSegment, activeSegmentState]);
+  }, [children]);
+
+  const backgroundStyle = useMemo(() => {
+    const position = hoverPosition !== null ? hoverPosition : activeSegmentState;
+    const left = segmentWidths.slice(0, position).reduce((sum, width) => sum + width, 0);
+    return {
+      left: `${left}px`,
+      width: `${segmentWidths[position] || 0}px`,
+    };
+  }, [hoverPosition, activeSegmentState, segmentWidths]);
+
+  useEffect(() => {
+    setActiveSegmentState(activeSegment);
+  }, [activeSegment]);
 
   const onSegmentClick = useCallback(
     (segmentId: number) => {
@@ -41,22 +67,34 @@ const SegmentControlList: FC<SegmentControlListProps> = ({
   );
 
   const segmentsToRender = useMemo(() => {
-    return React.Children.map(children, (child, index) =>
-      React.cloneElement(child, {
-        value: index,
-        active: activeSegmentState === index,
-        onClick: onSegmentClick,
-        size,
-        stretched,
-      })
-    );
+    return React.Children.map(children, (child, index) => {
+      if (React.isValidElement<SegmentControlItemProps>(child)) {
+        return React.cloneElement(child, {
+          ...child.props,
+          value: index,
+          active: activeSegmentState === index,
+          onClick: onSegmentClick,
+          onMouseEnter: () => setHoverPosition(index),
+          onMouseLeave: () => setHoverPosition(null),
+          size,
+          stretched,
+        });
+      }
+      return child;
+    });
   }, [children, activeSegmentState, onSegmentClick, size, stretched]);
 
   return (
-    <div className={cx(styles.segmentControlList, styles[size], className, {
-      [styles.stretched]: stretched,
-    })}>
-      <ul className={styles.segmentControlUl} role="tablist">
+    <div
+      className={cx(styles.segmentControlList, styles[size], className, {
+        [styles.stretched]: stretched,
+      })}
+    >
+      <div
+        className={styles.animatedBackground}
+        style={backgroundStyle}
+      />
+      <ul className={styles.segmentControlUl} role="tablist" ref={listRef}>
         {segmentsToRender}
       </ul>
     </div>

package/src/components/Uploader/Uploader.scss

@@ -6,7 +6,7 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    min-width: 300px; // Add a minimum width
+    min-width: 200px; // Add a minimum width
     min-height: 200px; // Adjust this value as needed
     transition: all 0.2s ease-in-out;
     border-radius: var(--border-radius-medium);