@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -0,0 +1,293 @@
+.container {
+  position: relative;
+  flex-shrink: 1;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  width: var(--sidebar-width);
+  inline-size: var(--sidebar-width);
+  box-sizing: border-box;
+  border-inline-end: var(--border-width-thin) solid var(--color-border-default);
+  transition:
+    width var(--transition-fast) var(--ease-standard),
+    inline-size var(--transition-fast) var(--ease-standard);
+}
+
+.sidebarIcon {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: var(--color-fg-subtle);
+}
+.container.resizing {
+  transition: none;
+}
+
+/* Collapsed state */
+.container.collapsed {
+  width: var(--component-size-lg);
+  inline-size: var(--component-size-lg);
+  box-sizing: content-box;
+  gap: var(--spacing-sm);
+}
+
+/* Global links / focus */
+.container a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.container a:focus-visible,
+.container button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* HEADER (product + collapse) */
+.header {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  box-shadow: 0 1px 0 var(--color-border-default);
+  padding-inline: var(--spacing-xs);
+  min-block-size: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.productHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  flex-grow: 1;
+}
+
+/* Product logo + name group */
+.productGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Product logo container */
+.productLogo {
+  display: flex;
+  align-items: center;
+  max-inline-size: 100%;
+  block-size: 25px;
+  min-width: 0;
+}
+
+.productNameLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-default);
+  min-width: 0;
+}
+
+.productNameSquare {
+  inline-size: 7px;
+  block-size: 7px;
+  flex: 0 0 auto;
+  background-color: var(--color-logo);
+}
+
+.productNameLabel h1 {
+  font-size: var(--font-size-md);
+}
+
+/* Let wrapper elements such as Next.js <Link> inherit the logo sizing context */
+.productLogo > * {
+  display: flex;
+  align-items: center;
+  max-inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+}
+
+/* Keep product logo visible in expanded state even when wrapped */
+.productLogo :is(img, svg) {
+  display: block;
+  block-size: 100%;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+
+/* Collapse button */
+.productHeader button {
+  flex: 0 0 auto;
+}
+
+/* Rotate icon when collapsed */
+.collapsedIcon {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
+/* CONTENT */
+.content {
+  overflow: auto;
+  flex: 1 1 auto;
+  overflow-y: visible;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  gap: 5px;
+}
+
+.container:not(.collapsed) .content {
+  gap: var(--spacing-md);
+}
+
+/* FILTER */
+.filter > button {
+  border-radius: 0;
+  min-height: var(--component-size-md);
+  width: 100%;
+  padding: var(--spacing-xs);
+  color: var(--color-fg-muted);
+}
+
+.container:not(.collapsed) .filter {
+  padding-inline: var(--spacing-xs);
+}
+
+/* LINKS */
+.links {
+  overflow: auto;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: 2px;
+  font-size: var(--font-size-sm);
+}
+
+.container:not(.collapsed) .links {
+  padding-inline: var(--spacing-xs);
+}
+
+.container .links button {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+  display: inline-flex;
+  padding: 0;
+}
+
+/* RESIZE HANDLE */
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 1;
+  user-select: none;
+  touch-action: none;
+  outline: none;
+}
+
+.resizeHandle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--border-width-thin);
+  background-color: var(--color-border-subtle);
+  opacity: 0;
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+.resizeHandle:hover::after,
+.resizeHandle:active::after {
+  opacity: 1;
+  background-color: var(--color-border-strong);
+}
+
+.resizeHandle:active::after {
+  background-color: var(--color-brand);
+}
+
+.resizeHandle:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
+.container.collapsed .resizeHandle {
+  display: none;
+}
+
+/* CUSTOM FOOTER SLOT */
+.footerSlot {
+  flex: 0 0 auto;
+}
+
+.container:not(.collapsed) .footerSlot {
+  padding-inline: var(--spacing-xs);
+}
+
+/* FOOTER (company logo) */
+.footer {
+  flex: 0 0 auto;
+  border-top: 1px solid var(--color-border-default);
+  padding: var(--spacing-sm);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.companyLogo {
+  opacity: 0.6;
+}
+
+.companyLogo svg {
+  width: 80px;
+  height: auto;
+  display: block;
+}
+
+/* Hide company logo in collapsed state */
+.container.collapsed .companyLogo {
+  display: none;
+}
+
+.version {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.logo {
+  display: none;
+}
+
+/* === Collapsed header behavior ===
+   Hide product logo + name entirely so the collapse button can truly center. */
+.container.collapsed .productGroup {
+  display: none;
+}
+
+/* Center the collapse button in collapsed state */
+.container.collapsed .productHeader {
+  justify-content: center;
+  gap: 0;
+}
+
+.container.collapsed .header {
+  padding: 0;
+}
+
+.container.collapsed .productHeader button {
+  margin-inline: auto;
+}

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -0,0 +1,54 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var getHighlightedSegments = require('../../../../utils/text/get-highlighted-segments');
+var styles = require('./SidebarItemContent.module.css');
+var SidebarProvider = require('../../providers/SidebarProvider');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SidebarItemContent({
+  icon,
+  label,
+  suffixIcon,
+  href,
+  iconWidth,
+  disableActiveStyles = false,
+  headerStyle,
+  truncateLabel = false
+}) {
+  const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = SidebarProvider.useSidebar();
+  const iconStyle = iconWidth !== void 0 ? { ["--sidebar-item-icon-width"]: iconWidth } : void 0;
+  const shouldTruncate = truncateLabel && !wrapItemText && !activeQuery;
+  const highlightTerms = activeQuery.trim().split(/\s+/).filter(Boolean);
+  const renderedLabel = typeof label === "string" && highlightTerms.length > 0 ? getHighlightedSegments.getHighlightedSegments(label, highlightTerms).map(
+    (segment, index) => segment.matched ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: segment.text }, `${segment.text}-${index}`)
+  ) : label;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `${styles__default.default.container} ${!disableActiveStyles && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${headerStyle ? styles__default.default.headerStyle : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.iconLabel, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, style: iconStyle, children: icon }),
+          !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `${styles__default.default.label} ${shouldTruncate ? styles__default.default.truncate : ""}`,
+              title: shouldTruncate && typeof label === "string" ? label : void 0,
+              children: renderedLabel
+            }
+          )
+        ] }),
+        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
+      ]
+    }
+  );
+}
+
+exports.SidebarItemContent = SidebarItemContent;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { JSX } from 'react';
+export interface SidebarItemContentProps {
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    href?: string;
+    iconWidth?: string | number;
+    disableActiveStyles?: boolean;
+    headerStyle?: boolean;
+    truncateLabel?: boolean;
+}
+export declare function SidebarItemContent({ icon, label, suffixIcon, href, iconWidth, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { getHighlightedSegments } from '../../../../utils/text/get-highlighted-segments';
+import styles from './SidebarItemContent.module.css';
+import { useSidebar } from '../../providers/SidebarProvider';
+
+function SidebarItemContent({
+  icon,
+  label,
+  suffixIcon,
+  href,
+  iconWidth,
+  disableActiveStyles = false,
+  headerStyle,
+  truncateLabel = false
+}) {
+  const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = useSidebar();
+  const iconStyle = iconWidth !== void 0 ? { ["--sidebar-item-icon-width"]: iconWidth } : void 0;
+  const shouldTruncate = truncateLabel && !wrapItemText && !activeQuery;
+  const highlightTerms = activeQuery.trim().split(/\s+/).filter(Boolean);
+  const renderedLabel = typeof label === "string" && highlightTerms.length > 0 ? getHighlightedSegments(label, highlightTerms).map(
+    (segment, index) => segment.matched ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`)
+  ) : label;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""} ${headerStyle ? styles.headerStyle : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.iconLabel, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.icon, style: iconStyle, children: icon }),
+          !isSidebarCollapsed && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${styles.label} ${shouldTruncate ? styles.truncate : ""}`,
+              title: shouldTruncate && typeof label === "string" ? label : void 0,
+              children: renderedLabel
+            }
+          )
+        ] }),
+        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
+      ]
+    }
+  );
+}
+
+export { SidebarItemContent };

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -0,0 +1,117 @@
+.container {
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-xs);
+  text-decoration: none;
+  color: var(--color-fg-muted);
+  cursor: pointer;
+  position: relative;
+  border-radius: var(--border-radius-md);
+  user-select: none;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+
+.container.collapsed {
+  justify-content: center;
+  padding: var(--spacing-xs);
+  border-radius: 0;
+}
+
+.active {
+  background: var(--color-bg-selected);
+}
+
+.active::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block: 0;
+  inline-size: 3px;
+  background-color: var(--color-brand);
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+}
+
+.iconLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-inline-size: 0;
+  flex: 1 1 0;
+  overflow: hidden;
+}
+
+.container:not(.active):hover {
+  background-color: var(--color-bg-toolbar-hover);
+
+  color: var(--color-fg-default);
+}
+
+.container:not(.active):hover .icon,
+.container:not(.active):hover .suffixIcon,
+.container:focus-visible .icon,
+.container:focus-visible .suffixIcon {
+  color: var(--color-fg-default);
+}
+
+.active .icon,
+.active .suffixIcon {
+  color: var(--color-fg-default);
+}
+
+.icon,
+.suffixIcon {
+  inline-size: var(--sidebar-item-icon-width, auto);
+  min-inline-size: var(--icon-size-sm);
+  flex: 0 0 var(--sidebar-item-icon-width, auto);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--color-fg-subtle);
+}
+
+.icon {
+  min-inline-size: var(--sidebar-item-icon-width, var(--icon-size-sm));
+}
+
+.icon svg,
+.suffixIcon svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: inherit;
+}
+
+.collapsed svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+}
+
+.container:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.headerStyle .label {
+  font-weight: 500;
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.label {
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -0,0 +1,61 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./SidebarItems.module.css');
+var SidebarProvider = require('../../providers/SidebarProvider');
+var ExpandableSidebarItem = require('../expandable-sidebar-item/ExpandableSidebarItem');
+var SidebarItem = require('../SidebarItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SidebarItems({ activeLink }) {
+  const { filteredItems, setActiveLink, isSidebarCollapsed } = SidebarProvider.useSidebar();
+  react.useEffect(() => {
+    setActiveLink(activeLink != null ? activeLink : "");
+  }, [activeLink, setActiveLink]);
+  const renderItem = (item, key) => {
+    var _a, _b;
+    if (item.type === "group") {
+      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`)) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.group, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.groupLabel, children: item.label }),
+        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))
+      ] }, key);
+    }
+    if (item.type === "expandable") {
+      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ExpandableSidebarItem.ExpandableSidebarItem,
+        {
+          items: children,
+          label: label2,
+          icon: icon2,
+          href: href2,
+          iconWidth: iconWidth2,
+          truncateLabel: truncateLabel2,
+          component: Component2
+        },
+        key
+      );
+    }
+    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarItem.SidebarItem,
+      {
+        component: Component,
+        label,
+        icon,
+        href,
+        iconWidth,
+        truncateLabel
+      },
+      key
+    );
+  };
+  return filteredItems == null ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
+}
+
+exports.SidebarItems = SidebarItems;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function SidebarItems({ activeLink }: {
+    activeLink?: string;
+}): React.ReactNode;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import styles from './SidebarItems.module.css';
+import { useSidebar } from '../../providers/SidebarProvider';
+import { ExpandableSidebarItem } from '../expandable-sidebar-item/ExpandableSidebarItem';
+import { SidebarItem } from '../SidebarItem';
+
+function SidebarItems({ activeLink }) {
+  const { filteredItems, setActiveLink, isSidebarCollapsed } = useSidebar();
+  useEffect(() => {
+    setActiveLink(activeLink != null ? activeLink : "");
+  }, [activeLink, setActiveLink]);
+  const renderItem = (item, key) => {
+    var _a, _b;
+    if (item.type === "group") {
+      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`)) : /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.groupLabel, children: item.label }),
+        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))
+      ] }, key);
+    }
+    if (item.type === "expandable") {
+      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
+      return /* @__PURE__ */ jsx(
+        ExpandableSidebarItem,
+        {
+          items: children,
+          label: label2,
+          icon: icon2,
+          href: href2,
+          iconWidth: iconWidth2,
+          truncateLabel: truncateLabel2,
+          component: Component2
+        },
+        key
+      );
+    }
+    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
+    return /* @__PURE__ */ jsx(
+      SidebarItem,
+      {
+        component: Component,
+        label,
+        icon,
+        href,
+        iconWidth,
+        truncateLabel
+      },
+      key
+    );
+  };
+  return filteredItems == null ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
+}
+
+export { SidebarItems };

package/dist/components/sidebar/components/sidebar-items/SidebarItems.module.css

@@ -0,0 +1,20 @@
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+  margin-top: var(--spacing-xs);
+}
+
+.group:first-child {
+  margin-top: 0;
+}
+
+.groupLabel {
+  padding: 0 var(--spacing-xs);
+  margin: var(--spacing-xs) 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-subtle);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}