@drivenets/design-system 0.12.0 → 0.12.1

package/dist/index.js

@@ -3195,7 +3195,7 @@ const Title$2 = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
-const Body$3 = (t0) => {
+const Body$4 = (t0) => {
 	const $ = c(6);
 	const { style, className, children } = t0;
 	let t1;
@@ -3243,7 +3243,7 @@ const Actions$3 = (t0) => {
 	return t2;
 };
 DsAlertBanner.Title = Title$2;
-DsAlertBanner.Body = Body$3;
+DsAlertBanner.Body = Body$4;
 DsAlertBanner.Actions = Actions$3;
 //#endregion
 //#region src/components/ds-alert-banner/ds-alert-banner.types.ts
@@ -4052,7 +4052,7 @@ const Trigger = Menu.Trigger;
 /**
 * Content component - wraps the dropdown content
 */
-const Content$1 = (t0) => {
+const Content$2 = (t0) => {
 	const $ = c(9);
 	const { disablePortal: t1, children, className, style } = t0;
 	const Wrapper = (t1 === void 0 ? false : t1) ? Fragment$1 : Portal;
@@ -4157,7 +4157,7 @@ const ItemIndicator = (t0) => {
 /**
 * Header component - sticky header container for search, filters, or other controls
 */
-const Header$4 = (t0) => {
+const Header$5 = (t0) => {
 	const $ = c(6);
 	const { children, className, style } = t0;
 	let t1;
@@ -4633,11 +4633,11 @@ const DsDropdownMenuLegacy = (t0) => {
 const DsDropdownMenu = {
 	Root: Root$4,
 	Trigger,
-	Content: Content$1,
+	Content: Content$2,
 	Item: Item$2,
 	ItemIndicator,
 	TriggerItem,
-	Header: Header$4,
+	Header: Header$5,
 	Actions: Actions$2,
 	ItemGroup,
 	ItemGroupLabel,
@@ -5475,7 +5475,7 @@ const Root$3 = (t0) => {
 * Use with DsCard.Title and DsCard.Extra for standard layout,
 * or provide custom children for full flexibility.
 */
-const Header$3 = (t0) => {
+const Header$4 = (t0) => {
 	const $ = c(12);
 	let children;
 	let className;
@@ -5519,7 +5519,7 @@ const Header$3 = (t0) => {
 /**
 * Card body - main content area.
 */
-const Body$2 = (t0) => {
+const Body$3 = (t0) => {
 	const $ = c(12);
 	let children;
 	let className;
@@ -5606,8 +5606,8 @@ const Footer$3 = (t0) => {
 };
 const DsCard = {
 	Root: Root$3,
-	Header: Header$3,
-	Body: Body$2,
+	Header: Header$4,
+	Body: Body$3,
 	Footer: Footer$3
 };
 //#endregion
@@ -5618,6 +5618,413 @@ const cardSizes = [
 	"large"
 ];
 //#endregion
+//#region src/components/ds-catalog-layout/ds-catalog-layout.module.scss
+var ds_catalog_layout_module_default = {
+	"body": "ub6JXq_body",
+	"content": "ub6JXq_content",
+	"contentHeader": "ub6JXq_contentHeader",
+	"contentHeaderActions": "ub6JXq_contentHeaderActions",
+	"contentHeaderItem": "ub6JXq_contentHeaderItem",
+	"contentHeaderTitle": "ub6JXq_contentHeaderTitle",
+	"contentHeaderTitleRow": "ub6JXq_contentHeaderTitleRow",
+	"contentWithSideMenu": "ub6JXq_contentWithSideMenu",
+	"fillParent": "ub6JXq_fillParent",
+	"header": "ub6JXq_header",
+	"root": "ub6JXq_root",
+	"sideMenu": "ub6JXq_sideMenu",
+	"sideMenuPanel": "ub6JXq_sideMenuPanel",
+	"sideMenuPinButton": "ub6JXq_sideMenuPinButton"
+};
+//#endregion
+//#region src/components/ds-catalog-layout/ds-catalog-layout.context.ts
+const DsCatalogLayoutContext = createContext(null);
+const useDsCatalogLayoutContext = () => {
+	const context = useContext(DsCatalogLayoutContext);
+	if (!context) throw new Error("DsCatalogLayout compound components must be used within DsCatalogLayout");
+	return context;
+};
+//#endregion
+//#region src/components/ds-catalog-layout/ds-catalog-layout.tsx
+const DEFAULT_LOCALE = Object.freeze({
+	pinButtonLabel: "Pin side menu",
+	unpinButtonLabel: "Unpin side menu"
+});
+const DsCatalogLayout = (t0) => {
+	const $ = c(17);
+	let className;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({className, fillParent: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		rest = $[2];
+		t1 = $[3];
+	}
+	const fillParent = t1 === void 0 ? false : t1;
+	const [hasSideMenu, setHasSideMenu] = useState(false);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => setHasSideMenu(true);
+		$[4] = t2;
+	} else t2 = $[4];
+	const registerSideMenu = t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => setHasSideMenu(false);
+		$[5] = t3;
+	} else t3 = $[5];
+	const unregisterSideMenu = t3;
+	let t4;
+	if ($[6] !== hasSideMenu) {
+		t4 = {
+			hasSideMenu,
+			registerSideMenu,
+			unregisterSideMenu
+		};
+		$[6] = hasSideMenu;
+		$[7] = t4;
+	} else t4 = $[7];
+	const contextValue = t4;
+	let t5;
+	if ($[8] !== className || $[9] !== fillParent) {
+		t5 = classNames(ds_catalog_layout_module_default.root, { [ds_catalog_layout_module_default.fillParent]: fillParent }, className);
+		$[8] = className;
+		$[9] = fillParent;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== rest || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: t5
+		});
+		$[11] = rest;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== contextValue || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(DsCatalogLayoutContext.Provider, {
+			value: contextValue,
+			children: t6
+		});
+		$[14] = contextValue;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+};
+const Header$3 = (t0) => {
+	const $ = c(8);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = classNames(ds_catalog_layout_module_default.header, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("header", {
+			...rest,
+			className: t1
+		});
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+const Body$2 = (t0) => {
+	const $ = c(8);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = classNames(ds_catalog_layout_module_default.body, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: t1
+		});
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+const SideMenu = (t0) => {
+	const $ = c(32);
+	let children;
+	let className;
+	let locale;
+	let onPinnedChange;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({className, pinned: t1, onPinnedChange, locale, children, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = locale;
+		$[4] = onPinnedChange;
+		$[5] = rest;
+		$[6] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		locale = $[3];
+		onPinnedChange = $[4];
+		rest = $[5];
+		t1 = $[6];
+	}
+	const pinned = t1 === void 0 ? false : t1;
+	const { registerSideMenu, unregisterSideMenu } = useDsCatalogLayoutContext();
+	const [isHovering, setIsHovering] = useState(false);
+	let t2;
+	let t3;
+	if ($[7] !== registerSideMenu || $[8] !== unregisterSideMenu) {
+		t2 = () => {
+			registerSideMenu();
+			return unregisterSideMenu;
+		};
+		t3 = [registerSideMenu, unregisterSideMenu];
+		$[7] = registerSideMenu;
+		$[8] = unregisterSideMenu;
+		$[9] = t2;
+		$[10] = t3;
+	} else {
+		t2 = $[9];
+		t3 = $[10];
+	}
+	useEffect(t2, t3);
+	const isExpanded = pinned || isHovering;
+	const ariaLabel = pinned ? locale?.unpinButtonLabel ?? DEFAULT_LOCALE.unpinButtonLabel : locale?.pinButtonLabel ?? DEFAULT_LOCALE.pinButtonLabel;
+	let t4;
+	if ($[11] !== className) {
+		t4 = classNames(ds_catalog_layout_module_default.sideMenu, className);
+		$[11] = className;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== pinned) {
+		t5 = pinned ? { "data-pinned": "" } : {};
+		$[13] = pinned;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== isExpanded) {
+		t6 = isExpanded ? { "data-expanded": "" } : {};
+		$[15] = isExpanded;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => setIsHovering(true);
+		t8 = () => setIsHovering(false);
+		$[17] = t7;
+		$[18] = t8;
+	} else {
+		t7 = $[17];
+		t8 = $[18];
+	}
+	let t9;
+	if ($[19] !== ariaLabel || $[20] !== onPinnedChange || $[21] !== pinned) {
+		t9 = onPinnedChange ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: ds_catalog_layout_module_default.sideMenuPinButton,
+			onClick: () => onPinnedChange(!pinned),
+			"aria-label": ariaLabel,
+			"aria-pressed": pinned,
+			children: /* @__PURE__ */ jsx(DsIcon, {
+				icon: "keep",
+				size: "small",
+				filled: pinned
+			})
+		}) : null;
+		$[19] = ariaLabel;
+		$[20] = onPinnedChange;
+		$[21] = pinned;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== children || $[24] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: ds_catalog_layout_module_default.sideMenuPanel,
+			onMouseEnter: t7,
+			onMouseLeave: t8,
+			children: [t9, children]
+		});
+		$[23] = children;
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== rest || $[27] !== t10 || $[28] !== t4 || $[29] !== t5 || $[30] !== t6) {
+		t11 = /* @__PURE__ */ jsx("aside", {
+			...rest,
+			className: t4,
+			...t5,
+			...t6,
+			children: t10
+		});
+		$[26] = rest;
+		$[27] = t10;
+		$[28] = t4;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t11;
+	} else t11 = $[31];
+	return t11;
+};
+const Content$1 = (t0) => {
+	const $ = c(9);
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = rest;
+	} else {
+		className = $[1];
+		rest = $[2];
+	}
+	const { hasSideMenu } = useDsCatalogLayoutContext();
+	let t1;
+	if ($[3] !== className || $[4] !== hasSideMenu) {
+		t1 = classNames(ds_catalog_layout_module_default.content, { [ds_catalog_layout_module_default.contentWithSideMenu]: hasSideMenu }, className);
+		$[3] = className;
+		$[4] = hasSideMenu;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== rest || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: t1
+		});
+		$[6] = rest;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+};
+const ContentHeader = (t0) => {
+	const $ = c(22);
+	let children;
+	let className;
+	let headerActions;
+	let rest;
+	let title;
+	if ($[0] !== t0) {
+		({className, title, headerActions, children, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = headerActions;
+		$[4] = rest;
+		$[5] = title;
+	} else {
+		children = $[1];
+		className = $[2];
+		headerActions = $[3];
+		rest = $[4];
+		title = $[5];
+	}
+	let t1;
+	if ($[6] !== className) {
+		t1 = classNames(ds_catalog_layout_module_default.contentHeader, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== title) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: ds_catalog_layout_module_default.contentHeaderTitle,
+			children: title
+		});
+		$[8] = title;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== headerActions) {
+		t3 = headerActions ? /* @__PURE__ */ jsx("div", {
+			className: ds_catalog_layout_module_default.contentHeaderActions,
+			children: headerActions
+		}) : null;
+		$[10] = headerActions;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: ds_catalog_layout_module_default.contentHeaderTitleRow,
+			children: [t2, t3]
+		});
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== children) {
+		t5 = children ? /* @__PURE__ */ jsx("div", {
+			className: ds_catalog_layout_module_default.contentHeaderItem,
+			children
+		}) : null;
+		$[15] = children;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== rest || $[18] !== t1 || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			...rest,
+			className: t1,
+			children: [t4, t5]
+		});
+		$[17] = rest;
+		$[18] = t1;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+};
+DsCatalogLayout.Header = Header$3;
+DsCatalogLayout.Body = Body$2;
+DsCatalogLayout.SideMenu = SideMenu;
+DsCatalogLayout.Content = Content$1;
+DsCatalogLayout.ContentHeader = ContentHeader;
+//#endregion
 //#region src/components/ds-checkbox/ds-checkbox.module.scss
 var ds_checkbox_module_default = {
 	"control": "-9VV7a_control",
@@ -20171,6 +20578,6 @@ DsWorkspace.SubHeader = SubHeader;
 DsWorkspace.Content = Content;
 DsWorkspace.Footer = Footer;
 //#endregion
-export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspace, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
+export { BREAKPOINT_LG, DsAlertBanner, DsAutocomplete, DsAvatar, DsAvatarGroup, DsBreadcrumb, DsButton, DsButtonV3, DsCard, DsCatalogLayout, DsCheckbox, DsCheckboxGroup, DsChip, DsChipGroup, DsCommentBubble, DsCommentCard, DsCommentIndicator, DsCommentThread, DsCommentsDrawer, DsConfirmation, DsDateInput, DsDatePicker, DsDateRangePicker, DsDialog, DsDivider, DsDrawer, DsDropdownMenu, DsDropdownMenuLegacy, DsExpandableTextInput, DsFileUpload, DsFilterStatusIcon, DsFormControl, DsGrid, DsGridItem, DsIcon, DsKeyValuePair, DsLoader, DsModal, DsNextStepButton, DsNumberInput, DsPanel, DsPasswordInput, DsPopover, DsProgressArc, DsProgressDonut, DsProgressLinear, DsRadioGroup, DsRadioGroupLegacy, DsSegmentGroup, DsSelect, ds_skeleton_default as DsSkeleton, DsSkeletonCircle, DsSkeletonRect, DsSkeletonText, DsSmartTabs, DsSpinner, DsSplitButton, DsStack, DsStatusBadge, DsStatusBadgeV2, DsStep, DsStepContent, DsStepper, DsSystemStatus, DsTable, DsTabs, DsTag, DsTagFilter, DsTextInput, DsTextarea, DsThreadItem, DsTimePicker, DsToastProvider, DsToggle, DsTooltip, DsTree, DsTypography, DsVerticalTabs, DsWorkspace, FatalFileUploadError, FileUpload, FileUploadError, RetryableFileUploadError, alertBannerVariants, breakpoints, buttonV3Colors, buttonV3Sizes, buttonV3Variants, cardSizes, checkboxVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDsTreeCollection, createDualRangeFilterAdapter, createFilterAdapter, customIcons, dropdownMenuItemVariants, dsKeyValuePairOrientations, filterStatuses, formatTime, iconColors, iconSizes, iconVariants, isCustomIcon, isResponsiveValue, loaderVariants, progressArcSizes, progressArcVariants, progressDonutSizes, progressDonutVariants, progressLinearSizes, progressLinearVariants, resolveResponsiveValue, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, splitButtonSizes, statusBadgeV2Phases, statusBadgeV2Sizes, statusBadgeV2Variants, systemStatuses, tagSizes, tagVariants, textInputSizes, useBreakpoint, useCheckboxSelectAll, useFileUpload, useResponsiveValue, useTableFilters, useToaster, withResponsiveProps };
 
 //# sourceMappingURL=index.js.map