@@ -254,6 +217,16 @@ export namespace AxoDialog {
Close.displayName = `${Namespace}.Close`;
+ export type ExperimentalSearchProps = Readonly<{
+ children: ReactNode;
+ }>;
+
+ export const ExperimentalSearch: FC
= memo(props => {
+ return {props.children}
;
+ });
+
+ ExperimentalSearch.displayName = `${Namespace}.ExperimentalSearch`;
+
/**
* Component:
* ---------------------------
@@ -271,12 +244,13 @@ export namespace AxoDialog {
const contentSize = useContentSize();
const contentSizeConfig = AxoBaseDialog.ContentSizes[contentSize];
- const style = useMemo((): CSSProperties => {
+ const style = useMemo((): CSSProperties | undefined => {
+ if (padding === 'only-scrollbar-gutter') {
+ return;
+ }
+
return {
- paddingInline:
- padding === 'normal'
- ? DIALOG_PADDING_BEFORE_SCROLLBAR_WIDTH
- : undefined,
+ paddingInline: 'calc(24px - var(--axo-scrollbar-gutter-thin-vertical))',
};
}, [padding]);
@@ -323,17 +297,8 @@ export namespace AxoDialog {
}>;
export const Footer: FC = memo(props => {
- const style = useMemo((): CSSProperties => {
- return {
- paddingInline: DIALOG_PADDING_PLUS_SCROLLBAR_WIDTH,
- };
- }, []);
-
return (
-
+
{props.children}
);
@@ -354,6 +319,7 @@ export namespace AxoDialog {
return (
;
+let runOnceGlobally = false;
+
export const AxoProvider: FC
= memo(props => {
+ useInsertionEffect(() => {
+ if (runOnceGlobally) {
+ return;
+ }
+ runOnceGlobally = true;
+
+ const unsubscribe = createScrollbarGutterCssProperties();
+
+ return () => {
+ unsubscribe();
+ runOnceGlobally = false;
+ };
+ });
return (
{props.children}
);
diff --git a/ts/axo/AxoScrollArea.dom.stories.tsx b/ts/axo/AxoScrollArea.dom.stories.tsx
index 7ce9a6aa8f..f267d7b8b1 100644
--- a/ts/axo/AxoScrollArea.dom.stories.tsx
+++ b/ts/axo/AxoScrollArea.dom.stories.tsx
@@ -1,11 +1,10 @@
// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
+import React from 'react';
import type { Meta } from '@storybook/react';
import { AxoScrollArea } from './AxoScrollArea.dom.js';
import { tw } from './tw.dom.js';
-import { getScrollbarGutters } from './_internal/scrollbars.dom.js';
import { AxoSymbol } from './AxoSymbol.dom.js';
export default {
@@ -39,18 +38,9 @@ function VerticalTemplate(props: {
hints?: boolean;
mask?: boolean;
}) {
- const paddingInline = useMemo(() => {
- return getScrollbarGutters('thin', 'custom').vertical;
- }, []);
-
return (
-
- Header
-
+
Header
-
- Footer
-
+
Footer