@heliux-org/design-system-core 0.0.428 → 0.0.429-test-build

package/src/components/DynamicPanelLayout/PanelLayout.tsx

@@ -23,7 +23,21 @@ interface DynamicPanelLayoutProps {
     direction?: "horizontal" | "vertical";
 }
 
-const AnimatedPanel = styled(Panel) <{ $isDragging: boolean }>`
+interface AnimatedPanelProps {
+  $isDragging: boolean;
+  id: string;
+  minSize: number;
+  maxSize?: number;
+  className?: string;
+  defaultSize?: number;
+  collapsible?: boolean;
+  onExpand?: () => void;
+  collapsedSize?: number;
+  onCollapse?: () => void;
+  style?: CSSProperties;
+}
+
+const AnimatedPanel = styled(Panel)<AnimatedPanelProps>`
   transition: ${props => props.$isDragging ? 'none' : 'width 0.3s ease-in-out'};
   &.collapsed {
     width: 0;
@@ -48,6 +62,7 @@ export const DynamicPanelLayout: React.FC<DynamicPanelLayoutProps> = ({ panels,
                 return (
                     <React.Fragment key={panel.id}>
                         <AnimatedPanel
+                            key={`panel-${panel.id}`}
                             id={panel.id}
                             ref={panelRef}
                             style={panel.style}
@@ -61,10 +76,18 @@ export const DynamicPanelLayout: React.FC<DynamicPanelLayoutProps> = ({ panels,
                             collapsible={panel.collapsible || false}
                             onCollapse={panel.onCollapse}
                         >
-                            {panel.content}
+                            {React.Children.map(panel.content, (child, childIndex) => {
+                                if (React.isValidElement(child)) {
+                                    return React.cloneElement(child, {
+                                        key: `${panel.id}-child-${childIndex}`
+                                    });
+                                }
+                                return child;
+                            })}
                         </AnimatedPanel>
                         {index < panels.length - 1 && (
                             <ResizeHandle
+                                key={`handle-${panel.id}`}
                                 className="resize-handle"
                                 panelElementRef={panelRef}
                                 setIsDragging={setIsDragging}

package/src/components/Tabs/Tab/Tab.module.scss

@@ -3,104 +3,107 @@
 @import "../../../styles/typography";
 
 .tabWrapper {
-  position: relative;
-  display: inline-block;
-  padding-left: 1px;
-  padding-right: 1px;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid;
-  border-bottom-color: transparent;
-  color: var(--text-primary);
-  text-align: center;
-  height: 100%;
+    position: relative;
+    display: inline-block;
+    padding-left: 1px;
+    padding-right: 1px;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid;
+    border-bottom-color: transparent;
+    color: var(--text-primary);
+    text-align: center;
+    height: 100%;
 }
+
 .divider {
-  margin: 0;
+    margin: 0;
 }
+
 .tabWrapper:after {
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  content: "";
-  border-bottom: solid 2px;
-  border-bottom-color: var(--primary-color);
-  transform: scaleX(0);
-  z-index: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    content: "";
+    border-bottom: solid 2px;
+    border-bottom-color: var(--primary-color);
+    transform: scaleX(0);
+    z-index: 0;
 }
 
 .tabWrapper .tabInner {
-  $margin-bottom: 1px;
-  height: calc(auto - #{$margin-bottom});
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  padding: 4px 8px;
-  margin: 0;
-  @include vibe-text(text1, normal);
-  user-select: none;
-  margin-bottom: $margin-bottom;
-  cursor: pointer;
-  color: var(--text-secondary);
-  transition: all var(--motion-productive-medium) ease 0ms;
-  border-radius: var(--border-radius-medium);
+    $margin-bottom: 1px;
+    height: calc(auto - #{$margin-bottom});
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    padding: 4px 8px;
+    margin: 0;
+    @include vibe-text(text1, normal);
+    user-select: none;
+    margin-bottom: $margin-bottom;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: all var(--motion-productive-medium) ease 0ms;
+    border-radius: var(--border-radius-medium);
 }
 
 .tabWrapper .tabInner:focus {
-  outline: none;
+    outline: none;
 }
 
 .tabWrapper .tabInner .tabIcon {
-  color: var(--icon-primary);
-  margin-right: var(--spacing-small);
+    color: var(--icon-primary);
+    margin-right: var(--spacing-small);
 }
 
 .tabWrapper .tabInner .tabIcon.right {
-  margin-right: 0;
-  margin-left: var(--spacing-small);
+    margin-right: 0;
+    margin-left: var(--spacing-small);
 }
 
 .tabWrapper .tabInner .tabCounter {
-  margin-right: var(--spacing-small);
+    margin-right: var(--spacing-small);
 }
 
 .tabWrapper .tabInner .tabCounter.right {
-  margin-right: 0;
-  margin-left: var(--spacing-small);
+    margin-right: 0;
+    margin-left: var(--spacing-small);
 }
 
 .tabWrapper.tabFocusVisibleInset {
-  @include focus-style-css-inset(3px, 3px);
-  position: relative;
+    @include focus-style-css-inset(3px, 3px);
+    position: relative;
 }
 
 .tabWrapper.active {
-  .tabInner {
-    color: var(--text-primary);
-  }
+    .tabInner {
+        color: var(--text-primary);
+    }
 }
 
 .tabWrapper.active.filled {
-  .tabInner {
-    color: var(--text-primary);
-    background-color: var(--surface-level-200);
-  }
+    .tabInner {
+        color: var(--text-primary);
+        background-color: var(--surface-level-200);
+        margin-bottom: var(--spacing-small);
+    }
 }
 
 .tabWrapper.active.underlined:after {
-  transform: scaleX(1);
-  transition: all var(--motion-productive-medium) ease 0ms;
-  border-bottom-color: var(--divider-selected);
+    transform: scaleX(1);
+    transition: all var(--motion-productive-medium) ease 0ms;
+    border-bottom-color: var(--divider-selected);
 }
 
 .tabWrapper.disabled .tabInner {
-  color: var(--disabled-text-color);
-  cursor: not-allowed;
+    color: var(--disabled-text-color);
+    cursor: not-allowed;
 }
 
 .tabWrapper:not(.disabled) .tabInner:hover {
-  background-color: var(--surface-level-200);
-  color: var(--text-primary);
-}
+    background-color: var(--surface-level-200);
+    color: var(--text-primary);
+}

package/src/components/Tabs/Tab/Tab.tsx

@@ -8,8 +8,8 @@ import Icon from "../../Icon/Icon";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { IconType } from "../../Icon/IconConstants";
 import {
-  ComponentDefaultTestId,
-  getTestId,
+    ComponentDefaultTestId,
+    getTestId,
 } from "../../../tests/test-ids-utils";
 import styles from "./Tab.module.scss";
 import { SubIcon } from "../../../types/SubIcon";
@@ -20,154 +20,155 @@ import { VibeComponent, withStaticProps } from "../../../types";
 import { CounterColor, CounterType } from "../../Counter";
 
 export interface TabProps extends VibeComponentProps {
-  /**
-   * Class name for tab link-name
-   */
-  tabInnerClassName?: string;
-  /**
-   * Tab index
-   */
-  value?: number;
-  disabled?: boolean;
-  active?: boolean;
-  focus?: boolean;
-  divider?: boolean;
-  icon?: SubIcon;
-  iconType?: IconType;
-  iconSide?: string;
-  counter?: number;
-  counterSide?: string;
-  counterKind?: CounterType;
-  counterColor?: CounterColor;
-  showCounter?: boolean;
-  link?: string;
-  kind?: TabKind;
-  onClick?: (value: number) => void;
-  /**
-   * Tab link-name
-   */
-  children?: string | ReactElement[];
+    /**
+     * Class name for tab link-name
+     */
+    tabInnerClassName?: string;
+    /**
+     * Tab index
+     */
+    value?: number;
+    disabled?: boolean;
+    active?: boolean;
+    focus?: boolean;
+    divider?: boolean;
+    icon?: SubIcon;
+    iconType?: IconType;
+    iconSide?: string;
+    counter?: number;
+    counterSide?: string;
+    counterKind?: CounterType;
+    counterColor?: CounterColor;
+    showCounter?: boolean;
+    link?: string;
+    kind?: TabKind;
+    onClick?: (value: number) => void;
+    /**
+     * Tab link-name
+     */
+    children?: string | ReactElement[]; 
 }
 
 const Tab: VibeComponent<TabProps, unknown> & {
-  kind?: typeof TabKind;
+    kind?: typeof TabKind;
 } = forwardRef<unknown, TabProps>(
-  (
-    {
-      className,
-      kind = TabKind.NONE,
-      tabInnerClassName,
-      id,
-      value = 0,
-      disabled = false,
-      active = false,
-      focus = false,
-      divider = false,
-      onClick = NOOP,
-      icon,
-      iconType,
-      iconSide = "left",
-      children,
-      link,
-      counter,
-      counterKind = Counter.kinds.FILL,
-      counterColor = Counter.colors.PRIMARY,
-      counterSide = "left",
-      showCounter = false,
-      "data-testid": dataTestId,
-    },
-    ref
-  ) => {
-    const componentRef = useRef(null);
-    const mergedRef = useMergeRef(ref, componentRef);
+    (
+        {
+            className,
+            kind = TabKind.NONE,
+            tabInnerClassName,
+            id,
+            value = 0,
+            disabled = false,
+            active = false,
+            focus = false,
+            divider = false,
+            onClick = NOOP,
+            icon,
+            iconType,
+            iconSide = "left",
+            children,
+            link,
+            counter,
+            counterKind = Counter.kinds.FILL,
+            counterColor = Counter.colors.PRIMARY,
+            counterSide = "left",
+            showCounter = false,
+            "data-testid": dataTestId,
+        },
+        ref
+    ) => {
+        const componentRef = useRef(null);
+        const mergedRef = useMergeRef(ref, componentRef);
 
-    function renderIconAndChildren() {
-      const elements = [];
+        function renderIconAndChildren() {
+            const elements = [];
 
-      if (icon) {
-        const iconElement = (
-          <Icon
-            clickable={false}
-            ariaHidden={true}
-            iconType={iconType}
-            icon={icon}
-            className={cx(styles.tabIcon, getStyle(styles, iconSide))}
-            iconSize={18}
-            ignoreFocusStyle
-          />
-        );
-        if (iconSide === "left") {
-          elements.push(iconElement);
-        }
-      }
+            if (icon) {
+                const iconElement = (
+                    <Icon
+                        clickable={false}
+                        ariaHidden={true}
+                        iconType={iconType}
+                        icon={icon}
+                        className={cx(styles.tabIcon, getStyle(styles, iconSide))}
+                        iconSize={18}
+                        ignoreFocusStyle
+                    />
+                );
+                if (iconSide === "left") {
+                    elements.push(iconElement);
+                }
+            }
 
-      elements.push(children);
+            elements.push(children);
 
-      if (icon && iconSide === "right") {
-        const iconElement = (
-          <Icon
-            clickable={false}
-            ariaHidden={true}
-            iconType={iconType}
-            icon={icon}
-            className={cx(styles.tabIcon, getStyle(styles, iconSide))}
-            iconSize={18}
-            ignoreFocusStyle
-          />
-        );
-        elements.push(iconElement);
-      }
+            if (icon && iconSide === "right") {
+                const iconElement = (
+                    <Icon
+                        clickable={false}
+                        ariaHidden={true}
+                        iconType={iconType}
+                        icon={icon}
+                        className={cx(styles.tabIcon, getStyle(styles, iconSide))}
+                        iconSize={18}
+                        ignoreFocusStyle
+                    />
+                );
+                elements.push(iconElement);
+            }
 
-      if (showCounter && counter !== undefined) {
-        const counterElement = (
-          <Counter
-            count={counter}
-            color={counterColor}
-            kind={counterKind}
-            className={cx(styles.tabCounter, getStyle(styles, counterSide))}
-          />
-        );
+            if (showCounter && counter !== undefined) {
+                const counterElement = (
+                    <Counter
+                        count={counter}
+                        color={counterColor}
+                        kind={counterKind}
+                        className={cx(styles.tabCounter, getStyle(styles, counterSide))}
+                    />
+                );
 
-        if (counterSide === "left") {
-          elements.unshift(counterElement);
-        } else {
-          elements.push(counterElement);
+                if (counterSide === "left") {
+                    elements.unshift(counterElement);
+                } else {
+                    elements.push(counterElement);
+                }
+            }
+
+            return elements;
         }
-      }
 
-      return elements;
+        return (
+            <li
+                ref={mergedRef}
+                key={id}
+                className={cx(styles.tabWrapper, className, {
+                    [styles.active]: active,
+                    [styles.disabled]: disabled,
+                    [styles.tabFocusVisibleInset]: focus,
+                    [styles.underlined]: active && kind === TabKind.UNDERLINED,
+                    [styles.filled]: active && kind === TabKind.FILLED,
+                    [cx(styles.filled, styles.underlined)]: active && kind === TabKind.BOTH,
+                })}
+                id={id}
+                role="tab"
+                aria-selected={active}
+                aria-disabled={disabled}
+                data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}
+            >
+                <a
+                    className={cx(styles.tabInner, tabInnerClassName)}
+                    onClick={() => !disabled && onClick(value)}
+                    href={link || "#"}
+                >
+                    {renderIconAndChildren()}
+                </a>
+                {divider ? <Divider className={styles.divider} /> : <div></div>}
+            </li>
+        );
     }
-
-    return (
-      <li
-        ref={mergedRef}
-        key={id}
-        className={cx(styles.tabWrapper, className, {
-          [styles.active]: active,
-          [styles.disabled]: disabled,
-          [styles.tabFocusVisibleInset]: focus,
-          [styles.underlined]: active && kind === TabKind.UNDERLINED,
-          [styles.filled]: active && kind === TabKind.FILLED,
-        })}
-        id={id}
-        role="tab"
-        aria-selected={active}
-        aria-disabled={disabled}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}
-      >
-        <a
-          className={cx(styles.tabInner, tabInnerClassName)}
-          onClick={() => !disabled && onClick(value)}
-          href={link || "#"}
-        >
-          {renderIconAndChildren()}
-        </a>
-        {divider ? <Divider className={styles.divider} /> : <div></div>}
-      </li>
-    );
-  }
 );
 
 export default withStaticProps(Tab, {
-  kind: TabKind,
+    kind: TabKind,
 });

package/src/components/Tabs/Tab/TabConstants.ts

@@ -1,5 +1,6 @@
 export enum TabKind {
-  UNDERLINED = "underlined",
-  FILLED = "filled",
-  NONE = "none",
+    UNDERLINED = "underlined",
+    FILLED = "filled",
+    NONE = "none",
+    BOTH = "both",
 }