@seed-design/lynx-react 0.7.1 → 0.9.0

package/src/components/Slider/Slider.utils.ts

@@ -0,0 +1,167 @@
+export interface SliderGeometry {
+  left: number;
+  width: number;
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function percentageForValue(value: number, min: number, max: number): number {
+  if (max === min) return 0;
+  return clamp(((value - min) / (max - min)) * 100, 0, 100);
+}
+
+export function valueForPercentage(
+  percent: number,
+  min: number,
+  max: number,
+  dir: "ltr" | "rtl",
+): number {
+  const ratio = clamp(percent, 0, 100) / 100;
+  return dir === "rtl" ? max - ratio * (max - min) : min + ratio * (max - min);
+}
+
+export function decimalCount(value: number): number {
+  const text = String(value);
+  const exponent = text.toLowerCase().split("e");
+  const fraction = exponent[0].split(".")[1]?.length ?? 0;
+  return fraction + (exponent[1] ? Math.max(0, -Number(exponent[1])) : 0);
+}
+
+export function roundValue(value: number, decimals: number): number {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+
+export function closestAllowedValue(value: number, allowedValues: readonly number[]): number {
+  if (allowedValues.length === 0) return value;
+  let closest = allowedValues[0];
+  let distance = Math.abs(value - closest);
+  for (let index = 1; index < allowedValues.length; index += 1) {
+    const candidate = allowedValues[index];
+    const candidateDistance = Math.abs(value - candidate);
+    if (candidateDistance < distance) {
+      closest = candidate;
+      distance = candidateDistance;
+    }
+  }
+  return closest;
+}
+
+export function normalizeValue(
+  value: number,
+  min: number,
+  max: number,
+  step: number,
+  allowedValues?: readonly number[],
+): number {
+  const safeMin = Math.min(min, max);
+  const safeMax = Math.max(min, max);
+  const candidate = Number.isFinite(value) ? value : safeMin;
+  if (allowedValues && allowedValues.length > 0) {
+    return closestAllowedValue(candidate, allowedValues);
+  }
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const decimals = Math.max(decimalCount(safeStep), decimalCount(safeMin));
+  return clamp(
+    roundValue(Math.round((candidate - safeMin) / safeStep) * safeStep + safeMin, decimals),
+    safeMin,
+    safeMax,
+  );
+}
+
+export function normalizeValues(
+  values: readonly number[] | undefined,
+  min: number,
+  max: number,
+  step: number,
+  allowedValues?: readonly number[],
+): number[] {
+  const source = values && values.length > 0 ? values : [(min + max) / 2];
+  return source
+    .map((value) => normalizeValue(value, min, max, step, allowedValues))
+    .sort((a, b) => a - b);
+}
+
+export function nearestValueIndex(values: readonly number[], value: number): number {
+  if (values.length < 2) return 0;
+  let index = 0;
+  let distance = Math.abs(values[0] - value);
+  for (let candidate = 1; candidate < values.length; candidate += 1) {
+    const candidateDistance = Math.abs(values[candidate] - value);
+    if (candidateDistance < distance) {
+      index = candidate;
+      distance = candidateDistance;
+    }
+  }
+  return index;
+}
+
+export function hasMinimumSteps(
+  values: readonly number[],
+  minimumSteps: number,
+  step: number,
+): boolean {
+  if (minimumSteps <= 0 || values.length < 2) return true;
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const decimals = decimalCount(safeStep);
+  const required = roundValue(minimumSteps * safeStep, decimals);
+  for (let index = 1; index < values.length; index += 1) {
+    const difference = roundValue(values[index] - values[index - 1], decimals);
+    if (difference < required) return false;
+  }
+  return true;
+}
+
+export function getThumbInBoundsOffset(width: number, percent: number, direction: 1 | -1): number {
+  if (!width) return 0;
+  const halfWidth = width / 2;
+  const scaledOffset = (clamp(percent, 0, 100) / 50) * halfWidth;
+  return (halfWidth - scaledOffset * direction) * direction;
+}
+
+export function getStickyLabelOffset(
+  labelWidth: number,
+  percent: number,
+  thumbWidth: number,
+  trackWidth: number,
+  direction: 1 | -1,
+): number {
+  if (!labelWidth || !trackWidth) return 0;
+  const thumbOffset = getThumbInBoundsOffset(thumbWidth, percent, direction);
+  const naturalCenter = (percent / 100) * trackWidth + thumbOffset;
+  const halfLabel = labelWidth / 2;
+  const center = clamp(naturalCenter, halfLabel, trackWidth - halfLabel);
+  return (center - (percent / 100) * trackWidth) * direction;
+}
+
+export function eventPageX(event: unknown): number {
+  const target = event as {
+    touches?: Array<{ pageX?: unknown; clientX?: unknown }>;
+    changedTouches?: Array<{ pageX?: unknown; clientX?: unknown }>;
+    pageX?: unknown;
+    clientX?: unknown;
+    detail?: { x?: unknown };
+  } | null;
+  const touch = target?.touches?.[0] ?? target?.changedTouches?.[0];
+  const candidates = [
+    touch?.pageX,
+    touch?.clientX,
+    target?.pageX,
+    target?.clientX,
+    target?.detail?.x,
+  ];
+  for (const candidate of candidates) {
+    const number = Number(candidate);
+    if (Number.isFinite(number)) return number;
+  }
+  return Number.NaN;
+}
+
+export function geometryFromRect(value: unknown): SliderGeometry | null {
+  const rect = value as { left?: unknown; width?: unknown } | null | undefined;
+  const left = Number(rect?.left);
+  const width = Number(rect?.width);
+  return Number.isFinite(left) && Number.isFinite(width) && width > 0 ? { left, width } : null;
+}

package/src/components/Slider/index.ts

@@ -0,0 +1,30 @@
+export {
+  SliderRoot,
+  SliderControl,
+  SliderTrack,
+  SliderRange,
+  SliderThumb,
+  SliderTick,
+  SliderMarkers,
+  SliderMarker,
+  SliderValueIndicatorRoot,
+  SliderValueIndicatorArrow,
+  SliderValueIndicatorArrowTip,
+  SliderValueIndicatorLabel,
+  type SliderClassNames,
+  type SliderValues,
+  type SliderRootProps,
+  type SliderControlProps,
+  type SliderTrackProps,
+  type SliderRangeProps,
+  type SliderThumbProps,
+  type SliderTickProps,
+  type SliderMarkersProps,
+  type SliderMarkerProps,
+  type SliderValueIndicatorRootProps,
+  type SliderValueIndicatorArrowProps,
+  type SliderValueIndicatorArrowTipProps,
+  type SliderValueIndicatorLabelProps,
+} from "./Slider";
+
+export * as Slider from "./Slider.namespace";

package/src/components/Stack/Stack.test.tsx

@@ -64,4 +64,11 @@ describe("Stack", () => {
 
     expect(getRenderedRoot()).toHaveStyle({ rowGap: "24px" });
   });
+
+  it("applies bleed as a negative margin", () => {
+    render(<HStack bleedX="16px" />);
+
+    expect(getRenderedRoot().style.getPropertyValue("margin-left")).toBe("calc(-16px)");
+    expect(getRenderedRoot().style.getPropertyValue("margin-right")).toBe("calc(-16px)");
+  });
 });

package/src/components/Stack/Stack.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import * as React from "@lynx-js/react";
 
 import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
-import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { useStyleProps, type MarginBleedStyleProps, type StyleProps } from "../../utils/styled";
 import { mergeProps } from "../../utils/merge-props";
 
 type StackStyleProps =
@@ -29,17 +29,18 @@ interface StackBaseProps extends StyleProps, LynxStyledElementProps, LynxPressab
  * 패키지 컴포넌트 내부에서는 `Box`를 합성하지 않고 native tag와 recipe className을
  * 사용해 primitive 컴포넌트 비용이 누적되지 않도록 합니다.
  */
-export interface StackProps extends Omit<StackBaseProps, StackStyleProps> {
-  align?: StackBaseProps["alignItems"];
-  justify?: StackBaseProps["justifyContent"];
-  wrap?: StackBaseProps["flexWrap"];
-  grow?: StackBaseProps["flexGrow"];
-  shrink?: StackBaseProps["flexShrink"];
-}
+export type StackProps = Omit<StackBaseProps, StackStyleProps> &
+  MarginBleedStyleProps & {
+    align?: StackBaseProps["alignItems"];
+    justify?: StackBaseProps["justifyContent"];
+    wrap?: StackBaseProps["flexWrap"];
+    grow?: StackBaseProps["flexGrow"];
+    shrink?: StackBaseProps["flexShrink"];
+  };
 
-export interface VStackProps extends StackProps {}
+export type VStackProps = StackProps;
 
-export interface HStackProps extends StackProps {}
+export type HStackProps = StackProps;
 
 function getStackProps(props: StackProps) {
   const { align, justify, wrap, grow, shrink, ...restProps } = props;

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.test.tsx

@@ -223,7 +223,9 @@ describe("SwipeableMenuSheet", () => {
       (getByText("Second item") as HTMLElement).parentElement?.parentElement?.className,
     ).toContain("labelAlign_center");
 
-    const item = (getByText("First item") as HTMLElement).parentElement?.parentElement;
+    const item = (getByText("First item") as HTMLElement).closest<HTMLElement>(
+      ".seed-menu-sheet-item__root",
+    );
     if (!item) throw new Error("Expected menu sheet item.");
     fireEvent.tap(item);
 
@@ -255,4 +257,22 @@ describe("SwipeableMenuSheet", () => {
       exitAnimation: { type: "tween", duration: 0 },
     });
   });
+  it("keeps item backgrounds outside the scale target and scales the whole close button", () => {
+    const { getByText } = render(
+      <SwipeableMenuSheet.Root>
+        <SwipeableMenuSheet.Item>
+          <SwipeableMenuSheet.ItemLabel>Choice</SwipeableMenuSheet.ItemLabel>
+        </SwipeableMenuSheet.Item>
+        <SwipeableMenuSheet.CloseButton>Close feedback</SwipeableMenuSheet.CloseButton>
+      </SwipeableMenuSheet.Root>,
+    );
+    const target = (getByText("Choice") as HTMLElement).parentElement!;
+    expect(target.classList.contains("seed-menu-sheet-item__scaleContent")).toBe(true);
+    expect(target.getAttribute("flatten")).toBe("false");
+    expect(target.parentElement!.classList.contains("seed-menu-sheet-item__root")).toBe(true);
+    expect(target.parentElement!.hasAttribute("flatten")).toBe(false);
+    const close = (getByText("Close feedback") as HTMLElement).parentElement!;
+    expect(close.classList.contains("seed-menu-sheet__closeButton")).toBe(true);
+    expect(close.getAttribute("flatten")).toBe("false");
+  });
 });

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.tsx

@@ -7,6 +7,8 @@ import { forwardRef, isValidElement } from "@lynx-js/react";
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "@lynx-js/react";
 import clsx from "clsx";
 
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
 import { usePressTap } from "../../hooks/usePressTap";
 import { useSafeArea } from "../../hooks/useSafeArea";
 import type {
@@ -54,6 +56,7 @@ interface SwipeableMenuSheetClassNames {
 
 interface SwipeableMenuSheetItemClassNames {
   root: string;
+  scaleContent: string;
   content: string;
   label: string;
   description: string;
@@ -457,6 +460,7 @@ export const SwipeableMenuSheetCloseButton: LynxForwardRefComponent<
     "accessibility-actions": accessibilityActions,
     "accessibility-exclusive-focus": accessibilityExclusiveFocus,
     "ios-platform-accessibility-id": iosPlatformAccessibilityId,
+    ...nativeProps
   } = props;
   const { rootRef, setPendingReason, skipAnimation } = useSwipeableMenuSheetContext();
   const handleTap = React.useCallback<NonNullable<LynxPressableProps["bindtap"]>>(
@@ -467,16 +471,26 @@ export const SwipeableMenuSheetCloseButton: LynxForwardRefComponent<
     },
     [rootRef, setPendingReason, skipAnimation, userBindtap],
   );
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     onTap: handleTap,
     mainThreadOnTap: userMainThreadBindtap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
   const classNames = menuSheet({ skipAnimation, closeButtonPressed: pressed });
 
   return (
     <view
       {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
-      {...pressHandlers}
+      {...mergeProps(
+        scaleFeedbackTriggerProps,
+        scaleFeedbackTargetProps,
+        pressHandlers,
+        nativeProps,
+      )}
       className={clsx(classNames.closeButton, className)}
       style={style as never}
       accessibility-element={accessibilityElement}
@@ -541,14 +555,21 @@ export const SwipeableMenuSheetItem: LynxForwardRefComponent<unknown, SwipeableM
       "accessibility-actions": accessibilityActions,
       "accessibility-exclusive-focus": accessibilityExclusiveFocus,
       "ios-platform-accessibility-id": iosPlatformAccessibilityId,
+      ...nativeProps
     } = props;
     const groupLabelAlign = React.useContext(GroupLabelAlignContext);
     const contentLabelAlign = React.useContext(ContentLabelAlignContext);
     const { isLast } = React.useContext(SwipeableMenuSheetItemPositionContext);
     const resolvedLabelAlign = labelAlign ?? groupLabelAlign ?? contentLabelAlign ?? "left";
-    const { pressed, ...pressHandlers } = usePressTap({
-      onTap: userBindtap,
-      mainThreadOnTap: userMainThreadBindtap,
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } =
+      usePressTap({
+        onTap: userBindtap,
+        mainThreadOnTap: userMainThreadBindtap,
+      });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      onTouchStart: bindtouchstart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
     });
     const classNames = menuSheetItem({ tone, labelAlign: resolvedLabelAlign, pressed });
     const itemContext = React.useMemo<SwipeableMenuSheetItemContextValue>(
@@ -566,7 +587,7 @@ export const SwipeableMenuSheetItem: LynxForwardRefComponent<unknown, SwipeableM
         >
           <view
             {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
-            {...pressHandlers}
+            {...mergeProps(scaleFeedbackTriggerProps, pressHandlers, nativeProps)}
             className={clsx(classNames.root, className)}
             style={style as never}
             accessibility-element={accessibilityElement}
@@ -580,7 +601,9 @@ export const SwipeableMenuSheetItem: LynxForwardRefComponent<unknown, SwipeableM
             accessibility-exclusive-focus={accessibilityExclusiveFocus}
             ios-platform-accessibility-id={iosPlatformAccessibilityId}
           >
-            {children}
+            <view className={classNames.scaleContent} {...scaleFeedbackTargetProps}>
+              {children}
+            </view>
           </view>
           {!isLast ? (
             <view className={classNames.divider} accessibility-elements-hidden={true} />

package/src/components/Switch/Switch.tsx

@@ -15,11 +15,9 @@ import type {
   LynxTextRef,
   LynxViewRef,
 } from "../../types";
-import {
-  useScaleFeedback,
-  type ScaleFeedbackTargetProps,
-} from "../../hooks/useScaleFeedback";
+import { useScaleFeedback, type ScaleFeedbackTargetProps } from "../../hooks/useScaleFeedback";
 import { mergeProps } from "../../utils/merge-props";
+import { ScaleFeedbackContentContext } from "../../contexts";
 
 /**
  * @platform Lynx
@@ -110,13 +108,7 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
 
   const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
 
-  const {
-    pressed,
-    bindtouchstart,
-    bindtouchend,
-    bindtouchcancel,
-    ...pressHandlers
-  } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled,
     onTap: toggle,
   });
@@ -139,7 +131,15 @@ export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref
       toggle,
       scaleFeedbackTargetProps,
     }),
-    [checked, disabled, pressed, switchVariantProps, switchmarkVariantProps, toggle, scaleFeedbackTargetProps],
+    [
+      checked,
+      disabled,
+      pressed,
+      switchVariantProps,
+      switchmarkVariantProps,
+      toggle,
+      scaleFeedbackTargetProps,
+    ],
   );
 
   return (
@@ -175,6 +175,7 @@ export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((prop
   const [variantProps, restProps] = switchmark.splitVariantProps(props);
   const { children, className, ...nativeProps } = restProps;
   const context = useSwitchContext("SwitchControl");
+  const hasScaledContent = React.useContext(ScaleFeedbackContentContext);
   const switchmarkVariantProps: SwitchmarkVariantProps = {
     ...context.switchmarkVariantProps,
     ...variantProps,
@@ -190,7 +191,7 @@ export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((prop
       <view
         {...mergeProps(
           ref ? { ref: ref as LynxViewRef } : {},
-          context.scaleFeedbackTargetProps,
+          !hasScaledContent ? context.scaleFeedbackTargetProps : {},
           nativeProps,
         )}
         className={clsx(classes.root, className)}