@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/ScrollFlex/tools/_Base.jsx

@@ -0,0 +1,68 @@
+import useVars from "./useVars";
+import { ScrollBar } from "../../ScrollBar";
+import NestedBaseUi from "helpers/NestedBaseUi";
+import { S } from "./_styled.js";
+
+export const Base = ({ children, ...p }) => {
+    const {
+        Variant,
+        flexProps,
+        shellPaddingStyle,
+        scrollBarProps,
+        containerRef,
+        shellRef,
+        contentRef,
+        shellSurfaceStyle,
+        shellPointerHandlers,
+        borderColor,
+        shouldRender,
+        shellLayoutStyle,
+        shellViewportStyle,
+        containerGridStyle,
+        contentLayoutStyle,
+        variantOuterStyle,
+    } = useVars(p);
+
+    if (!shouldRender) return null;
+
+    return (
+        <NestedBaseUi>
+            <Variant
+                ref={containerRef}
+                $borderColor={borderColor}
+                aria-label="ScrollFlex container"
+                style={{
+                    ...variantOuterStyle,
+                    ...containerGridStyle,
+                    display: "grid",
+                }}
+            >
+                <S.shell
+                    ref={shellRef}
+                    style={{
+                        ...shellViewportStyle,
+                        ...shellPaddingStyle,
+                        ...shellLayoutStyle,
+                    }}
+                    aria-label="ScrollFlex shell"
+                >
+                    <S.content
+                        ref={contentRef}
+                        aria-label="ScrollFlex content"
+                        {...flexProps}
+                        {...shellPointerHandlers}
+                        style={{
+                            ...(flexProps?.style || {}),
+                            ...(contentLayoutStyle || {}),
+                            ...(shellSurfaceStyle || {}),
+                            ...(flexProps?.flex != null ? { flex: flexProps.flex } : {}),
+                        }}
+                    >
+                        {children}
+                    </S.content>
+                    <ScrollBar {...scrollBarProps} />
+                </S.shell>
+            </Variant>
+        </NestedBaseUi>
+    );
+};

package/src/libs/ScrollFlex/tools/_styled.js

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import { Flex } from "../../Flex";
+
+export const S = {
+    shell: styled.div`
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        min-height: 0;
+        min-width: 0;
+        flex: 1 1 auto;
+        overflow-x: hidden;
+        overflow-y: hidden;
+    `,
+    content: styled(Flex)`
+        position: relative;
+        box-sizing: border-box;
+        flex: 0 0 auto;
+        align-self: stretch;
+        min-height: 0;
+        min-width: 0;
+        width: auto;
+        max-width: 100%;
+    `,
+};

package/src/libs/ScrollFlex/tools/buildVariantOuterStyle.js

@@ -0,0 +1,125 @@
+import { addBarGutterToCssSize } from "./scrollBarLayout";
+import { getLayoutSizeCss } from "./cssSizeUtils";
+
+export const buildVariantOuterStyle = ({
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    intrinsicWidth,
+    hasExplicitContainerWidth,
+    hasExplicitContainerHeight,
+    hasMaxWidthBound,
+    hasMaxHeightBound,
+    hasWidthRefOrId,
+    hasHeightRefOrId,
+    autoWidthEnabled,
+    autoHeightEnabled,
+    autoWidthFlexGrow,
+    autoWidthCapsToParent,
+    autoHeightCapsToParent,
+    measuredWidth,
+    measuredHeight,
+    contentWidthPx,
+    contentHeightPx,
+    barGutters,
+    getContainerExtraInsetPx,
+    needsShellViewport,
+    restPropsWithoutShellPadding,
+    resolveContainerWidthSource,
+    resolveContainerHeightSource,
+}) => {
+    const containerWidthSource = resolveContainerWidthSource({
+        width,
+        restProps: restPropsWithoutShellPadding,
+        measuredWidth,
+        hasWidthRefOrId,
+    });
+
+    const containerHeightSource = resolveContainerHeightSource({
+        height,
+        measuredHeight,
+        hasHeightRefOrId,
+    });
+
+    const { gutterX, gutterY } = barGutters;
+    const out = {};
+
+    if (
+        hasExplicitContainerWidth &&
+        containerWidthSource != null &&
+        containerWidthSource !== ""
+    ) {
+        const w = getLayoutSizeCss(containerWidthSource);
+
+        out.width = w;
+
+        if (String(containerWidthSource).trim() !== "100%") {
+            out.maxWidth = w;
+        }
+    } else if (autoWidthEnabled && autoWidthFlexGrow) {
+        out.flex = "1 1 0";
+        out.minWidth = 0;
+    } else if (autoWidthEnabled && measuredWidth != null && measuredWidth !== "") {
+        out.width = getLayoutSizeCss(measuredWidth);
+
+        if (autoWidthCapsToParent) {
+            out.maxWidth = "100%";
+        }
+    } else if (autoWidthEnabled) {
+        out.width = "100%";
+        out.maxWidth = "100%";
+        out.minWidth = 0;
+    } else if (contentWidthPx > 0) {
+        out.width = `${Math.ceil(contentWidthPx + getContainerExtraInsetPx("x"))}px`;
+    } else if (intrinsicWidth) {
+        out.width = "max-content";
+    }
+
+    if (hasMaxWidthBound && !hasExplicitContainerWidth) {
+        out.maxWidth = addBarGutterToCssSize(maxWidth, gutterX);
+    } else if (maxWidth === null) {
+        delete out.maxWidth;
+    }
+
+    if (
+        hasExplicitContainerHeight &&
+        containerHeightSource != null &&
+        containerHeightSource !== ""
+    ) {
+        out.height = getLayoutSizeCss(containerHeightSource);
+    } else if (autoHeightEnabled && measuredHeight != null && measuredHeight !== "") {
+        out.height = getLayoutSizeCss(measuredHeight);
+
+        if (autoHeightCapsToParent) {
+            out.maxHeight = "100%";
+        }
+    } else if (contentHeightPx > 0) {
+        out.height = `${Math.round(contentHeightPx + getContainerExtraInsetPx("y"))}px`;
+
+        if (!hasExplicitContainerWidth) {
+            out.width = out.width ?? "100%";
+            out.maxWidth = out.maxWidth ?? "100%";
+            out.minWidth = out.minWidth ?? 0;
+        }
+    }
+
+    if (hasMaxHeightBound && !hasExplicitContainerHeight) {
+        out.maxHeight = addBarGutterToCssSize(maxHeight, gutterY);
+    }
+
+    if (needsShellViewport) {
+        out.display ??= "flex";
+        out.flexDirection ??= "column";
+        out.minHeight ??= 0;
+        out.minWidth ??= 0;
+        out.overflow ??= "hidden";
+    }
+
+    const merged = {
+        ...out,
+        ...(restPropsWithoutShellPadding.style || {}),
+    };
+
+    return Object.keys(merged).length ? merged : undefined;
+};

package/src/libs/ScrollFlex/tools/computeDragScrollDelta.js

@@ -0,0 +1,5 @@
+
+export const computeDragScrollFromPointers = (startClient, currentClient, startScroll) => ({
+    scrollLeft: startScroll.scrollLeft - (currentClient.x - startClient.x),
+    scrollTop: startScroll.scrollTop - (currentClient.y - startClient.y),
+});

package/src/libs/ScrollFlex/tools/constants.js

@@ -0,0 +1,32 @@
+export const EMPTY_FLEX_PROPS = {};
+export const EMPTY_SCROLL_BAR_PROPS = {};
+export const CONTENT_SIZE_MEASURE_SLACK_PX = 1;
+
+export const PADDING_CAMEL_KEYS = [
+    "padding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "paddingBlock",
+    "paddingInline",
+    "paddingBlockStart",
+    "paddingBlockEnd",
+    "paddingInlineStart",
+    "paddingInlineEnd",
+];
+
+export const PADDING_CAMEL_SET = new Set(PADDING_CAMEL_KEYS);
+
+export const CONTENT_FLEX_PART_KEYS = [
+    "flex",
+    "flexGrow",
+    "flexShrink",
+    "flexBasis",
+    "grow",
+    "shrink",
+    "basis",
+    "flex-grow",
+    "flex-shrink",
+    "flex-basis",
+];

package/src/libs/ScrollFlex/tools/containerDimensions.js

@@ -0,0 +1,34 @@
+export const getContainerHeight = ({ height }) => (height != null && height !== "" ? height : null);
+
+export const getContainerWidth = ({ width, restProps }) => {
+    if (width != null && width !== "") return width;
+    if (restProps?.width != null && restProps.width !== "") return restProps.width;
+
+    return null;
+};
+
+export const isFlexRowParent = (parent) => {
+    if (!parent || typeof getComputedStyle === "undefined") return false;
+
+    const cs = getComputedStyle(parent);
+
+    if (!cs.display.includes("flex")) return false;
+
+    const dir = cs.flexDirection;
+
+    return dir === "row" || dir === "row-reverse";
+};
+
+export const resolveContainerWidthSource = ({ width, restProps, measuredWidth, hasWidthRefOrId }) => {
+    if (width != null && width !== "") return width;
+    if (hasWidthRefOrId && measuredWidth != null && measuredWidth !== "") return measuredWidth;
+
+    return getContainerWidth({ width, restProps });
+};
+
+export const resolveContainerHeightSource = ({ height, measuredHeight, hasHeightRefOrId }) => {
+    if (height != null && height !== "") return height;
+    if (hasHeightRefOrId && measuredHeight != null && measuredHeight !== "") return measuredHeight;
+
+    return getContainerHeight({ height });
+};

package/src/libs/ScrollFlex/tools/containerExtraInset.js

@@ -0,0 +1,9 @@
+import { CONTENT_SIZE_MEASURE_SLACK_PX } from "./constants";
+
+export const getContainerExtraInsetPx = (axis, { barGutters, shellPaddingInsetsPx, containerBorderInsetsPx }) => {
+    const gutter = axis === "x" ? barGutters.gutterX : barGutters.gutterY;
+    const pad = axis === "x" ? shellPaddingInsetsPx.x : shellPaddingInsetsPx.y;
+    const border = axis === "x" ? containerBorderInsetsPx.x : containerBorderInsetsPx.y;
+
+    return gutter + pad + border + CONTENT_SIZE_MEASURE_SLACK_PX;
+};

package/src/libs/ScrollFlex/tools/contentFlexProps.js

@@ -0,0 +1,67 @@
+import { mergeFlexKebabPropAliases } from "../../Flex/tools/generateProps.js";
+import { CONTENT_FLEX_PART_KEYS } from "./constants";
+import { getCssSize, getLayoutSizeCss } from "./cssSizeUtils";
+
+export const resolveContentFlexShorthand = (props) => {
+    const merged = mergeFlexKebabPropAliases(props || {});
+
+    const explicitFlex =
+        merged.flex != null && String(merged.flex).trim() !== ""
+            ? String(merged.flex).trim()
+            : null;
+
+    const growRaw = merged.flexGrow;
+    const shrinkRaw = merged.flexShrink;
+    const basisRaw = merged.flexBasis;
+
+    const hasGrow = growRaw != null && growRaw !== "";
+    const hasShrink = shrinkRaw != null && shrinkRaw !== "";
+    const hasBasis = basisRaw != null && basisRaw !== "";
+    const hasParts = hasGrow || hasShrink || hasBasis;
+
+    if (explicitFlex) return explicitFlex;
+    if (!hasParts) return null;
+
+    const grow = hasGrow ? String(growRaw) : "0";
+    const shrink = hasShrink ? String(shrinkRaw) : "0";
+    const basis = hasBasis ? getLayoutSizeCss(basisRaw) ?? getCssSize(basisRaw) : "auto";
+
+    return `${grow} ${shrink} ${basis}`;
+};
+
+export const applyContentFlexProps = (props) => {
+    if (!props || typeof props !== "object") return props;
+
+    const shorthand = resolveContentFlexShorthand(props);
+    const out = { ...props };
+
+    for (const key of CONTENT_FLEX_PART_KEYS) {
+        delete out[key];
+    }
+
+    if (shorthand == null) return out;
+
+    const style = { ...(out.style || {}), flex: shorthand };
+
+    return { ...out, flex: shorthand, style };
+};
+
+export const mergeDefaultAlignment = (props) => {
+    const hasDirectJustify = props.justify != null || props.justifyContent != null;
+    const hasDirectAlign = props.alignItems != null || props.align != null;
+    const hasAxisAlign = props.xAlign != null || props.yAlign != null;
+
+    if (hasAxisAlign) {
+        return {
+            ...props,
+            ...(props.xAlign == null && !hasDirectJustify ? { xAlign: "start" } : {}),
+            ...(props.yAlign == null && !hasDirectAlign ? { yAlign: "start" } : {}),
+        };
+    }
+
+    return {
+        ...props,
+        ...(hasDirectJustify ? {} : { justify: "start" }),
+        ...(hasDirectAlign ? {} : { align: "start" }),
+    };
+};

package/src/libs/ScrollFlex/tools/contentMeasure.js

@@ -0,0 +1,96 @@
+export const measureContentAxisPx = (el, axis) => {
+    if (!el?.getBoundingClientRect) return 0;
+
+    const rect = el.getBoundingClientRect();
+    const roundAxis = axis === "x" ? Math.ceil : Math.round;
+    const layout = roundAxis(axis === "x" ? rect.width || 0 : rect.height || 0);
+    const scroll = roundAxis(axis === "x" ? el.scrollWidth || 0 : el.scrollHeight || 0);
+
+    return Math.max(layout, scroll);
+};
+
+export const measureContentIntrinsicAxisPx = (el, axis) => {
+    if (!el?.getBoundingClientRect) return 0;
+
+    const isX = axis === "x";
+    const saved = {
+        width: el.style.width,
+        maxWidth: el.style.maxWidth,
+        minWidth: el.style.minWidth,
+        height: el.style.height,
+        maxHeight: el.style.maxHeight,
+        minHeight: el.style.minHeight,
+        alignSelf: el.style.alignSelf,
+    };
+
+    try {
+        if (isX) {
+            el.style.width = "max-content";
+            el.style.maxWidth = "none";
+            el.style.minWidth = "0";
+            el.style.alignSelf = "flex-start";
+        } else {
+            el.style.height = "max-content";
+            el.style.maxHeight = "none";
+            el.style.minHeight = "0";
+        }
+
+        return measureContentAxisPx(el, axis);
+    } finally {
+        el.style.width = saved.width;
+        el.style.maxWidth = saved.maxWidth;
+        el.style.minWidth = saved.minWidth;
+        el.style.height = saved.height;
+        el.style.maxHeight = saved.maxHeight;
+        el.style.minHeight = saved.minHeight;
+        el.style.alignSelf = saved.alignSelf;
+    }
+};
+
+export const resolveAutoAxisPx = ({
+    contentPx,
+    parentPx,
+    barGutterPx,
+    reserveBarGutter,
+    fallbackPx,
+    borderInsetPx = 0,
+}) => {
+    const content = Math.max(0, contentPx);
+    const parent = Math.max(0, parentPx);
+    const gutter = reserveBarGutter ? Math.max(0, barGutterPx) : 0;
+    const border = Math.max(0, borderInsetPx);
+
+    if (parent <= 0 && content <= 0) {
+        return {
+            px: fallbackPx,
+            capToParentPercent: false,
+        };
+    }
+
+    if (parent <= 0) {
+        return {
+            px: Math.round(content + gutter + border),
+            capToParentPercent: false,
+        };
+    }
+
+    return {
+        px: Math.round(parent),
+        capToParentPercent: true,
+    };
+};
+
+export const createResizeObserver = (callback, nodes = []) => {
+    if (typeof ResizeObserver === "undefined") return null;
+
+    const ro = new ResizeObserver(callback);
+    const seen = new Set();
+
+    for (const node of nodes) {
+        if (!node || seen.has(node)) continue;
+        seen.add(node);
+        ro.observe(node);
+    }
+
+    return ro;
+};

package/src/libs/ScrollFlex/tools/cssSizeUtils.js

@@ -0,0 +1,59 @@
+export const normalizeCalcValue = (value) =>
+    typeof value === "string"
+        ? value.replace(
+              /calc\((.*)\)/g,
+              (_, expression) => `calc(${expression.replace(/\s*([+\-*/])\s*/g, " $1 ")})`,
+          )
+        : value;
+
+export const getCssSize = (value) => {
+    if (value == null) return "0";
+    if (value === 0 || value === "0") return "0";
+    if (typeof value === "number") return `${value}rem`;
+
+    const v = String(value).trim().replace(/\s+/g, "");
+    if (/^-?\d+(\.\d+)?$/.test(v)) return `${v}rem`;
+
+    return normalizeCalcValue(v);
+};
+
+export const getLayoutSizeCss = (value) => {
+    if (value == null || value === "") return undefined;
+
+    if (typeof value === "string") {
+        const v = value.trim();
+
+        if (/^-?\d+(\.\d+)?(px|rem|em|%|vw|vh|vmin|vmax|dvw|dvh)$/i.test(v)) {
+            return normalizeCalcValue(v);
+        }
+
+        if (/^(calc|min|max)\(/i.test(v)) {
+            return normalizeCalcValue(v);
+        }
+    }
+
+    return getCssSize(value);
+};
+
+export const remToPx = (remValue) => {
+    const rem = Number(remValue);
+    if (!Number.isFinite(rem)) return 0;
+    if (typeof document === "undefined") return rem * 16;
+
+    const rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return rem * (Number.isFinite(rootPx) && rootPx > 0 ? rootPx : 16);
+};
+
+export const parseCssLengthToPx = (value, baseFontSize = 16) => {
+    if (value == null || value === "") return 0;
+
+    const raw = String(value).trim();
+
+    if (raw === "0") return 0;
+    if (/^-?\d+(\.\d+)?px$/i.test(raw)) return parseFloat(raw);
+    if (/^-?\d+(\.\d+)?rem$/i.test(raw)) return remToPx(parseFloat(raw));
+    if (/^-?\d+(\.\d+)?em$/i.test(raw)) return parseFloat(raw) * baseFontSize;
+    if (/^-?\d+(\.\d+)?$/.test(raw)) return remToPx(parseFloat(raw));
+
+    return 0;
+};

package/src/libs/ScrollFlex/tools/domInsets.js

@@ -0,0 +1,25 @@
+export const getContainerBorderInsetsPx = (node) => {
+    if (!node || typeof getComputedStyle === "undefined") {
+        return { x: 0, y: 0 };
+    }
+
+    const cs = getComputedStyle(node);
+
+    return {
+        x: (parseFloat(cs.borderLeftWidth) || 0) + (parseFloat(cs.borderRightWidth) || 0),
+        y: (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0),
+    };
+};
+
+export const getPaddingInsetsFromElement = (el) => {
+    if (!el || typeof getComputedStyle === "undefined") {
+        return { x: 0, y: 0 };
+    }
+
+    const cs = getComputedStyle(el);
+
+    return {
+        x: Math.round((parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0)),
+        y: Math.round((parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0)),
+    };
+};

package/src/libs/ScrollFlex/tools/organizedFlexProps.js

@@ -0,0 +1,92 @@
+import { getLayoutSizeCss } from "./cssSizeUtils";
+import { getContainerHeight } from "./containerDimensions";
+import { applyContentFlexProps, mergeDefaultAlignment } from "./contentFlexProps";
+
+export const buildOrganizedFlexProps = ({
+    flexProps,
+    height,
+    width,
+    intrinsicWidth,
+    hasMeasuredHeight,
+    measuredHeight,
+    hasExplicitContainerHeight,
+    hasMaxHeightBound,
+    autoHeightEnabled,
+    explicitContainerWidthValue,
+    restPropsWithoutShellPadding,
+}) => {
+    const explicitContainerHeight = getContainerHeight({ height });
+    const hasFlexContentHeight = flexProps.height != null && flexProps.height !== "";
+    const hasFlexContentWidth = flexProps.width != null && flexProps.width !== "";
+
+    const resolvedHeight = explicitContainerHeight ?? measuredHeight;
+
+    const shouldRender =
+        intrinsicWidth ||
+        explicitContainerHeight != null ||
+        measuredHeight != null ||
+        !hasMeasuredHeight ||
+        (hasMeasuredHeight && explicitContainerHeight == null && measuredHeight == null);
+
+    const style = {
+        ...(restPropsWithoutShellPadding.style || {}),
+        ...(flexProps.style || {}),
+        ...(explicitContainerHeight != null ? { maxHeight: "100vh" } : {}),
+    };
+
+    if (explicitContainerWidthValue != null && !hasFlexContentWidth && style.width == null) {
+        style.width = getLayoutSizeCss(explicitContainerWidthValue);
+    }
+
+    const mergedFlexProps = {
+        ...restPropsWithoutShellPadding,
+        ...flexProps,
+        ...(shouldRender &&
+        resolvedHeight != null &&
+        resolvedHeight !== "" &&
+        !hasFlexContentHeight
+            ? { height: resolvedHeight }
+            : {}),
+        style,
+    };
+
+    const alignedFlexProps = mergeDefaultAlignment(mergedFlexProps);
+
+    const shellHeightBounded =
+        hasExplicitContainerHeight ||
+        hasMaxHeightBound ||
+        (autoHeightEnabled && measuredHeight != null && measuredHeight !== "");
+
+    const hasBoundedScrollHeight = shouldRender && shellHeightBounded;
+
+    if (!hasBoundedScrollHeight || hasFlexContentHeight) {
+        return {
+            shouldRender,
+            flexProps: applyContentFlexProps(alignedFlexProps),
+        };
+    }
+
+    const {
+        height: _height,
+        maxHeight: _maxHeight,
+        style: alignedStyle,
+        ...restAligned
+    } = alignedFlexProps;
+
+    const nextStyle = { ...(alignedStyle || {}) };
+
+    delete nextStyle.height;
+    delete nextStyle.maxHeight;
+
+    if (nextStyle.minHeight == null && nextStyle.minBlockSize == null) {
+        nextStyle.minHeight = "100%";
+    }
+
+    return {
+        shouldRender,
+        flexProps: applyContentFlexProps({
+            ...restAligned,
+            style: nextStyle,
+        }),
+    };
+};