@drivenets/design-system 0.12.1 → 0.13.0

package/src/components/ds-workspace-layout/ds-workspace-layout.types.ts

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export interface DsWorkspaceLayoutProps extends ComponentPropsWithRef<'div'> {
+	/**
+	 * Whether the workspace should fill its parent height (`100%`) instead of the viewport (`100vh`).
+	 * @default false
+	 */
+	fillParent?: boolean;
+}
+
+export type DsWorkspaceLayoutHeaderProps = ComponentPropsWithRef<'header'>;
+
+export type DsWorkspaceLayoutSubHeaderProps = ComponentPropsWithRef<'div'>;
+
+export type DsWorkspaceLayoutContentProps = ComponentPropsWithRef<'div'>;
+
+export type DsWorkspaceLayoutFooterProps = ComponentPropsWithRef<'footer'>;
+
+export type DsWorkspaceLayoutBodyProps = ComponentPropsWithRef<'div'>;
+
+export type DsWorkspaceLayoutLeftPanelProps = ComponentPropsWithRef<'aside'>;
+
+export interface DsWorkspaceLayoutSideMenuProps extends ComponentPropsWithRef<'aside'> {
+	/**
+	 * Whether the side menu is pinned open. When `true`, the expanded panel pushes the content area
+	 * to the right; when `false`, the collapsed rail is shown and hovering it overlays the expanded
+	 * panel without shifting the content.
+	 * @default false
+	 */
+	pinned?: boolean;
+	/**
+	 * Called when the built-in pin/unpin button is clicked. Pass this prop to render the pin
+	 * affordance in the top-right corner of the expanded panel; omit it to hide the button (e.g.
+	 * when the side menu should always remain in its default collapsed state).
+	 */
+	onPinnedChange?: (pinned: boolean) => void;
+	/**
+	 * Locale object (you can pass custom strings for localization).
+	 */
+	locale?: {
+		/**
+		 * aria-label for the pin button when the side menu is collapsed/unpinned.
+		 * @default 'Pin side menu'
+		 */
+		pinButtonLabel?: string;
+		/**
+		 * aria-label for the pin button when the side menu is pinned.
+		 * @default 'Unpin side menu'
+		 */
+		unpinButtonLabel?: string;
+	};
+}

package/src/components/ds-workspace-layout/index.ts

@@ -0,0 +1,11 @@
+export { default as DsWorkspaceLayout } from './ds-workspace-layout';
+export type {
+	DsWorkspaceLayoutProps,
+	DsWorkspaceLayoutHeaderProps,
+	DsWorkspaceLayoutSubHeaderProps,
+	DsWorkspaceLayoutContentProps,
+	DsWorkspaceLayoutFooterProps,
+	DsWorkspaceLayoutBodyProps,
+	DsWorkspaceLayoutSideMenuProps,
+	DsWorkspaceLayoutLeftPanelProps,
+} from './ds-workspace-layout.types';

package/src/index.ts

@@ -64,5 +64,5 @@ export * from './components/ds-tooltip';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-vertical-tabs';
-export * from './components/ds-workspace';
+export * from './components/ds-workspace-layout';
 export * from './utils/responsive';

package/src/styles/_scrollbars.scss

@@ -35,6 +35,43 @@ $scrollbar-thin-size: 4px;
 	}
 }
 
+@mixin scrollbar-on-hover {
+	&::-webkit-scrollbar {
+		width: $scrollbar-thin-size;
+		height: $scrollbar-thin-size;
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: transparent;
+		border-radius: $scrollbar-border-radius;
+		transition: background-color 0.2s;
+	}
+
+	&:hover::-webkit-scrollbar-thumb {
+		background-color: var(--background-tertiary);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: var(--background-deselected-hover);
+	}
+
+	scrollbar-width: thin;
+	scrollbar-color: transparent transparent;
+
+	&:hover {
+		scrollbar-color: var(--background-tertiary) transparent;
+	}
+}
+
 * {
 	@include scrollbar-base($scrollbar-default-size);
 	@include firefox-scrollbar($scrollbar-default-size);

package/src/utils/restore-document-body-modal-styles.ts

@@ -0,0 +1,44 @@
+const SCROLL_LOCK_ATTRIBUTE = 'data-scroll-lock';
+const INERT_ATTRIBUTE = 'data-inert';
+const ARIA_HIDDEN_MARKER = 'data-aria-hidden';
+
+/**
+ * Clears document body styles and attributes left by Zag dialog modal effects when a
+ * dialog instance tears down without a normal close transition.
+ *
+ * No-op unless a leak sentinel is present: in the common case Zag restores the body on
+ * unmount itself, and we must not clobber styles the host app owns.
+ */
+export const restoreDocumentBodyModalStyles = (doc: Document = document) => {
+	const { body, documentElement } = doc;
+
+	const hasLeakedLock =
+		body.hasAttribute(SCROLL_LOCK_ATTRIBUTE) ||
+		body.hasAttribute(INERT_ATTRIBUTE) ||
+		body.style.pointerEvents === 'none';
+
+	if (!hasLeakedLock) {
+		return;
+	}
+
+	body.removeAttribute(SCROLL_LOCK_ATTRIBUTE);
+	body.removeAttribute(INERT_ATTRIBUTE);
+	body.removeAttribute(ARIA_HIDDEN_MARKER);
+
+	if (body.getAttribute('aria-hidden') === 'true') {
+		body.removeAttribute('aria-hidden');
+	}
+
+	body.style.removeProperty('overflow');
+	body.style.removeProperty('pointer-events');
+	body.style.removeProperty('position');
+	body.style.removeProperty('top');
+	body.style.removeProperty('left');
+	body.style.removeProperty('right');
+
+	if (body.style.length === 0) {
+		body.removeAttribute('style');
+	}
+
+	documentElement.style.removeProperty('--scrollbar-width');
+};

package/src/utils/use-ark-dialog-body-lock-cleanup.ts

@@ -0,0 +1,36 @@
+import { useLayoutEffect, useRef } from 'react';
+import { restoreDocumentBodyModalStyles } from './restore-document-body-modal-styles';
+
+const activeBodyLockInstances = new Set<symbol>();
+
+const scheduleBodyLockRestoreIfIdle = () => {
+	queueMicrotask(() => {
+		if (activeBodyLockInstances.size > 0) {
+			return;
+		}
+
+		restoreDocumentBodyModalStyles();
+	});
+};
+
+/**
+ * Ensures Zag dialog body scroll-lock and modal pointer blocking are released when
+ * an Ark dialog unmounts while still open (e.g. close + conditional unmount + navigate).
+ */
+export const useArkDialogBodyLockCleanup = (open: boolean, enabled: boolean) => {
+	const instanceIdRef = useRef(Symbol('ark-dialog-body-lock'));
+
+	useLayoutEffect(() => {
+		if (!open || !enabled) {
+			return;
+		}
+
+		const instanceId = instanceIdRef.current;
+		activeBodyLockInstances.add(instanceId);
+
+		return () => {
+			activeBodyLockInstances.delete(instanceId);
+			scheduleBodyLockRestoreIfIdle();
+		};
+	}, [open, enabled]);
+};

package/src/components/ds-workspace/ds-workspace.module.scss

@@ -1,55 +0,0 @@
-.root {
-	--ds-workspace-header-height: 54px;
-	--ds-workspace-header-gradient: radial-gradient(
-		ellipse at left bottom,
-		rgba(1, 75, 253, 1) 0%,
-		rgba(10, 60, 194, 1) 78%,
-		rgba(16, 51, 160, 1) 89%,
-		rgba(21, 42, 126, 1) 100%
-	);
-
-	display: flex;
-	flex-direction: column;
-	height: 100vh;
-	overflow: hidden;
-	background: var(--background);
-}
-
-.fillParent {
-	height: 100%;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	height: var(--ds-workspace-header-height);
-	padding: 0 var(--sm) 0 var(--lg);
-	background: var(--ds-workspace-header-gradient);
-	color: var(--font-on-action);
-	overflow: clip;
-}
-
-.subHeader {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	padding: var(--xs) var(--standard);
-	border-bottom: 1px solid var(--border);
-	background: var(--background);
-}
-
-.content {
-	position: relative;
-	flex: 1;
-	overflow: auto;
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	padding: var(--xs) var(--standard);
-	border-top: 1px solid var(--border);
-	background: var(--background);
-}

package/src/components/ds-workspace/ds-workspace.tsx

@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-import styles from './ds-workspace.module.scss';
-import type {
-	DsWorkspaceProps,
-	DsWorkspaceHeaderProps,
-	DsWorkspaceSubHeaderProps,
-	DsWorkspaceContentProps,
-	DsWorkspaceFooterProps,
-} from './ds-workspace.types';
-
-const DsWorkspace = ({ className, fillParent = false, ...rest }: DsWorkspaceProps) => (
-	<div {...rest} className={classNames(styles.root, { [styles.fillParent]: fillParent }, className)} />
-);
-
-const Header = ({ className, ...rest }: DsWorkspaceHeaderProps) => (
-	<header {...rest} className={classNames(styles.header, className)} />
-);
-
-const SubHeader = ({ className, ...rest }: DsWorkspaceSubHeaderProps) => (
-	<div {...rest} className={classNames(styles.subHeader, className)} />
-);
-
-/** Stacking context for non-portal drawer containment. */
-const Content = ({ className, ...rest }: DsWorkspaceContentProps) => (
-	<div {...rest} className={classNames(styles.content, className)} />
-);
-
-const Footer = ({ className, ...rest }: DsWorkspaceFooterProps) => (
-	<footer {...rest} className={classNames(styles.footer, className)} />
-);
-
-DsWorkspace.Header = Header;
-DsWorkspace.SubHeader = SubHeader;
-DsWorkspace.Content = Content;
-DsWorkspace.Footer = Footer;
-
-export default DsWorkspace;

package/src/components/ds-workspace/ds-workspace.types.ts

@@ -1,17 +0,0 @@
-import type { ComponentPropsWithRef } from 'react';
-
-export interface DsWorkspaceProps extends ComponentPropsWithRef<'div'> {
-	/**
-	 * Whether the workspace should fill its parent height (`100%`) instead of the viewport (`100vh`).
-	 * @default false
-	 */
-	fillParent?: boolean;
-}
-
-export type DsWorkspaceHeaderProps = ComponentPropsWithRef<'header'>;
-
-export type DsWorkspaceSubHeaderProps = ComponentPropsWithRef<'div'>;
-
-export type DsWorkspaceContentProps = ComponentPropsWithRef<'div'>;
-
-export type DsWorkspaceFooterProps = ComponentPropsWithRef<'footer'>;

package/src/components/ds-workspace/index.ts

@@ -1,8 +0,0 @@
-export { default as DsWorkspace } from './ds-workspace';
-export type {
-	DsWorkspaceProps,
-	DsWorkspaceHeaderProps,
-	DsWorkspaceSubHeaderProps,
-	DsWorkspaceContentProps,
-	DsWorkspaceFooterProps,
-} from './ds-workspace.types';