@drivenets/design-system 0.12.1 → 0.14.0

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

@@ -0,0 +1,166 @@
+.root {
+	--ds-workspace-layout-header-height: 54px;
+	--ds-workspace-layout-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%
+	);
+	--ds-workspace-layout-side-menu-collapsed-width: 60px;
+	--ds-workspace-layout-side-menu-expanded-width: 256px;
+	--ds-workspace-layout-side-menu-padding-top: 28px;
+	--ds-workspace-layout-side-menu-padding-x: 10px;
+	--ds-workspace-layout-content-margin-y: var(--lg);
+	--ds-workspace-layout-content-gap: var(--standard);
+	--ds-workspace-layout-content-margin-x: 40px;
+	--ds-workspace-layout-content-margin-x-with-left-panel: var(--lg);
+
+	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-layout-header-height);
+	padding: 0 var(--sm) 0 var(--lg);
+	background: var(--ds-workspace-layout-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 {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--ds-workspace-layout-content-gap);
+	min-width: 0;
+	min-height: 0;
+	position: relative;
+	padding: var(--ds-workspace-layout-content-margin-y) var(--ds-workspace-layout-content-margin-x);
+	overflow: auto;
+}
+
+.contentWithLeftPanel {
+	padding-inline: var(--ds-workspace-layout-content-margin-x-with-left-panel);
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	padding: var(--xs) var(--standard);
+	border-top: 1px solid var(--border);
+	background: var(--background);
+}
+
+.body {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.sideMenu {
+	position: relative;
+	flex-shrink: 0;
+	min-width: 0;
+	height: 100%;
+	width: var(--ds-workspace-layout-side-menu-collapsed-width);
+	z-index: 100;
+
+	&[data-pinned] {
+		width: var(--ds-workspace-layout-side-menu-expanded-width);
+	}
+}
+
+.sideMenuPanel {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: var(--xs);
+	height: 100%;
+	width: var(--ds-workspace-layout-side-menu-collapsed-width);
+	padding: var(--ds-workspace-layout-side-menu-padding-top) var(--ds-workspace-layout-side-menu-padding-x) 0;
+	overflow: hidden;
+	border-inline-end: 1px solid var(--border);
+	background: var(--background);
+	transition: width 0.2s;
+}
+
+.sideMenu[data-expanded] .sideMenuPanel {
+	width: var(--ds-workspace-layout-side-menu-expanded-width);
+}
+
+.sideMenu[data-expanded]:not([data-pinned]) .sideMenuPanel {
+	box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
+}
+
+.sideMenuPinButton {
+	position: absolute;
+	top: var(--xs);
+	inset-inline-end: var(--xs);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	padding: 0;
+	border: none;
+	border-radius: var(--3xs);
+	background: transparent;
+	cursor: pointer;
+	color: var(--font-secondary);
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity 0.2s,
+		visibility 0.2s,
+		background-color 0.2s,
+		color 0.2s;
+
+	&:hover {
+		background: var(--background-action-tertiary-hover);
+		color: var(--font-action);
+	}
+
+	&[aria-pressed='true'] {
+		color: var(--font-action);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--background-action);
+		outline-offset: 2px;
+	}
+}
+
+.sideMenu[data-expanded] .sideMenuPinButton {
+	opacity: 1;
+	visibility: visible;
+}
+
+.leftPanel {
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: column;
+	min-height: 0;
+	height: 100%;
+}

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

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import styles from './ds-workspace-layout.module.scss';
+import { DsWorkspaceLayoutContext, useDsWorkspaceLayoutContext } from './ds-workspace-layout.context';
+import { DsIcon } from '../ds-icon';
+import type {
+	DsWorkspaceLayoutProps,
+	DsWorkspaceLayoutHeaderProps,
+	DsWorkspaceLayoutSubHeaderProps,
+	DsWorkspaceLayoutContentProps,
+	DsWorkspaceLayoutFooterProps,
+	DsWorkspaceLayoutBodyProps,
+	DsWorkspaceLayoutSideMenuProps,
+	DsWorkspaceLayoutLeftPanelProps,
+} from './ds-workspace-layout.types';
+
+const DEFAULT_LOCALE = Object.freeze({
+	pinButtonLabel: 'Pin side menu',
+	unpinButtonLabel: 'Unpin side menu',
+});
+
+const DsWorkspaceLayout = ({ className, fillParent = false, ...rest }: DsWorkspaceLayoutProps) => {
+	const [hasLeftSidePanel, setHasLeftSidePanel] = useState(false);
+
+	const registerLeftSidePanel = useCallback(() => setHasLeftSidePanel(true), []);
+	const unregisterLeftSidePanel = useCallback(() => setHasLeftSidePanel(false), []);
+
+	const contextValue = useMemo(
+		() => ({ hasLeftSidePanel, registerLeftSidePanel, unregisterLeftSidePanel }),
+		[hasLeftSidePanel, registerLeftSidePanel, unregisterLeftSidePanel],
+	);
+
+	return (
+		<DsWorkspaceLayoutContext.Provider value={contextValue}>
+			<div {...rest} className={classNames(styles.root, { [styles.fillParent]: fillParent }, className)} />
+		</DsWorkspaceLayoutContext.Provider>
+	);
+};
+
+const Header = ({ className, ...rest }: DsWorkspaceLayoutHeaderProps) => (
+	<header {...rest} className={classNames(styles.header, className)} />
+);
+
+const SubHeader = ({ className, ...rest }: DsWorkspaceLayoutSubHeaderProps) => (
+	<div {...rest} className={classNames(styles.subHeader, className)} />
+);
+
+/** Content area: column layout, 24px vertical margins, 16px gap, 40px horizontal margins (24px when LeftPanel is mounted). */
+const Content = ({ className, ...rest }: DsWorkspaceLayoutContentProps) => {
+	const { hasLeftSidePanel } = useDsWorkspaceLayoutContext();
+
+	return (
+		<div
+			{...rest}
+			className={classNames(styles.content, { [styles.contentWithLeftPanel]: hasLeftSidePanel }, className)}
+		/>
+	);
+};
+
+const Footer = ({ className, ...rest }: DsWorkspaceLayoutFooterProps) => (
+	<footer {...rest} className={classNames(styles.footer, className)} />
+);
+
+const Body = ({ className, ...rest }: DsWorkspaceLayoutBodyProps) => {
+	useDsWorkspaceLayoutContext();
+
+	return <div {...rest} className={classNames(styles.body, className)} />;
+};
+
+const SideMenu = ({
+	className,
+	pinned = false,
+	onPinnedChange,
+	locale,
+	children,
+	...rest
+}: DsWorkspaceLayoutSideMenuProps) => {
+	useDsWorkspaceLayoutContext();
+	const [isHovering, setIsHovering] = useState(false);
+
+	const isExpanded = pinned || isHovering;
+	const ariaLabel = pinned
+		? (locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel)
+		: (locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel);
+
+	return (
+		<aside
+			{...rest}
+			className={classNames(styles.sideMenu, className)}
+			{...(pinned ? { 'data-pinned': '' } : {})}
+			{...(isExpanded ? { 'data-expanded': '' } : {})}
+		>
+			<div
+				className={styles.sideMenuPanel}
+				onMouseEnter={() => setIsHovering(true)}
+				onMouseLeave={() => setIsHovering(false)}
+			>
+				{onPinnedChange ? (
+					<button
+						type="button"
+						className={styles.sideMenuPinButton}
+						onClick={() => onPinnedChange(!pinned)}
+						aria-label={ariaLabel}
+						aria-pressed={pinned}
+					>
+						<DsIcon icon="keep" size="small" filled={pinned} />
+					</button>
+				) : null}
+				{children}
+			</div>
+		</aside>
+	);
+};
+
+const LeftPanel = ({ className, ...rest }: DsWorkspaceLayoutLeftPanelProps) => {
+	const { registerLeftSidePanel, unregisterLeftSidePanel } = useDsWorkspaceLayoutContext();
+
+	useEffect(() => {
+		registerLeftSidePanel();
+
+		return unregisterLeftSidePanel;
+	}, [registerLeftSidePanel, unregisterLeftSidePanel]);
+
+	return <aside {...rest} className={classNames(styles.leftPanel, className)} />;
+};
+
+DsWorkspaceLayout.Header = Header;
+DsWorkspaceLayout.SubHeader = SubHeader;
+DsWorkspaceLayout.Content = Content;
+DsWorkspaceLayout.Footer = Footer;
+DsWorkspaceLayout.Body = Body;
+DsWorkspaceLayout.SideMenu = SideMenu;
+DsWorkspaceLayout.LeftPanel = LeftPanel;
+
+export default DsWorkspaceLayout;

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/_root_new.scss

@@ -264,6 +264,7 @@
 	--background-secondary-hover: var(--color-dap-blue-050);
 	--background-secondary-selected-weak: var(--color-dap-gray-100);
 	--background-success: var(--color-dap-green-075);
+	--background-success-medium: var(--color-dap-green-500);
 	--background-success-strong: var(--color-dap-green-600);
 	--background-success-strong-hover: var(--color-dap-green-700);
 	--background-tertiary: var(--color-dap-gray-200);
@@ -327,6 +328,7 @@
 	--icon-secondary: var(--color-dap-gray-600);
 	--icon-success: var(--color-dap-green-700);
 	--icon-success-light: var(--color-dap-green-400);
+	--icon-tertiary: var(--color-dap-brand-200);
 	--icon-warning: var(--color-dap-orange-600);
 	--icon-warning-light: var(--color-dap-orange-400);
 	--light-buttons-primary: var(--color-dap-dark-blue-300);

package/src/styles/_scrollbars.scss

@@ -1,46 +1,60 @@
 $scrollbar-border-radius: 100px;
-$scrollbar-default-size: 12px;
-$scrollbar-thin-size: 4px;
+$scrollbar-default-size: 10px;
+$scrollbar-hover-size: 12px;
+$scrollbar-thin-size: 8px;
 
-@mixin scrollbar-base($size) {
+@mixin scrollbar-auto-hide($rest-size, $hover-size) {
 	&::-webkit-scrollbar {
-		width: $size;
-		height: $size;
-		background: var(--background-secondary);
+		width: $rest-size;
+		height: $rest-size;
+		background: transparent;
 	}
 
 	&::-webkit-scrollbar-track {
-		background: var(--background-secondary);
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--background-deselected-hover);
+		background-color: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius;
+		transition: background-color 0.2s;
 	}
 
-	&::-webkit-scrollbar-corner {
-		background: var(--background-secondary);
-	}
-}
+	&:hover {
+		&::-webkit-scrollbar {
+			width: $hover-size;
+			height: $hover-size;
+		}
 
-@mixin firefox-scrollbar($size) {
-	@-moz-document url-prefix() {
-		@if $size == $scrollbar-thin-size {
-			scrollbar-width: thin;
-		} @else {
-			scrollbar-width: auto;
+		&::-webkit-scrollbar-track {
+			background: var(--background-secondary);
 		}
 
+		&::-webkit-scrollbar-thumb {
+			background-color: var(--background-deselected-hover);
+		}
+	}
+
+	scrollbar-width: thin;
+	scrollbar-color: var(--background-tertiary) transparent;
+
+	&:hover {
 		scrollbar-color: var(--background-deselected-hover) var(--background-secondary);
 	}
 }
 
+@mixin scrollbar-on-hover {
+	@include scrollbar-auto-hide($scrollbar-default-size, $scrollbar-hover-size);
+}
+
 * {
-	@include scrollbar-base($scrollbar-default-size);
-	@include firefox-scrollbar($scrollbar-default-size);
+	@include scrollbar-auto-hide($scrollbar-default-size, $scrollbar-hover-size);
 }
 
 .scrollbar-thin {
-	@include scrollbar-base($scrollbar-thin-size);
-	@include firefox-scrollbar($scrollbar-thin-size);
+	@include scrollbar-auto-hide($scrollbar-thin-size, $scrollbar-thin-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';