@visns-studio/visns-components 5.15.10 → 5.15.12

package/package.json

@@ -13,10 +13,10 @@
         "@nivo/line": "^0.99.0",
         "@nivo/pie": "^0.99.0",
         "@react-pdf/renderer": "^4.3.0",
-        "@tanstack/react-query": "^5.84.2",
+        "@tanstack/react-query": "^5.85.5",
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.3.0",
-        "@uiw/react-color": "^2.7.3",
+        "@uiw/react-color": "^2.8.0",
         "@visns-studio/visns-datagrid-community": "1.1.0",
         "@visns-studio/visns-datagrid-enterprise": "1.1.0",
         "@vitejs/plugin-react": "^4.7.0",
@@ -32,7 +32,7 @@
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.536.0",
+        "lucide-react": "^0.540.0",
         "mapbox-gl": "^3.14.0",
         "moment": "^2.30.1",
         "motion": "^12.23.12",
@@ -43,7 +43,7 @@
         "react-big-calendar": "^1.19.4",
         "react-copy-to-clipboard": "^5.1.0",
         "react-currency-input-field": "^3.10.0",
-        "react-datepicker": "^8.4.0",
+        "react-datepicker": "^8.7.0",
         "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
         "react-number-format": "^5.4.4",
@@ -64,7 +64,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.3",
+        "sweetalert2": "^11.22.4",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -75,12 +75,12 @@
         "yet-another-react-lightbox": "^3.25.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.28.0",
-        "@babel/plugin-transform-runtime": "^7.28.0",
-        "@babel/preset-env": "^7.28.0",
+        "@babel/core": "^7.28.3",
+        "@babel/plugin-transform-runtime": "^7.28.3",
+        "@babel/preset-env": "^7.28.3",
         "@babel/preset-react": "^7.27.1",
         "babel-loader": "^10.0.0",
-        "copy-webpack-plugin": "^13.0.0",
+        "copy-webpack-plugin": "^13.0.1",
         "css-loader": "^7.1.2",
         "css-minimizer-webpack-plugin": "^7.0.2",
         "mini-css-extract-plugin": "^2.9.4",
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.10",
+    "version": "5.15.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Breadcrumb.jsx

@@ -70,9 +70,13 @@ function Breadcrumb({ data, page }) {
 
     return (
         <h1>
-            {page?.parentTitle && page?.parentUrl && (
+            {page?.parentTitle && (
                 <>
-                    <Link to={page.parentUrl}>{parse(page.parentTitle)}</Link>
+                    {page?.parentUrl ? (
+                        <Link to={page.parentUrl}>{parse(page.parentTitle)}</Link>
+                    ) : (
+                        <span>{parse(page.parentTitle)}</span>
+                    )}
                     <ChevronRight strokeWidth={2} size={18} />
                 </>
             )}
@@ -92,15 +96,19 @@ function Breadcrumb({ data, page }) {
                 page &&
                 page.title && (
                     <>
-                        <Link
-                            to={`${page.previousUrl}${
-                                page.previousUrlKey && data[page.previousUrlKey]
-                                    ? '/' + data[page.previousUrlKey]
-                                    : ''
-                            }`}
-                        >
-                            {parse(page.title)}
-                        </Link>
+                        {page.previousUrl ? (
+                            <Link
+                                to={`${page.previousUrl}${
+                                    page.previousUrlKey && data[page.previousUrlKey]
+                                        ? '/' + data[page.previousUrlKey]
+                                        : ''
+                                }`}
+                            >
+                                {parse(page.title)}
+                            </Link>
+                        ) : (
+                            <span>{parse(page.title)}</span>
+                        )}
                     </>
                 )
             )}

package/src/components/DataGrid.jsx

@@ -309,11 +309,6 @@ const DataGrid = forwardRef(
 
         /** Modal Functions */
         const modalOpen = (formType, formId) => {
-            console.log('🔍 modalOpen called:', {
-                formType: formType,
-                formId: formId,
-                timestamp: new Date().toISOString(),
-            });
             setModalShow(true);
             setFormType(formType);
             setFormId(formId);

package/src/components/Field.jsx

@@ -23,6 +23,7 @@ import {
     ArrowLeft,
     Trash2,
     X,
+    Lightbulb,
 } from 'lucide-react';
 import { toast } from 'react-toastify';
 import validator from 'validator';
@@ -38,6 +39,7 @@ import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from './DropZone';
+import MultiCheckbox from './MultiCheckbox';
 import DatePickerPortal from './utils/DatePickerPortal';
 
 import 'react-toggle/style.css';
@@ -338,6 +340,7 @@ function Field({
                 break;
             case 'dropdown-ajax':
             case 'multi-dropdown-ajax':
+            case 'multi-checkbox-ajax':
             case 'radio-ajax':
                 // Only fetch if there are no dependent fields (no 'where' conditions)
                 if (!settings.where || settings.where.length === 0) {
@@ -375,7 +378,7 @@ function Field({
 
     // Separate useEffect for handling dependent form data changes for dropdown refetch
     useEffect(() => {
-        if (['dropdown-ajax', 'multi-dropdown-ajax', 'radio-ajax'].includes(settings.type) && settings.where?.length > 0) {
+        if (['dropdown-ajax', 'multi-dropdown-ajax', 'multi-checkbox-ajax', 'radio-ajax'].includes(settings.type) && settings.where?.length > 0) {
             let filter = {};
 
             const processedWhere = settings.where.map((whereItem) => {
@@ -567,6 +570,7 @@ function Field({
                     'image',
                     'multi-dropdown',
                     'multi-dropdown-ajax',
+                    'multi-checkbox-ajax',
                     'plaindate',
                     'plaindatetime',
                     'plainrelation',
@@ -708,6 +712,7 @@ function Field({
                             options={options}
                             dataOptions={dataOptions}
                             isCreatable={settings.isCreatable || false}
+                            creatableConfig={settings.creatableConfig || {}}
                         />
                         {settings.create && (
                             <button
@@ -1655,7 +1660,7 @@ function Field({
                             return (
                                 <div style={{ display: 'flex', justifyContent: 'center' }}>
                                     <Toggle
-                                        checked={cellValue || false}
+                                        checked={Boolean(cellValue) || false}
                                         onChange={(e) => 
                                             onChangeJsonTable && onChangeJsonTable(e, rowIndex, column.id, 'toggle')
                                         }
@@ -1888,6 +1893,7 @@ function Field({
                             }
                             isSearchable={settings.isSearchable ?? true}
                             isCreatable={settings.isCreatable ?? false}
+                            creatableConfig={settings.creatableConfig || {}}
                             dataOptions={dataOptions}
                             style={style}
                         />
@@ -1922,6 +1928,35 @@ function Field({
                         )}
                     </div>
                 );
+            case 'multi-checkbox-ajax':
+                return (
+                    <MultiCheckbox
+                        settings={settings}
+                        className={inputClass[settings.id]}
+                        inputValue={
+                            inputValue === null || inputValue === undefined
+                                ? []
+                                : inputValue
+                        }
+                        onChange={(newSelected, action, fieldId) => {
+                            // Call the original onChangeSelect handler
+                            if (onChangeSelect) {
+                                onChangeSelect(newSelected, action, fieldId);
+                            }
+                            
+                            // If a new option was created, refresh the options list
+                            if (action && action.action === 'create-option') {
+                                setCounter(prev => prev + 1);
+                            }
+                        }}
+                        options={options}
+                        isCreatable={settings.isCreatable ?? false}
+                        isEditable={settings.isEditable ?? false}
+                        creatableConfig={settings.creatableConfig || {}}
+                        editableConfig={settings.editableConfig || {}}
+                        style={style}
+                    />
+                );
             case 'percentage':
                 return (
                     <NumericFormat
@@ -2250,7 +2285,7 @@ function Field({
                                                 ? false
                                                 : cell[cellKey] === 'on'
                                                 ? false
-                                                : cell[cellKey]
+                                                : Boolean(cell[cellKey])
                                             : false
                                     }
                                     onChange={(e) => {
@@ -2448,7 +2483,7 @@ function Field({
                                                 ? false
                                                 : cell === 'on'
                                                 ? false
-                                                : cell
+                                                : Boolean(cell)
                                             : false
                                     }
                                     onChange={(e) => {
@@ -2644,6 +2679,7 @@ function Field({
                 'line-break',
                 'multi-dropdown',
                 'multi-dropdown-ajax',
+                'multi-checkbox-ajax',
                 'plaindate',
                 'plaindatetime',
                 'plainrelation',
@@ -2847,7 +2883,7 @@ function Field({
                                         ? false
                                         : inputValue === 'on'
                                         ? false
-                                        : inputValue
+                                        : Boolean(inputValue)
                                     : false
                             }
                             onChange={onChangeToggle}
@@ -2906,7 +2942,7 @@ function Field({
                 // Get options based on dropdown type
                 if (['dropdown', 'multi-dropdown'].includes(settings.type) && settings.options) {
                     existingOptions = settings.options;
-                } else if (['dropdown-ajax', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type) && options) {
+                } else if (['dropdown-ajax', 'multi-dropdown-ajax', 'multi-checkbox-ajax', 'async-dropdown-ajax'].includes(settings.type) && options) {
                     existingOptions = options;
                 }
                 
@@ -2977,7 +3013,7 @@ function Field({
                         [settings.id]: createdItem.id
                     }));
                 }
-            } else if (['multi-dropdown', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type)) {
+            } else if (['multi-dropdown', 'multi-dropdown-ajax', 'multi-checkbox-ajax', 'async-dropdown-ajax'].includes(settings.type)) {
                 // For multi-select fields, we need to handle existing selections
                 if (onChangeSelect) {
                     // Get current value to determine if it's multi-select
@@ -3068,7 +3104,7 @@ function Field({
 
     useEffect(() => {
         if (counter > 0) {
-            if (settings.create.parent_id !== '') {
+            if (settings.create && settings.create.parent_id !== '') {
                 formSettings.fields.forEach((item) => {
                     if (item.id === settings.create.parent_id) {
                         fetchChildDropdownData(
@@ -3094,6 +3130,20 @@ function Field({
                 {renderInput()}
                 {renderFieldLabel()}
             </label>
+            {(settings.type === 'multi-dropdown-ajax' || settings.type === 'multi-dropdown') && settings.isCreatable && (
+                <div style={{ 
+                    fontSize: '0.75rem', 
+                    color: '#6b7280', 
+                    marginTop: '4px',
+                    fontStyle: 'italic',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px'
+                }}>
+                    <Lightbulb size={12} />
+                    Tip: Type to create new entries and press Enter
+                </div>
+            )}
             {renderAdditionalContainer()}
             <StandardModal
                 isOpen={childFormShow}