@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/select/Select.cjs

@@ -1,121 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var Menu = require('../menu/Menu');
-var Popover = require('../popover/Popover');
-var Button = require('../button/Button');
-var ClearButton = require('../clear-button/ClearButton');
-var react = require('react');
-
-function Select({
-  options,
-  selectedValue,
-  onChange,
-  placeholder = "V\xE6lg",
-  size,
-  variant = "outlined",
-  onClear,
-  fullWidth = false
-}) {
-  const popoverRef = react.useRef(null);
-  const optionRefs = react.useRef([]);
-  const selectedIndex = options.findIndex((o) => o.value === selectedValue);
-  const [activeIndex, setActiveIndex] = react.useState(selectedIndex >= 0 ? selectedIndex : 0);
-  react.useEffect(() => {
-    var _a;
-    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
-  }, [activeIndex]);
-  const handleKeyDown = (e) => {
-    var _a, _b;
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        setActiveIndex((i) => Math.max(i - 1, 0));
-        break;
-      }
-      case "Enter":
-      case " ": {
-        e.preventDefault();
-        const opt = options[activeIndex];
-        if (opt) {
-          onChange(opt.value);
-          (_a = popoverRef.current) == null ? void 0 : _a.close();
-        }
-        break;
-      }
-      case "Escape": {
-        e.preventDefault();
-        (_b = popoverRef.current) == null ? void 0 : _b.close();
-        break;
-      }
-    }
-  };
-  const selected = options.find((o) => o.value === selectedValue);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Popover,
-    {
-      ref: popoverRef,
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsx(
-        Button.Button,
-        {
-          onKeyDown: handleKeyDown,
-          fullWidth,
-          variant,
-          onClick: (e) => {
-            setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
-            onClick(e);
-          },
-          size,
-          type: "button",
-          children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
-              style: { width: "100%" },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : placeholder }),
-                onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
-                icon
-              ]
-            }
-          )
-        }
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { onKeyDown: handleKeyDown, children: options.map((opt, index) => {
-        const isSelected = opt.value === selectedValue;
-        const isActive = index === activeIndex;
-        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, "aria-selected": isSelected, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            ref: (el) => optionRefs.current[index] = el,
-            type: "button",
-            tabIndex: isActive ? 0 : -1,
-            onClick: () => {
-              var _a;
-              onChange(opt.value);
-              (_a = popoverRef.current) == null ? void 0 : _a.close();
-            },
-            onFocus: () => setActiveIndex(index),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
-              opt.label
-            ]
-          }
-        ) }, opt.value);
-      }) })
-    }
-  );
-}
-
-exports.Select = Select;

package/dist/components/select/Select.d.ts

@@ -1,12 +0,0 @@
-import { ButtonVariant } from '../button/Button';
-import { MultiselectOption } from '../filter-field/FilterField';
-export declare function Select({ options, selectedValue, onChange, placeholder, size, variant, onClear, fullWidth, }: {
-    options: MultiselectOption[];
-    selectedValue: string | null;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: ButtonVariant;
-    onClear?: () => void;
-    fullWidth?: boolean;
-}): React.ReactNode;

package/dist/components/select/Select.js

@@ -1,119 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Check } from 'lucide-react';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-import { Button } from '../button/Button';
-import { ClearButton } from '../clear-button/ClearButton';
-import { useRef, useState, useEffect } from 'react';
-
-function Select({
-  options,
-  selectedValue,
-  onChange,
-  placeholder = "V\xE6lg",
-  size,
-  variant = "outlined",
-  onClear,
-  fullWidth = false
-}) {
-  const popoverRef = useRef(null);
-  const optionRefs = useRef([]);
-  const selectedIndex = options.findIndex((o) => o.value === selectedValue);
-  const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
-  useEffect(() => {
-    var _a;
-    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
-  }, [activeIndex]);
-  const handleKeyDown = (e) => {
-    var _a, _b;
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
-        break;
-      }
-      case "ArrowUp": {
-        e.preventDefault();
-        setActiveIndex((i) => Math.max(i - 1, 0));
-        break;
-      }
-      case "Enter":
-      case " ": {
-        e.preventDefault();
-        const opt = options[activeIndex];
-        if (opt) {
-          onChange(opt.value);
-          (_a = popoverRef.current) == null ? void 0 : _a.close();
-        }
-        break;
-      }
-      case "Escape": {
-        e.preventDefault();
-        (_b = popoverRef.current) == null ? void 0 : _b.close();
-        break;
-      }
-    }
-  };
-  const selected = options.find((o) => o.value === selectedValue);
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      ref: popoverRef,
-      trigger: (onClick, icon) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          onKeyDown: handleKeyDown,
-          fullWidth,
-          variant,
-          onClick: (e) => {
-            setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
-            onClick(e);
-          },
-          size,
-          type: "button",
-          children: /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
-              style: { width: "100%" },
-              children: [
-                /* @__PURE__ */ jsx("span", { children: selected ? selected.label : placeholder }),
-                onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
-                icon
-              ]
-            }
-          )
-        }
-      ),
-      children: /* @__PURE__ */ jsx(Menu, { onKeyDown: handleKeyDown, children: options.map((opt, index) => {
-        const isSelected = opt.value === selectedValue;
-        const isActive = index === activeIndex;
-        return /* @__PURE__ */ jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: (el) => optionRefs.current[index] = el,
-            type: "button",
-            tabIndex: isActive ? 0 : -1,
-            onClick: () => {
-              var _a;
-              onChange(opt.value);
-              (_a = popoverRef.current) == null ? void 0 : _a.close();
-            },
-            onFocus: () => setActiveIndex(index),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
-              opt.label
-            ]
-          }
-        ) }, opt.value);
-      }) })
-    }
-  );
-}
-
-export { Select };

package/dist/components/sidebar/Sidebar.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SidebarProvider = require('./providers/SidebarProvider');
-var SidebarContainer = require('./components/sidebar-container/SidebarContainer');
-
-function Sidebar({ items, productLogo, activeLink }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarContainer.SidebarContainer, { productLogo, activeLink }) });
-}
-
-exports.Sidebar = Sidebar;

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SidebarItemContent = require('./sidebar-item-content/SidebarItemContent');
-
-function SidebarItem({
-  component: Component,
-  label,
-  icon,
-  href
-}) {
-  if (!Component) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItemContent.SidebarItemContent, { icon, label, href }) });
-}
-
-exports.SidebarItem = SidebarItem;

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -1,100 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var SidebarItemContent = require('../sidebar-item-content/SidebarItemContent');
-var lucideReact = require('lucide-react');
-var styles = require('./ExpandableSidebarItem.module.css');
-var SidebarProvider = require('../../providers/SidebarProvider');
-var SidebarItem = require('../SidebarItem');
-var Button = require('../../../button/Button');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function ExpandableSidebarItem({
-  items,
-  label,
-  icon,
-  component: Component,
-  href
-}) {
-  const {
-    defaultExpanded,
-    resetExpandAll,
-    isSidebarCollapsed,
-    handleSidebarCollapseChange,
-    expandedItems
-  } = SidebarProvider.useSidebar();
-  const [expanded, setExpanded] = react.useState(false);
-  const [closing, setClosing] = react.useState(false);
-  const [ready, setReady] = react.useState(false);
-  react.useEffect(() => {
-    setReady(true);
-  }, []);
-  react.useEffect(() => {
-    if (expandedItems.has(href)) {
-      setExpanded(true);
-    }
-  }, [expandedItems]);
-  react.useEffect(() => {
-    if (defaultExpanded === null) {
-      return;
-    }
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleAnimationEnd = react.useCallback(() => {
-    if (ready) {
-      setExpanded(!closing);
-      setClosing(false);
-    }
-  }, [closing, ready]);
-  const toggleAccordion = react.useCallback(
-    (e, onlyExpand = false) => {
-      e == null ? void 0 : e.preventDefault();
-      e == null ? void 0 : e.stopPropagation();
-      resetExpandAll();
-      handleSidebarCollapseChange == null ? void 0 : handleSidebarCollapseChange(false);
-      if (!expanded) {
-        setExpanded(true);
-        return;
-      }
-      if (!isSidebarCollapsed && !onlyExpand) {
-        setClosing(true);
-      }
-    },
-    [expanded]
-  );
-  if (!items) return null;
-  if (!Component) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${expanded ? styles__default.default.expanded : ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarItemContent.SidebarItemContent,
-      {
-        icon,
-        label,
-        href,
-        disableActiveStyles: expanded,
-        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.ChevronDown,
-          {
-            className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
-          }
-        ) })
-      }
-    ) }),
-    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
-        children: items.map(({ component: Component2, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component2, label: label2, icon: icon2, href: href2 }, id))
-      }
-    )
-  ] });
-}
-
-exports.ExpandableSidebarItem = ExpandableSidebarItem;

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs

@@ -1,50 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('../../../button/Button');
-var styles = require('./SidebarContainer.module.css');
-var logo = require('../../../../assets/logo');
-var Headline = require('../../../headline/Headline');
-var lucideReact = require('lucide-react');
-var SidebarItems = require('../sidebar-items/SidebarItems');
-var SidenavFiltering = require('../sidenav-filteirng/SidenavFiltering');
-var SidebarProvider = require('../../providers/SidebarProvider');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
-
-function SidebarContainer({
-  logo: logo$1,
-  productName,
-  productLogo,
-  activeLink
-}) {
-  const { isSidebarCollapsed, handleSidebarCollapseChange } = SidebarProvider.useSidebar();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${isSidebarCollapsed ? styles__default.default.collapsed : ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.logoContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: isSidebarCollapsed ? "center" : "right" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button.Button,
-          {
-            size: "sm",
-            variant: "inline",
-            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: isSidebarCollapsed ? styles__default.default.collapsedIcon : "" }),
-            onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.logo, children: logo$1 != null ? logo$1 : /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) })
-      ] }),
-      productName && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, children: productName }),
-      productLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.filter, children: /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.links} hideScrollBar`, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footer })
-  ] });
-}
-
-exports.SidebarContainer = SidebarContainer;

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

@@ -1,34 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./SidebarItemContent.module.css');
-var SidebarProvider = require('../../providers/SidebarProvider');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function SidebarItemContent({
-  icon,
-  label,
-  suffixIcon,
-  href,
-  disableActiveStyles = false
-}) {
-  const { activeLink, isSidebarCollapsed } = SidebarProvider.useSidebar();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: `${styles__default.default.container} ${!disableActiveStyles && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
-          !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
-        ] }),
-        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
-      ]
-    }
-  );
-}
-
-exports.SidebarItemContent = SidebarItemContent;

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

@@ -1,29 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var SidebarProvider = require('../../providers/SidebarProvider');
-var SidebarItem = require('../SidebarItem');
-var ExpandableSidebarItem = require('../expandable-sidebar-item/ExpandableSidebarItem');
-
-function SidebarItems({ activeLink }) {
-  const { filteredItems, setActiveLink } = SidebarProvider.useSidebar();
-  react.useEffect(() => {
-    setActiveLink(activeLink != null ? activeLink : "");
-  }, [activeLink, setActiveLink]);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredItems == null ? void 0 : filteredItems.map(
-    ({ component: Component, label, icon, children, href }, id) => (children == null ? void 0 : children.length) ? /* @__PURE__ */ jsxRuntime.jsx(
-      ExpandableSidebarItem.ExpandableSidebarItem,
-      {
-        items: children,
-        label,
-        icon,
-        href,
-        component: Component
-      },
-      label
-    ) : /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component, label, icon, href }, id)
-  ) });
-}
-
-exports.SidebarItems = SidebarItems;

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

@@ -1,52 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var SearchBox = require('../../../search-box/SearchBox');
-var SidebarProvider = require('../../providers/SidebarProvider');
-var Button = require('../../../button/Button');
-var lucideReact = require('lucide-react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const SidenavFiltering = () => {
-  const { activeQuery, setActiveQuery, isSidebarCollapsed, handleSidebarCollapseChange } = 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.jsx(
-    SearchBox.SearchBox,
-    {
-      ref: searchBoxRef,
-      inputWidth: "100%",
-      inputSize: "sm",
-      value: activeQuery != null ? activeQuery : "",
-      onSearch: handleSearch,
-      placeholder: "Filtrer menu"
-    }
-  );
-};
-var SidenavFiltering_default = SidenavFiltering;
-
-module.exports = SidenavFiltering_default;