nntc-ui 0.0.35 → 0.0.36

package/index.d.ts

@@ -139,6 +139,7 @@ interface Props$e {
     selected: string[] | null;
     titleType?: TitleVariant;
     enableSearch?: boolean;
+    popoverInComponent?: boolean;
 }
 declare function MultiSelect(props: UiProps<Props$e> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
@@ -353,6 +354,8 @@ interface Props$4 {
     wrapTrigger?: boolean;
     containerOffset?: number;
     root?: HTMLElement | MutableRefObject<HTMLElement | null> | null;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare function Popover(props: PropsWithChildren<UiProps<Props$4>>): string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null;
 

package/index.js

@@ -417,7 +417,19 @@ var PopoverTrigger = forwardRef4(
 // src/components/view/Popover/Popover.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Popover(props) {
-  const { description, clickable, initialOpen, placement, wrapTrigger, containerOffset, root: root22, children: children2, classes } = props;
+  const {
+    description,
+    clickable,
+    initialOpen,
+    placement,
+    wrapTrigger,
+    containerOffset,
+    root: root22,
+    open,
+    onOpenChange,
+    children: children2,
+    classes
+  } = props;
   const [showTooltip, setShowTooltip] = useState2(false);
   if (!children2) {
     return null;
@@ -430,8 +442,8 @@ function Popover(props) {
     {
       placement,
       initialOpen,
-      open: clickable ? showTooltip : void 0,
-      onOpenChange: clickable ? setShowTooltip : void 0,
+      open: open !== void 0 ? open : clickable ? showTooltip : void 0,
+      onOpenChange: onOpenChange !== void 0 ? onOpenChange : clickable ? setShowTooltip : void 0,
       containerOffset,
       root: root22,
       children: [
@@ -1553,7 +1565,12 @@ var WrapForLabel = (props) => {
 
 // src/components/common/MultiSelect/MultiSelect.tsx
 import classnames11 from "classnames";
-import { useCallback as useCallback6, useMemo as useMemo3, useRef as useRef7 } from "react";
+import {
+  useCallback as useCallback6,
+  useMemo as useMemo3,
+  useRef as useRef7,
+  useState as useState8
+} from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { mergeRefs as mergeRefs7 } from "react-merge-refs";
 import { v4 as uuidv45 } from "uuid";
@@ -1713,19 +1730,23 @@ function MultiSelect(props) {
     id,
     titleType = "allValue",
     enableSearch = false,
+    popoverInComponent = false,
     ...inputProps
   } = props;
   const { t } = useTranslation2();
+  const wrapperRef = useRef7(null);
   const inputRef = useRef7(null);
   const popoverTargetRef = useRef7(null);
+  const [isPopoverOpen, setIsPopoverOpen] = useState8(false);
   const activeItems = useMemo3(() => items2.filter((i) => selected5?.includes(i.value)), [selected5, items2]);
   const inputClickHandler = useCallback6(
     (e) => {
       e.preventDefault();
-      if (!disabled2)
-        popoverTargetRef?.current?.click();
+      if (!disabled2) {
+        setIsPopoverOpen((prev) => !prev);
+      }
     },
-    [popoverTargetRef]
+    [disabled2]
   );
   const changeSelectedItem = (item3) => {
     const newValue = selected5 ?? [];
@@ -1766,6 +1787,7 @@ function MultiSelect(props) {
         /* @__PURE__ */ jsxs12(
           "div",
           {
+            ref: wrapperRef,
             className: classnames11(
               wrapper4,
               multiSelect_exports[variant],
@@ -1794,11 +1816,14 @@ function MultiSelect(props) {
                 Popover,
                 {
                   placement: "bottom-start",
+                  open: isPopoverOpen,
+                  onOpenChange: setIsPopoverOpen,
                   classes: {
                     content: classnames11(popoverContent3, classes?.popoverContent),
                     ...classes?.popover
                   },
                   containerOffset: 4,
+                  root: popoverInComponent ? wrapperRef.current : void 0,
                   description: /* @__PURE__ */ jsx20(
                     SelectPopover2,
                     {
@@ -1830,7 +1855,7 @@ function MultiSelect(props) {
 
 // src/components/common/Checklist/Checklist.tsx
 import classnames12 from "classnames";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/common/Checklist/checklist.module.css
 var root13 = "checklist_root";
@@ -1856,8 +1881,8 @@ import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-r
 function Checklist(props) {
   const { items: items2, selected: selected5, disableSearch, isDisabled, actionWithSelected, onChangeItem, classes } = props;
   const { t } = useTranslation();
-  const [filterSubstring, setFilterSubstring] = useState8("");
-  const [selectedItems, setSelectedItems] = useState8(selected5);
+  const [filterSubstring, setFilterSubstring] = useState9("");
+  const [selectedItems, setSelectedItems] = useState9(selected5);
   const filteredItems = filterItems2(items2, filterSubstring, selectedItems);
   const handleClick = (item3) => {
     const value = !selected5[item3.value];
@@ -1999,11 +2024,11 @@ function Layout(props) {
 
 // src/components/navigation/Tabs/Tabs.tsx
 import classnames17 from "classnames";
-import { useEffect as useEffect5, useState as useState11 } from "react";
+import { useEffect as useEffect5, useState as useState12 } from "react";
 
 // src/components/view/Tooltip/Tooltip.tsx
 import classnames16 from "classnames";
-import { useRef as useRef8, useState as useState10 } from "react";
+import { useRef as useRef8, useState as useState11 } from "react";
 
 // src/components/view/Tooltip/tooltip.module.css
 var tooltip_exports = {};
@@ -2141,7 +2166,7 @@ import {
   useInteractions as useInteractions2,
   useRole as useRole2
 } from "@floating-ui/react";
-import { useMemo as useMemo4, useState as useState9 } from "react";
+import { useMemo as useMemo4, useState as useState10 } from "react";
 function useTooltip(props = {}) {
   const {
     initialOpen = false,
@@ -2152,7 +2177,7 @@ function useTooltip(props = {}) {
     arrowRef,
     root: root22
   } = props;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState9(initialOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
   const data = useFloating2({
@@ -2246,7 +2271,7 @@ function Tooltip(props) {
     children: children2,
     classes
   } = props;
-  const [showTooltip, setShowTooltip] = useState10(false);
+  const [showTooltip, setShowTooltip] = useState11(false);
   const arrowRef = useRef8(null);
   if (!label7) {
     return children2;
@@ -2363,8 +2388,8 @@ function Tabs(props) {
     value,
     classes
   } = props;
-  const [isMounted, setIsMounted] = useState11(false);
-  const [selectedTab, setSelectedTab] = useState11(defaultSelected);
+  const [isMounted, setIsMounted] = useState12(false);
+  const [selectedTab, setSelectedTab] = useState12(defaultSelected);
   const currentValue = useExternalState ? value : selectedTab;
   const handleClick = (item3) => () => {
     if (item3.isDisabled) {
@@ -2472,7 +2497,7 @@ import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-tabl
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import classnames22 from "classnames";
 import dayjs4 from "dayjs";
-import { Fragment as Fragment8, useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef11, useState as useState15 } from "react";
+import { Fragment as Fragment8, useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef11, useState as useState16 } from "react";
 
 // src/utils/toFirstLetterUpperCase.ts
 var toFirstLetterUpperCase = (name) => {
@@ -2484,7 +2509,7 @@ var defaultRowHeight = 32;
 
 // src/components/view/VirtualTable/ui/DefaultColumn/DefaultColumn.tsx
 import classnames18 from "classnames";
-import { useEffect as useEffect6, useRef as useRef10, useState as useState12 } from "react";
+import { useEffect as useEffect6, useRef as useRef10, useState as useState13 } from "react";
 
 // src/components/view/Modal/Modal.tsx
 import { forwardRef as forwardRef7, useRef as useRef9 } from "react";
@@ -2651,9 +2676,9 @@ var DefaultColumn = {
     const initialValue = getValue();
     const { meta } = columnDef;
     const tableMeta = table2.options.meta;
-    const [value, setValue] = useState12(initialValue);
-    const [isEdit, setIsEdit] = useState12(false);
-    const [showModal, setShowModal] = useState12(false);
+    const [value, setValue] = useState13(initialValue);
+    const [isEdit, setIsEdit] = useState13(false);
+    const [showModal, setShowModal] = useState13(false);
     const closeModalRef = useRef10();
     closeModalRef.current = () => {
       setShowModal(false);
@@ -2707,7 +2732,7 @@ var checklistWrap = "headerDropdown_checklistWrap";
 
 // src/components/view/VirtualTable/ui/DateFiltration/DateFiltration.tsx
 import classnames19 from "classnames";
-import { useEffect as useEffect7, useState as useState13 } from "react";
+import { useEffect as useEffect7, useState as useState14 } from "react";
 
 // src/components/view/VirtualTable/ui/DateFiltration/dateFiltration.module.css
 var root19 = "dateFiltration_root";
@@ -2716,7 +2741,7 @@ var root19 = "dateFiltration_root";
 import { jsx as jsx31 } from "react/jsx-runtime";
 function DateFiltration(props) {
   const { defaultValues = [void 0, void 0], actionWithSelected } = props;
-  const [values, setValues] = useState13(defaultValues);
+  const [values, setValues] = useState14(defaultValues);
   const handleChangeDates = (newValues) => {
     setValues(newValues);
   };
@@ -2738,7 +2763,7 @@ function DateFiltration(props) {
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
 import classnames20 from "classnames";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 
 // src/components/view/VirtualTable/ui/NumberFiltration/numberFiltration.module.css
 var root20 = "numberFiltration_root";
@@ -2756,10 +2781,10 @@ var items = [
 ];
 function NumberFiltration(props) {
   const { defaultValues = [-Infinity, Infinity], actionWithSelected } = props;
-  const [selectedItem, setSelectedItem] = useState14(
+  const [selectedItem, setSelectedItem] = useState15(
     defaultValues[0] === -Infinity && defaultValues[1] === Infinity ? items[0] : defaultValues[0] === defaultValues[1] ? items[3] : defaultValues[0] === -Infinity ? items[2] : defaultValues[1] === Infinity ? items[1] : items[0]
   );
-  const [values, setValues] = useState14(defaultValues);
+  const [values, setValues] = useState15(defaultValues);
   const handleSelect = (item3) => {
     if (!!item3) {
       const newValues = [...values];
@@ -3171,8 +3196,8 @@ function VirtualTable(props) {
     showUniqueValuesCount = false
     // globalFilters,
   } = props;
-  const [filterBy, setFilterBy] = useState15([]);
-  const [sortBy, setSortBy] = useState15([{ columnName: "isNew", direction: "desc" }]);
+  const [filterBy, setFilterBy] = useState16([]);
+  const [sortBy, setSortBy] = useState16([{ columnName: "isNew", direction: "desc" }]);
   const tableContainerRef = useRef11(null);
   const memoizedColumns = useMemo6(() => getColumns(columns), [columns]);
   const memoizedData = useMemo6(() => {
@@ -3567,14 +3592,14 @@ function VirtualTable(props) {
 }
 
 // src/components/view/TreeView/TreeView.tsx
-import { memo as memo2, useCallback as useCallback8, useMemo as useMemo7, useState as useState17 } from "react";
+import { memo as memo2, useCallback as useCallback8, useMemo as useMemo7, useState as useState18 } from "react";
 
 // src/components/view/TreeView/treeView.module.css
 var search = "treeView_search";
 
 // src/components/view/TreeView/ui/TreeViewItem/TreeViewItem.tsx
 import classNames5 from "classnames";
-import { memo, useEffect as useEffect9, useState as useState16 } from "react";
+import { memo, useEffect as useEffect9, useState as useState17 } from "react";
 
 // src/components/view/TreeView/ui/TreeViewItem/treeViewItem.module.css
 var item2 = "treeViewItem_item";
@@ -3597,7 +3622,7 @@ var TreeViewItem_default = memo(function TreeViewItem({
   startIcons,
   children: children2
 }) {
-  const [isOpen, setIsOpen] = useState16(false);
+  const [isOpen, setIsOpen] = useState17(false);
   useEffect9(() => {
     setIsOpen(!!searchValue);
   }, [searchValue]);
@@ -3659,7 +3684,7 @@ var getFilteredTree = (tree, search2) => {
 // src/components/view/TreeView/TreeView.tsx
 import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 var TreeView_default = memo2(function TreeView({ data, selected: selected5, startIcons, onSelect, withSearch = false }) {
-  const [searchValue, setSearchValue] = useState17("");
+  const [searchValue, setSearchValue] = useState18("");
   const onChangeSearchValue = useCallback8((e) => setSearchValue(e.target.value), []);
   const selectedValues = useMemo7(
     () => selected5.reduce(
@@ -3715,11 +3740,11 @@ var valuesWithBorders = "pairs_valuesWithBorders";
 var dimTypography = "pairs_dimTypography";
 
 // src/components/view/Pairs/ui/TypographyWithTooltip.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function TypographyWithTooltip(props) {
   const { label: label7 } = props;
-  const [tooltip, setTooltip] = useState18(label7);
+  const [tooltip, setTooltip] = useState19(label7);
   return /* @__PURE__ */ jsx37(Tooltip, { label: tooltip, children: /* @__PURE__ */ jsx37(
     Typography,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",