@dbcdk/react-components 0.0.102 → 0.0.104

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.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,106 @@
+.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);
+}
+
+.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;
+  transition: 0.15s ease-in-out;
+}
+
+.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.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;
+}

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs

@@ -0,0 +1,97 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var Button = require('../../../button/Button');
+var Menu = require('../../../menu/Menu');
+var Popover = require('../../../popover/Popover');
+var SearchBox = require('../../../search-box/SearchBox');
+var SidebarProvider = require('../../providers/SidebarProvider');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const SidenavFiltering = ({
+  placeholder = "Filtrer menu",
+  showSettings = false
+}) => {
+  const {
+    activeQuery,
+    setActiveQuery,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    wrapItemText,
+    setWrapItemText
+  } = SidebarProvider.useSidebar();
+  const searchBoxRef = React__default.default.useRef(null);
+  const handleSearch = (value) => {
+    setActiveQuery == null ? void 0 : setActiveQuery(value);
+  };
+  if (isSidebarCollapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        fullWidth: true,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
+        size: "sm",
+        variant: "inline",
+        onClick: () => {
+          handleSidebarCollapseChange(false);
+          setTimeout(() => {
+            var _a;
+            (_a = searchBoxRef.current) == null ? void 0 : _a.focus();
+          }, 50);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "stretch", gap: "var(--spacing-xs)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SearchBox.SearchBox,
+      {
+        ref: searchBoxRef,
+        inputWidth: "100%",
+        inputSize: "sm",
+        value: activeQuery != null ? activeQuery : "",
+        onSearch: handleSearch,
+        placeholder,
+        fullWidth: true
+      }
+    ),
+    showSettings ? /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        minWidth: "220px",
+        trigger: (toggle) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outlined",
+            shape: "round",
+            "aria-label": "\xC5bn indstillinger for sidemenu",
+            onClick: toggle,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {})
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setWrapItemText(!wrapItemText);
+              close();
+            },
+            children: "Ombryd tekst"
+          }
+        ) }) })
+      }
+    ) : null
+  ] });
+};
+var SidenavFiltering_default = SidenavFiltering;
+
+module.exports = SidenavFiltering_default;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Search, Settings2 } from 'lucide-react';
+import React from 'react';
+import { Button } from '../../../button/Button';
+import { Menu } from '../../../menu/Menu';
+import { Popover } from '../../../popover/Popover';
+import { SearchBox } from '../../../search-box/SearchBox';
+import { useSidebar } from '../../providers/SidebarProvider';
+
+const SidenavFiltering = ({
+  placeholder = "Filtrer menu",
+  showSettings = false
+}) => {
+  const {
+    activeQuery,
+    setActiveQuery,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    wrapItemText,
+    setWrapItemText
+  } = useSidebar();
+  const searchBoxRef = React.useRef(null);
+  const handleSearch = (value) => {
+    setActiveQuery == null ? void 0 : setActiveQuery(value);
+  };
+  if (isSidebarCollapsed) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        icon: /* @__PURE__ */ jsx(Search, {}),
+        size: "sm",
+        variant: "inline",
+        onClick: () => {
+          handleSidebarCollapseChange(false);
+          setTimeout(() => {
+            var _a;
+            (_a = searchBoxRef.current) == null ? void 0 : _a.focus();
+          }, 50);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "stretch", gap: "var(--spacing-xs)" }, children: [
+    /* @__PURE__ */ jsx(
+      SearchBox,
+      {
+        ref: searchBoxRef,
+        inputWidth: "100%",
+        inputSize: "sm",
+        value: activeQuery != null ? activeQuery : "",
+        onSearch: handleSearch,
+        placeholder,
+        fullWidth: true
+      }
+    ),
+    showSettings ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        minWidth: "220px",
+        trigger: (toggle) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outlined",
+            shape: "round",
+            "aria-label": "\xC5bn indstillinger for sidemenu",
+            onClick: toggle,
+            icon: /* @__PURE__ */ jsx(Settings2, {})
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setWrapItemText(!wrapItemText);
+              close();
+            },
+            children: "Ombryd tekst"
+          }
+        ) }) })
+      }
+    ) : null
+  ] });
+};
+var SidenavFiltering_default = SidenavFiltering;
+
+export { SidenavFiltering_default as default };