sccoreui 6.3.93 → 6.3.94

package/dist/App.js

@@ -6,6 +6,6 @@ require("./App.scss");
 // import Home from "./pages/home";
 const App = () => {
     // const [selectedCountries, setSelectedCountries] = useState(null);
-    return (0, jsx_runtime_1.jsx)("div", { children: " " });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "m-6" }));
 };
 exports.default = App;

package/dist/App.scss

@@ -1161,7 +1161,14 @@ button[aria-expanded="true"] {
   padding-inline: 6px 10px !important;
   color: var(--primary-400);
   background: transparent;
-
+  &.assign_value {
+    .p-button-label {
+      max-width: 120px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
   &:not(.section_btn) {
     height: 28px;
   }
@@ -1189,23 +1196,6 @@ button[aria-expanded="true"] {
   }
 }
 
-.p-button.data_label {
-  color: var(--gray-600);
-  background-color: transparent;
-  display: flex;
-  gap: 4px;
-  svg {
-    path {
-      stroke: var(--gray-700);
-    }
-  }
-
-  &:hover {
-    background-color: var(--gray-200);
-    color: var(--gray-700);
-  }
-}
-
 .list_box_chips {
   display: flex;
   flex-wrap: wrap;

package/dist/components/list-box-dropdown/list-box-dropdown.js

@@ -15,7 +15,7 @@ const ListBoxDropdown = (props) => {
     // onSelectAll,
     onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, optionsMenuRef = boxRef, 
     // buttonClassName,
-    showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, dataLabel, } = props;
+    showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, emptyFilterMessage, emptyMessage, dataLabel, onFilterValueChange, virtualScrollerOptions, } = props;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     // const [inpValue, setInpValue] = useState<any>();
     // const [checked, setChecked] = useState<boolean>(false);
@@ -106,7 +106,7 @@ const ListBoxDropdown = (props) => {
                             template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
                                     ? listBoxParentClassName +
                                         " list_box_dropdown border-round-lg border-1 overflow-hidden border-gray-200"
-                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { type: "sectionHeader", itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${selectedOptionNone ? "selected-none" : ""} ${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && ""}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: selectedOptionNone
+                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { type: "sectionHeader", itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${selectedOptionNone ? "selected-none" : ""} ${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && ""}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), onFilterValueChange: onFilterValueChange, virtualScrollerOptions: virtualScrollerOptions, options: selectedOptionNone
                                             ? listItems.length === selectedItems.length
                                                 ? []
                                                 : listItems
@@ -136,7 +136,10 @@ const ListBoxDropdown = (props) => {
                                             ? emptyFilterMessage
                                             : "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
                         },
-                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !dataLabel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), title: label })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "data_label", title: dataLabel })) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, title: label }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
+                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !dataLabel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), title: label })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: (event) => optionsMenuRef.current.toggle(event), title: label, className: "listbox_label" }, { children: dataLabel }))) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", 
+                            // className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
+                            // link={link ? true : false}
+                            icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, title: label }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
                                 (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
                                     var _a, _b, _c, _d;
                                     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `select-none ${chipClassName ? chipClassName : "list_box_chip"}    ${showRemoveIcon ? "relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-truncate max-w-10rem inline-block", title: typeof item === "object"

package/dist/components/virtual-scroll-drop-down/VirtualScrollDropDown.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// import { VirtualScroller } from 'primereact/virtualscroller';
+// import { OverlayPanel } from 'primereact/overlaypanel';
+// import { InputText } from 'primereact/inputtext';
+const button_1 = require("primereact/button");
+// import { classNames } from 'primereact/utils';
+const dropdown_1 = require("primereact/dropdown");
+const VirtualScrollDropDown = () => {
+    const [items] = (0, react_1.useState)(Array.from({ length: 100000 }).map((_, i) => `Item #${i}`));
+    // const [totalRecords] = useState(300); // total from API
+    // const [searchTerm, setSearchTerm] = useState('');
+    const [selectedItem] = (0, react_1.useState)(null);
+    const op = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        loadData(0, 100); // Load initial 100 items
+    }, []);
+    const loadData = (offset, limit, search = '') => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        console.log(offset, limit, search, "onscroll");
+        // replace with your API
+        // const response = await fetch(`/api/items?offset=${offset}&limit=${limit}&search=${search}`);
+        // const data = await response.json();
+        // setItems(prev => offset === 0 ? data : [...prev, ...data]);
+    });
+    // const itemTemplate = (item, options) => {
+    //     const className = classNames('flex align-items-center p-2', {
+    //         'surface-hover': options.odd
+    //     });
+    //     return (
+    //         <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+    //             {item}
+    //         </div>
+    //     );
+    // };
+    // const onLazyLoad = (event) => {
+    //     console.log(event)
+    //     if (items.length < totalRecords) {
+    //         loadData(items.length, 100, searchTerm);
+    //     }
+    // };
+    // const onSearch = (e) => {
+    //     const term = e.target.value;
+    //     setSearchTerm(term);
+    //     loadData(0, 100, term);
+    // };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: selectedItem ? selectedItem.name : "Select Item", onClick: (e) => op.current.toggle(e) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: items, filter: true, virtualScrollerOptions: { itemSize: 40 } })] }));
+};
+exports.default = VirtualScrollDropDown;

package/dist/types/components/types/type.d.ts

@@ -265,6 +265,8 @@ export interface ListBoxDropdownTypes {
     emptyMessage?: any;
     optionsMenuRef?: any;
     dataLabel?: any;
+    onFilterValueChange?: (payload: any) => void;
+    virtualScrollerOptions?: any;
 }
 export interface DatePickerTypes {
     value: any;

package/dist/types/components/virtual-scroll-drop-down/VirtualScrollDropDown.d.ts

@@ -0,0 +1,2 @@
+declare const VirtualScrollDropDown: () => import("react/jsx-runtime").JSX.Element;
+export default VirtualScrollDropDown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "6.3.93",
+  "version": "6.3.94",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",