@lobehub/ui 5.47.4 → 5.47.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -162,6 +162,12 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
162
162
|
border-color: ${cssVar.colorPrimaryActive};
|
|
163
163
|
background: ${cssVar.colorPrimaryActive};
|
|
164
164
|
}
|
|
165
|
+
|
|
166
|
+
/* triple-class specificity so the global popup-open trigger highlight cannot wash out a solid button */
|
|
167
|
+
&&&[data-popup-open] {
|
|
168
|
+
border-color: ${cssVar.colorPrimaryActive};
|
|
169
|
+
background: ${cssVar.colorPrimaryActive};
|
|
170
|
+
}
|
|
165
171
|
`,
|
|
166
172
|
variantDashed: css`
|
|
167
173
|
border-style: dashed;
|
|
@@ -261,6 +267,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
261
267
|
border-color: ${cssVar.colorErrorActive};
|
|
262
268
|
background: ${cssVar.colorErrorActive};
|
|
263
269
|
}
|
|
270
|
+
|
|
271
|
+
&&&[data-popup-open] {
|
|
272
|
+
border-color: ${cssVar.colorErrorActive};
|
|
273
|
+
background: ${cssVar.colorErrorActive};
|
|
274
|
+
}
|
|
264
275
|
`,
|
|
265
276
|
dangerFill: css`
|
|
266
277
|
border-color: transparent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const buttonPaddingInline = {\n large: 16,\n middle: 14,\n small: 8,\n} as const;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n base: css`\n cursor: pointer;\n\n position: relative;\n\n display: inline-flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n border: 1px solid ${cssVar.colorBorder};\n\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n\n transition:\n color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n ${focusRing};\n\n &:disabled,\n &[aria-disabled='true'] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n\n sizeSmall: css`\n --button-padding-inline: ${buttonPaddingInline.small}px;\n\n height: ${controlHeight.small}px;\n padding-inline: var(--button-padding-inline);\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 12px;\n `,\n\n sizeMiddle: css`\n --button-padding-inline: ${buttonPaddingInline.middle}px;\n\n height: ${controlHeight.middle}px;\n padding-inline: var(--button-padding-inline);\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 13px;\n `,\n\n sizeLarge: css`\n --button-padding-inline: ${buttonPaddingInline.large}px;\n\n height: ${controlHeight.large}px;\n padding-inline: var(--button-padding-inline);\n border-radius: ${cssVar.borderRadius};\n font-size: 14px;\n `,\n\n outdentStart: css`\n margin-inline-start: calc(var(--button-padding-inline) * -1);\n `,\n\n outdentEnd: css`\n margin-inline-end: calc(var(--button-padding-inline) * -1);\n `,\n\n shapeCircle: css`\n padding-inline: 0;\n border-radius: 50%;\n `,\n\n shapeRound: css`\n border-radius: 999px;\n `,\n\n block: css`\n width: 100%;\n `,\n\n iconEnd: css`\n flex-direction: row-reverse;\n `,\n\n iconOnlySmall: css`\n --button-padding-inline: 0px;\n\n width: 24px;\n padding-inline: 0;\n `,\n\n iconOnlyMiddle: css`\n --button-padding-inline: 0px;\n\n width: 32px;\n padding-inline: 0;\n `,\n\n iconOnlyLarge: css`\n --button-padding-inline: 0px;\n\n width: 40px;\n padding-inline: 0;\n `,\n\n iconBox: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n `,\n\n spinnerSlot: css`\n overflow: hidden;\n\n width: 0;\n margin-inline-end: -6px;\n\n opacity: 0;\n\n transition:\n width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n `,\n\n spinnerSlotEnd: css`\n margin-inline: -6px 0;\n `,\n\n spinnerSlotShow: css`\n width: 12px;\n margin-inline: 0;\n opacity: 1;\n `,\n\n variantDefault: css`\n background: ${cssVar.colorBgContainer};\n\n /* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantPrimary: css`\n border-color: ${cssVar.colorPrimary};\n background: ${cssVar.colorPrimary};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorBgLayout};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n variantDashed: css`\n border-style: dashed;\n background: ${cssVar.colorBgContainer};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantFill: css`\n border-color: transparent;\n background: ${cssVar.colorFillTertiary};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFill};\n }\n `,\n\n variantText: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n variantLink: css`\n padding-inline: 0;\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorPrimary};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryHover};\n background: transparent;\n }\n `,\n\n dangerOutlined: css`\n border-color: ${cssVar.colorError};\n background: ${cssVar.colorBgContainer};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorBgContainer};\n }\n `,\n\n dangerSolid: css`\n border-color: ${cssVar.colorError};\n background: ${cssVar.colorError};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorBgLayout};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n\n dangerFill: css`\n border-color: transparent;\n color: ${cssVar.colorError};\n background: ${cssVar.colorErrorBg};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorBgHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorBgHover};\n }\n `,\n\n dangerInline: css`\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n }\n `,\n\n ghostDefault: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFill};\n }\n `,\n\n ghostPrimary: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorPrimary};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorFill};\n }\n `,\n\n ghostDanger: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorFill};\n }\n `,\n\n spinner: css`\n @keyframes base-button-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 12px;\n height: 12px;\n border: 1.5px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: base-button-spin 0.6s linear infinite;\n `,\n}));\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const buttonPaddingInline = {\n large: 16,\n middle: 14,\n small: 8,\n} as const;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n base: css`\n cursor: pointer;\n\n position: relative;\n\n display: inline-flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n border: 1px solid ${cssVar.colorBorder};\n\n font-weight: 500;\n line-height: 1;\n text-decoration: none;\n white-space: nowrap;\n\n transition:\n color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n ${focusRing};\n\n &:disabled,\n &[aria-disabled='true'] {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n }\n `,\n\n sizeSmall: css`\n --button-padding-inline: ${buttonPaddingInline.small}px;\n\n height: ${controlHeight.small}px;\n padding-inline: var(--button-padding-inline);\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 12px;\n `,\n\n sizeMiddle: css`\n --button-padding-inline: ${buttonPaddingInline.middle}px;\n\n height: ${controlHeight.middle}px;\n padding-inline: var(--button-padding-inline);\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 13px;\n `,\n\n sizeLarge: css`\n --button-padding-inline: ${buttonPaddingInline.large}px;\n\n height: ${controlHeight.large}px;\n padding-inline: var(--button-padding-inline);\n border-radius: ${cssVar.borderRadius};\n font-size: 14px;\n `,\n\n outdentStart: css`\n margin-inline-start: calc(var(--button-padding-inline) * -1);\n `,\n\n outdentEnd: css`\n margin-inline-end: calc(var(--button-padding-inline) * -1);\n `,\n\n shapeCircle: css`\n padding-inline: 0;\n border-radius: 50%;\n `,\n\n shapeRound: css`\n border-radius: 999px;\n `,\n\n block: css`\n width: 100%;\n `,\n\n iconEnd: css`\n flex-direction: row-reverse;\n `,\n\n iconOnlySmall: css`\n --button-padding-inline: 0px;\n\n width: 24px;\n padding-inline: 0;\n `,\n\n iconOnlyMiddle: css`\n --button-padding-inline: 0px;\n\n width: 32px;\n padding-inline: 0;\n `,\n\n iconOnlyLarge: css`\n --button-padding-inline: 0px;\n\n width: 40px;\n padding-inline: 0;\n `,\n\n iconBox: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n `,\n\n spinnerSlot: css`\n overflow: hidden;\n\n width: 0;\n margin-inline-end: -6px;\n\n opacity: 0;\n\n transition:\n width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n `,\n\n spinnerSlotEnd: css`\n margin-inline: -6px 0;\n `,\n\n spinnerSlotShow: css`\n width: 12px;\n margin-inline: 0;\n opacity: 1;\n `,\n\n variantDefault: css`\n background: ${cssVar.colorBgContainer};\n\n /* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantPrimary: css`\n border-color: ${cssVar.colorPrimary};\n background: ${cssVar.colorPrimary};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorBgLayout};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n\n /* triple-class specificity so the global popup-open trigger highlight cannot wash out a solid button */\n &&&[data-popup-open] {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n variantDashed: css`\n border-style: dashed;\n background: ${cssVar.colorBgContainer};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorPrimaryBorder};\n color: ${cssVar.colorPrimaryText};\n }\n `,\n\n variantFill: css`\n border-color: transparent;\n background: ${cssVar.colorFillTertiary};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFill};\n }\n `,\n\n variantText: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n variantLink: css`\n padding-inline: 0;\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorPrimary};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryHover};\n background: transparent;\n }\n `,\n\n dangerOutlined: css`\n border-color: ${cssVar.colorError};\n background: ${cssVar.colorBgContainer};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorBgContainer};\n }\n `,\n\n dangerSolid: css`\n border-color: ${cssVar.colorError};\n background: ${cssVar.colorError};\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorBgLayout};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n\n &&&[data-popup-open] {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n\n dangerFill: css`\n border-color: transparent;\n color: ${cssVar.colorError};\n background: ${cssVar.colorErrorBg};\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorBgHover};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorBgHover};\n }\n `,\n\n dangerInline: css`\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n }\n `,\n\n ghostDefault: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorText};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n background: ${cssVar.colorFill};\n }\n `,\n\n ghostPrimary: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorPrimary};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorFill};\n }\n `,\n\n ghostDanger: css`\n border-color: transparent;\n background: transparent;\n\n &,\n &:hover,\n &:active {\n color: ${cssVar.colorError};\n }\n\n &:hover:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active:not(:disabled, [aria-disabled='true']) {\n color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorFill};\n }\n `,\n\n spinner: css`\n @keyframes base-button-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n\n width: 12px;\n height: 12px;\n border: 1.5px solid currentcolor;\n border-block-start-color: transparent;\n border-radius: 50%;\n\n animation: base-button-spin 0.6s linear infinite;\n `,\n}));\n"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ declare const styles: {
|
|
|
23
23
|
};
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
|
-
size?: "
|
|
26
|
+
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
27
|
variant?: "filled" | "borderless" | "outlined" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "../ScrollArea/atoms.mjs";
|
|
3
|
-
import { cloneElement, useCallback, useEffect, useRef } from "react";
|
|
3
|
+
import { Children, cloneElement, useCallback, useEffect, useRef } from "react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { createStaticStyles, cx } from "antd-style";
|
|
6
6
|
import { useMergeRefs } from "react-merge-refs";
|
|
@@ -31,7 +31,7 @@ const VirtualScrollArea = ({ children, className, itemSize, keepMounted, viewpor
|
|
|
31
31
|
keepMounted,
|
|
32
32
|
ref: virtualizerRef,
|
|
33
33
|
scrollRef: viewportRef,
|
|
34
|
-
ssrCount: INITIAL_ROW_COUNT,
|
|
34
|
+
ssrCount: Math.min(INITIAL_ROW_COUNT, Children.count(children)),
|
|
35
35
|
children
|
|
36
36
|
});
|
|
37
37
|
const viewportElement = /* @__PURE__ */ jsx(ScrollAreaViewport, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/base-ui/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport {\n cloneElement,\n type ReactElement,\n type ReactNode,\n type Ref,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n ScrollAreaRoot,\n type ScrollAreaRootProps,\n ScrollAreaScrollbar,\n ScrollAreaThumb,\n ScrollAreaViewport,\n type ScrollAreaViewportProps,\n} from '@/base-ui/ScrollArea/atoms';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = createStaticStyles(({ css }) => ({\n root: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-height: 0;\n margin-inline: calc(-1 * var(--lobe-virtual-scroll-inset, 0px));\n `,\n viewport: css`\n flex: 1;\n height: auto;\n min-height: 0;\n padding-inline: var(--lobe-virtual-scroll-inset, 0);\n `,\n}));\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n children: ReactNode;\n itemSize?: number;\n keepMounted?: readonly number[];\n /**\n * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n * through the ScrollArea viewport so its own props and role win.\n */\n viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n viewportProps?: ScrollAreaViewportProps;\n virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n children,\n className,\n itemSize,\n keepMounted,\n viewport,\n viewportProps,\n virtualizerRef,\n ...rest\n}: VirtualScrollAreaProps) => {\n const viewportRef = useRef<HTMLDivElement | null>(null);\n const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n const list = (\n <Virtualizer\n itemSize={itemSize}\n keepMounted={keepMounted}\n ref={virtualizerRef}\n scrollRef={viewportRef}\n ssrCount={INITIAL_ROW_COUNT}\n >\n {children}\n </Virtualizer>\n );\n const viewportElement = (\n <ScrollAreaViewport\n tabIndex={-1}\n {...viewportProps}\n className={cx(styles.viewport, viewportProps?.className as string)}\n ref={mergedViewportRef}\n />\n );\n\n return (\n <ScrollAreaRoot data-virtual=\"\" {...rest} className={cx(styles.root, className as string)}>\n {cloneElement(viewport ?? viewportElement, {\n children: list,\n ...(viewport && { render: viewportElement }),\n })}\n <ScrollAreaScrollbar>\n <ScrollAreaThumb />\n </ScrollAreaScrollbar>\n </ScrollAreaRoot>\n );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n const pointerScrollRef = useRef(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const markPointerScroll = useCallback(() => {\n pointerScrollRef.current = true;\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n pointerScrollRef.current = false;\n }, 120);\n }, []);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n };\n }, []);\n\n return {\n markPointerScroll,\n pointerScrollRef,\n scrollGuardProps: {\n onPointerDown: markPointerScroll,\n onTouchMove: markPointerScroll,\n onWheel: markPointerScroll,\n },\n };\n}\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/base-ui/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport {\n Children,\n cloneElement,\n type ReactElement,\n type ReactNode,\n type Ref,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n ScrollAreaRoot,\n type ScrollAreaRootProps,\n ScrollAreaScrollbar,\n ScrollAreaThumb,\n ScrollAreaViewport,\n type ScrollAreaViewportProps,\n} from '@/base-ui/ScrollArea/atoms';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = createStaticStyles(({ css }) => ({\n root: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-height: 0;\n margin-inline: calc(-1 * var(--lobe-virtual-scroll-inset, 0px));\n `,\n viewport: css`\n flex: 1;\n height: auto;\n min-height: 0;\n padding-inline: var(--lobe-virtual-scroll-inset, 0);\n `,\n}));\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n children: ReactNode;\n itemSize?: number;\n keepMounted?: readonly number[];\n /**\n * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n * through the ScrollArea viewport so its own props and role win.\n */\n viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n viewportProps?: ScrollAreaViewportProps;\n virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n children,\n className,\n itemSize,\n keepMounted,\n viewport,\n viewportProps,\n virtualizerRef,\n ...rest\n}: VirtualScrollAreaProps) => {\n const viewportRef = useRef<HTMLDivElement | null>(null);\n const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n const list = (\n <Virtualizer\n itemSize={itemSize}\n keepMounted={keepMounted}\n ref={virtualizerRef}\n scrollRef={viewportRef}\n ssrCount={Math.min(INITIAL_ROW_COUNT, Children.count(children))}\n >\n {children}\n </Virtualizer>\n );\n const viewportElement = (\n <ScrollAreaViewport\n tabIndex={-1}\n {...viewportProps}\n className={cx(styles.viewport, viewportProps?.className as string)}\n ref={mergedViewportRef}\n />\n );\n\n return (\n <ScrollAreaRoot data-virtual=\"\" {...rest} className={cx(styles.root, className as string)}>\n {cloneElement(viewport ?? viewportElement, {\n children: list,\n ...(viewport && { render: viewportElement }),\n })}\n <ScrollAreaScrollbar>\n <ScrollAreaThumb />\n </ScrollAreaScrollbar>\n </ScrollAreaRoot>\n );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n const pointerScrollRef = useRef(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const markPointerScroll = useCallback(() => {\n pointerScrollRef.current = true;\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n pointerScrollRef.current = false;\n }, 120);\n }, []);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n };\n }, []);\n\n return {\n markPointerScroll,\n pointerScrollRef,\n scrollGuardProps: {\n onPointerDown: markPointerScroll,\n onTouchMove: markPointerScroll,\n onWheel: markPointerScroll,\n },\n };\n}\n"],"mappings":";;;;;;;;AA2BA,MAAM,SAAS,oBAAoB,EAAE,WAAW;CAC9C,MAAM,GAAG;;;;;;;;CAQT,UAAU,GAAG;;;;;;AAMf,EAAE;AAIF,MAAM,oBAAoB;AAe1B,MAAa,qBAAqB,EAChC,UACA,WACA,UACA,aACA,UACA,eACA,gBACA,GAAG,WACyB;CAC5B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,oBAAoB,aAAa,CAAC,aAAa,eAAe,GAAG,CAAC;CAExE,MAAM,OACJ,oBAAC,aAAD;EACY;EACG;EACb,KAAK;EACL,WAAW;EACX,UAAU,KAAK,IAAI,mBAAmB,SAAS,MAAM,QAAQ,CAAC;EAE7D;CACU,CAAA;CAEf,MAAM,kBACJ,oBAAC,oBAAD;EACE,UAAU;EACV,GAAI;EACJ,WAAW,GAAG,OAAO,UAAU,eAAe,SAAmB;EACjE,KAAK;CACN,CAAA;CAGH,OACE,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,GAAG,OAAO,MAAM,SAAmB;EAAxF,UAAA,CACG,aAAa,YAAY,iBAAiB;GACzC,UAAU;GACV,GAAI,YAAY,EAAE,QAAQ,gBAAgB;EAC5C,CAAC,GACD,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AAEpB;AAEA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CAEpE,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,UAAU;EAC3B,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU,iBAAiB;GACpC,iBAAiB,UAAU;EAC7B,GAAG,GAAG;CACR,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}
|