ui-soxo-bootstrap-core 2.6.0 → 2.6.1-dev.10

package/.github/workflows/npm-publish.yml

@@ -1,33 +1,63 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 
-name: Node.js Package
+name: Publish Node Package (OIDC)
 
 on:
   release:
     types: [created]
 
+permissions:
+  contents: read
+  id-token: write # REQUIRED for OIDC
+
 jobs:
-  build:
+  publish:
     runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm i
-#       - run: npm test
 
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      # 1. Checkout the exact commit the release was created from
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # 2. Setup Node.js
+      # Node 22 = current LTS
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           registry-url: https://registry.npmjs.org/
-      - run: npm i
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          cache: npm
+
+      # 3. Install dependencies deterministically
+      - name: Install dependencies
+        run: npm ci
+
+      # 4. Verify git tag matches package.json version
+      # This prevents publishing the wrong version
+      - name: Verify tag matches package.json version
+        run: |
+          TAG="${{ github.event.release.tag_name }}"
+          VERSION=$(node -p "require('./package.json').version")
+
+          echo "Release tag: $TAG"
+          echo "Package version: $VERSION"
+
+          if [[ "$TAG" != "v$VERSION"* ]]; then
+            echo "::error::Release tag does not match package.json version"
+            exit 1
+          fi
+
+      # 5. Publish using OIDC (NO TOKEN)
+      # --provenance triggers GitHub → npm identity verification
+      - name: Publish to npm (OIDC)
+        run: |
+          TAG="${{ github.event.release.tag_name }}"
+
+          if [[ "$TAG" == *"dev"* ]]; then
+            echo "Publishing dev release"
+            npm publish --tag dev --provenance
+          else
+            echo "Publishing stable release"
+            npm publish --provenance
+          fi

package/core/components/extra-info/extra-info-details.js

@@ -21,7 +21,7 @@ import ExtraInfo from './extra-info';
 
 const { TabPane } = Tabs;
 
-export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition = 'left', showDrawerData, dbPtr, callback, ...record }) {
+export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition = 'left', showDrawerData, dbPtr, callback, drawerWidth = '35%', ...record }) {
   // State to control drawer
   const [open, setOpen] = useState(false);
 
@@ -121,7 +121,7 @@ export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition =
         {/*  */}
 
         {/*  */}
-        <Drawer width={'35%'} title={title} onClose={onClose} open={open}>
+        <Drawer width={drawerWidth} title={title} onClose={onClose} open={open}>
           <div className="main-drawer-content">
             <div className="drawer-container">
               <div className="drawer-click">

package/core/components/menu-template-api/menu-template-api.js

@@ -99,9 +99,9 @@ export default class MenuTemplateAPI extends Component {
         }
 
 
-        if (menu && menu.model_id) {
+        if (menu && menu?.model_id) {
 
-            if (menu.model_id && allModels[menu.model.name]) {
+            if (menu?.model_id && allModels[menu?.model?.name]) {
 
                 this.loadedModel = allModels[menu.model.name]
 

package/core/lib/Store.js

@@ -50,7 +50,7 @@ const initialTheme = () => {
     //  manage theme with env
     const isEnvThemeTrue = process.env.REACT_APP_THEME;
 
-    console.log('REACT_APP_THEME:', isEnvThemeTrue);
+    // console.log('REACT_APP_THEME:', isEnvThemeTrue);
     const matchedTheme = themes.find((t) => t.name === isEnvThemeTrue);
 
     if (matchedTheme) return matchedTheme;
@@ -64,7 +64,7 @@ const initialTheme = () => {
     // Fallback to default
     return themes[0];
   } catch (e) {
-    console.error('Error loading theme:', e);
+    // console.error('Error loading theme:', e);
     return themes[0];
   }
 };
@@ -94,7 +94,7 @@ export const GlobalProvider = ({ children, CustomModels,CustomComponents, appSet
 
   const [state, dispatch] = useReducer(AppReducer, initialState);
 
-  console.log(state);
+  // console.log(state);
 
   const { isMobile } = useDeviceDetect();
 

package/core/lib/components/global-header/global-header.js

@@ -49,7 +49,7 @@ import { useTranslation } from "react-i18next";
 import BorderStyle from "pdf-lib/cjs/core/annotation/BorderStyle";
 
 import SettingsUtil from "../../../utils/settings.utils";
-import { SpotlightSearch } from "..";
+import SpotlightSearch from "../spotlight-search/spotlight-search.component";
 
 
 
@@ -410,4 +410,4 @@ function ProfileAvatar() {
       {/* {user.name} */}
     </Link>
   );
-}
+}

package/core/lib/components/sidemenu/sidemenu.js

@@ -39,18 +39,18 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
   // Import t and i18n from useTranslation
   const { t, i18n } = useTranslation();
   const { state } = useContext(GlobalContext);
-    const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
-    useEffect(() => {
-      const handleResize = () => {
-        setIsMobile(window.innerWidth < 768); // Common breakpoint for mobile
-      };
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Common breakpoint for mobile
+    };
 
-      handleResize(); // Set initial value
-      window.addEventListener('resize', handleResize);
+    handleResize(); // Set initial value
+    window.addEventListener('resize', handleResize);
 
-      return () => window.removeEventListener('resize', handleResize);
-    }, []);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   const menuText = t(caption);
   const menuContent = (
@@ -85,8 +85,14 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
     </>
   );
 
-    // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
-    return isMobile || collapsed ? menuContent : <Popover content={menuText} placement="right">{menuContent}</Popover>;
+  // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
+  return isMobile || collapsed ? (
+    menuContent
+  ) : (
+    <Popover content={menuText} placement="right">
+      {menuContent}
+    </Popover>
+  );
 }
 
 export default function SideMenu({ loading, modules = [], callback, appSettings, collapsed }) {
@@ -123,7 +129,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
    * Logout Function
    */
   async function handleLogout() {
-    let dbPtrValue = appSettings.headers.db_ptr;
+    // let dbPtrValue = appSettings.headers.db_ptr;
     const isEnvThemeTrue = process.env.REACT_APP_THEME === 'true';
 
     //  Only clear localStorage if theme is not 'true'
@@ -137,7 +143,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
       // const result = Users.logout()
       localStorage.clear();
 
-      localStorage.setItem('db_ptr', dbPtrValue);
+      // localStorage.setItem('db_ptr', dbPtrValue);
 
       let userInfo = {
         dms: {},

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -6,86 +6,61 @@
  * Ensure to follow a minimal standard
  */
 import React, { useState, useEffect, useRef } from 'react';
-
 import PhoneInput from 'react-phone-input-2';
-
 import 'react-phone-input-2/lib/style.css';
-
-import PropTypes from "prop-types";
-
+import PropTypes from 'prop-types';
 import './phone-input.scss';
 
+export default function CountryPhoneInput({
+  value,
+  onChange,
+  disabled,
+  disableCountryCode,
+  required,
+  defaultCountryCode,
+  onBlur,
+  className,
+  onKeyDown,
+}) {
+  const inputRef = useRef();
+  const hasInitializedRef = useRef(false); // IMPORTANT
+
+  const [phone, setPhone] = useState('');
 
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
-
-  let inputRef = useRef();
-
-  const [phone, setPhone] = useState();
-
+  /**
+   * run ONLY ONCE when initial value has dial code
+   */
   useEffect(() => {
-    if (value && value.code && value.code.dialCode !== null) {
-      // To prepopulate phone number ,concat dialCode and phone number
+    if (!hasInitializedRef.current && value?.code?.dialCode && value?.value) {
       setPhone(value.code.dialCode + value.value);
-
-      // In case of update , to identify the country code that is getting selected
-      // We are setting a timeout
-      setTimeout(() => {
-        // Using the reference , we get the internal state of the library component
-        let selectedCountry = null;
-
-        let selectedCode = null;
-
-        if (
-          inputRef.current &&
-          inputRef.current.state &&
-          inputRef.current.state.selectedCountry
-        ) {
-          selectedCountry = inputRef.current.state.selectedCountry;
-
-          // Once we get the selected country ,we format it to the form that is received for normal onChange
-          selectedCode = {
-            countryCode: selectedCountry.iso2,
-            dialCode: selectedCountry.dialCode,
-            name: selectedCountry.name,
-          };
-        }
-
-        // Below being the format expected , we trigger the onChange to manually update the form
-        let updatedValue = {
-          value: value.code.dialCode + value.value,
-          code: selectedCode,
-        };
-
-        onChange(updatedValue);
-      }, 0);
+      hasInitializedRef.current = true; // 👈 mark as done
     }
-  }, []);
+  }, [value]);
 
   /**
-   * To get value in parent component
-   * @param {*} value
+   * handle user input
    */
-  function handleInput(value, code) {
-    if (code.dialCode) {
-      value = value.substring(code.dialCode.length);
-    }
-    // To get country code with phone number in parent component
-    value = {
-      value,
+  function handleInput(inputValue, code) {
+    if (!code?.dialCode) return;
+
+    const phoneNumber = inputValue.slice(code.dialCode.length);
+
+    // remove autofill class when user edits field (if you use it)
+    onChange({
+      value: phoneNumber,
       code,
-    };
-    onChange(value);
+    });
   }
 
   return (
-    <div className="phone-input">
+    <div className={`phone-input ${className || ''}`}>
       <PhoneInput
         ref={inputRef}
         country={defaultCountryCode || 'in'}
         // country={disableCountryCode ? false : 'in'}
         value={phone}
         onChange={handleInput}
-        inputProps={{ required: required }}
+        inputProps={{ required: required, onKeyDown: onKeyDown }}
         disabled={disabled}
         onBlur={onBlur}
       />
@@ -104,4 +79,4 @@ CountryPhoneInput.propTypes = {
   disableCountryCode: PropTypes.bool,
   /** A boolean indicating whether the input is required or not. This prop is optional. */
   required: PropTypes.bool,
-};
+};

package/core/lib/elements/basic/country-phone-input/phone-input.scss

@@ -12,6 +12,20 @@
     // }
   }
   
+  .autofilled-field {
+  .react-tel-input {
+    .form-control {
+      border-color: #fa8c16 !important; // AntD warning orange
+      background-color: #fff7e6;
+      box-shadow: none;
+    }
+
+    .flag-dropdown {
+      border-color: #fa8c16 !important;
+      background-color: #fff7e6;
+    }
+  }
+}
 //   /* For tablets and smaller screens (max-width: 1024px) */
 //   @media (max-width: 1024px) {
 //     .phone-input {

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -102,7 +102,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
         >
           <div style={{ flex: 1 }}>
             {dragEnabled && <span style={{ marginRight: 8 }}>⋮⋮</span>}
-            <span>{item.name}</span>
+            <span>{item.caption}</span>
             {dragEnabled ? (
               <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>
             ) : (

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -23,7 +23,7 @@
  */
 
 import React from 'react';
-import { Checkbox, Collapse } from 'antd';
+import { Checkbox, Collapse, Tag } from 'antd';
 
 const { Panel } = Collapse;
 
@@ -73,11 +73,15 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
               background: '#fff',
               display: 'flex',
               alignItems: 'center',
-              gap: 8,
+              justifyContent: 'space-between',
             }}
           >
-            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
-            <span>{menu.title || menu.caption}</span>
+            {/* Left Side */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
+              <span>{menu.caption}</span>
+            </div>
+            <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
           </div>
         );
       }
@@ -91,15 +95,24 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
           <Panel
             key={menu.id}
             header={
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                {showCheckbox && (
-                  <Checkbox
-                    checked={children.every((c) => selectedMenus.includes(c.id))}
-                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
-                    onChange={(e) => onParentChange(e.target.checked)}
-                  />
-                )}
-                <span>{menu.title || menu.caption}</span>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  {showCheckbox && (
+                    <Checkbox
+                      checked={children.every((c) => selectedMenus.includes(c.id))}
+                      indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
+                      onChange={(e) => onParentChange(e.target.checked)}
+                    />
+                  )}
+                  <span>{menu.caption}</span>
+                </div>
+                <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
               </div>
             }
           >