pixel-react 1.20.21 → 1.20.22

package/README.md

@@ -1,75 +1,75 @@
----
-title: PixelReact UI
----
-
-import { Button, Input } from 'pixel-react';
-
-<h1 align="center">PixelReact UI</h1>
-
-<p align="center">
-  <strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
-</p>
-
----
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Usage](#usage)
-- [Documentation](#documentation)
-- [Contributing](#contributing)
-- [License](#license)
-
----
-
-## Installation
-
-Install PixelReact UI in your project directory with:
-
-```bash
-npm install pixel-react
-```
-
-or with Yarn:
-
-```bash
-yarn add pixel-react
-```
-
-## Usage
-
-Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
-
-```jsx
-import { Button } from 'pixel-react';
-
-function App() {
-  return (
-    <div>
-      <Button label="Button Label" variant="primary" />
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Documentation
-
-For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
-
-## Example
-
-```jsx
-import { Button } from 'pixel-react';
-
-function ExampleComponent() {
-  return <Button label="Click Me!" variant="primary" />;
-}
-```
-
-## License
-
-PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
-
----
+---
+title: PixelReact UI
+---
+
+import { Button, Input } from 'pixel-react';
+
+<h1 align="center">PixelReact UI</h1>
+
+<p align="center">
+  <strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
+</p>
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Installation
+
+Install PixelReact UI in your project directory with:
+
+```bash
+npm install pixel-react
+```
+
+or with Yarn:
+
+```bash
+yarn add pixel-react
+```
+
+## Usage
+
+Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
+
+```jsx
+import { Button } from 'pixel-react';
+
+function App() {
+  return (
+    <div>
+      <Button label="Button Label" variant="primary" />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Documentation
+
+For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
+
+## Example
+
+```jsx
+import { Button } from 'pixel-react';
+
+function ExampleComponent() {
+  return <Button label="Click Me!" variant="primary" />;
+}
+```
+
+## License
+
+PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
+
+---

package/lib/ThirdPartyPackages/Adapter.js

@@ -1 +1,3 @@
-import e from"../node_modules/webrtc-adapter/src/js/adapter_core.js";export{e as default};
+import adapter from 'webrtc-adapter';
+export default adapter;
+//# sourceMappingURL=Adapter.js.map

package/lib/ThirdPartyPackages/JanusGateway.js

@@ -1 +1,3 @@
-import s from"../node_modules/janus-gateway/npm/dist/janus.es.js";export{s as default};
+import Janus from 'janus-gateway';
+export default Janus;
+//# sourceMappingURL=JanusGateway.js.map

package/lib/assets/utils/functionUtils.js

@@ -1 +1,74 @@
-const t=t=>t&&"[object Function]"==={}.toString.call(t),r=t=>{const[r,o]=t.split(" ");if(!r||!o)return"00:00";let[n,e]=r.split(":");return n&&e?("12"===n&&(n="00"),"PM"===o.toUpperCase()&&(n=(parseInt(n,10)+12).toString()),`${n.padStart(2,"0")}:${e.padStart(2,"0")}`):"00:00"},o=t=>{const[r,o]=t.split(":"),n=parseInt(r??"0",10),e=parseInt(o??"0",10),a=n>=12?"PM":"AM";return`${(n%12||12).toString().padStart(2,"0")}:${e.toString().padStart(2,"0")} ${a}`},n=t=>/^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i.test(t),e={B:1,KB:1024,MB:1048576,GB:1073741824};function a(t){const r=t.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);if(!r)throw new Error(`Invalid storage value format: ${t}`);const[,o,n]=r;if(!o||!n)throw new Error(`Invalid storage value format: ${t}`);return{normalizedValue:parseFloat(o)*(e[n.toUpperCase()]||1),unit:n.toUpperCase(),value:parseFloat(o)}}function i(t){const r=["GB","MB","KB","B"];for(const o of r){const r=e[o];if(void 0===r)throw new Error(`Missing factor for unit: ${o}`);if(t>=r||"B"===o){const n=t/r;return`${n%1==0?`${n.toFixed(0)}`:`${n.toFixed(2)}`} ${o}`}}return`${t} B`}export{e as UNIT_MULTIPLIERS,o as convertTo12Hour,r as convertTo24Hour,i as formatMemoryValue,t as isFunction,n as isValid12HourTime,a as normalizeStorageValue};
+export const isFunction = (functionToCheck) => {
+    return (functionToCheck && {}.toString.call(functionToCheck) === '[object Function]');
+};
+export const convertTo24Hour = (time12h) => {
+    const [time, modifier] = time12h.split(' ');
+    if (!time || !modifier)
+        return '00:00';
+    let [hours, minutes] = time.split(':');
+    if (!hours || !minutes)
+        return '00:00';
+    if (hours === '12') {
+        hours = '00';
+    }
+    if (modifier.toUpperCase() === 'PM') {
+        hours = (parseInt(hours, 10) + 12).toString();
+    }
+    return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+};
+export const convertTo12Hour = (time24) => {
+    const [hoursStr, minutesStr] = time24.split(':');
+    const hours = parseInt(hoursStr ?? '0', 10);
+    const minutes = parseInt(minutesStr ?? '0', 10);
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    const hours12 = hours % 12 || 12;
+    return `${hours12.toString().padStart(2, '0')}:${minutes
+        .toString()
+        .padStart(2, '0')} ${ampm}`;
+};
+export const isValid12HourTime = (timeString) => {
+    const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
+    return regex.test(timeString);
+};
+// Utility to normalize memory values to bytes
+export const UNIT_MULTIPLIERS = {
+    B: 1,
+    KB: 1024,
+    MB: 1024 * 1024,
+    GB: 1024 * 1024 * 1024,
+};
+// Parses a storage value string and converts it into a normalized value in bytes along with its unit.
+export function normalizeStorageValue(value) {
+    const match = value.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+    if (!match) {
+        throw new Error(`Invalid storage value format: ${value}`);
+    }
+    const [, numericPart, unit] = match;
+    // Ensure numericPart and unit are defined
+    if (!numericPart || !unit) {
+        throw new Error(`Invalid storage value format: ${value}`);
+    }
+    const normalizedValue = parseFloat(numericPart) * (UNIT_MULTIPLIERS[unit.toUpperCase()] || 1);
+    return {
+        normalizedValue,
+        unit: unit.toUpperCase(),
+        value: parseFloat(numericPart),
+    };
+}
+// Converts a byte value into a readable string with the largest appropriate unit (GB, MB, KB, B).
+export function formatMemoryValue(valueInBytes) {
+    const units = ['GB', 'MB', 'KB', 'B'];
+    for (const unit of units) {
+        const factor = UNIT_MULTIPLIERS[unit];
+        if (factor === undefined) {
+            throw new Error(`Missing factor for unit: ${unit}`);
+        }
+        if (valueInBytes >= factor || unit === 'B') {
+            const normalizedValue = valueInBytes / factor;
+            const formattedValue = normalizedValue % 1 === 0 ? `${normalizedValue.toFixed(0)}` : `${normalizedValue.toFixed(2)}`;
+            return `${formattedValue} ${unit}`;
+        }
+    }
+    return `${valueInBytes} B`;
+}
+//# sourceMappingURL=functionUtils.js.map

package/lib/components/Accordion/Accordion.js

@@ -1 +1,29 @@
-import{jsxs as o,jsx as i,Fragment as e}from"react/jsx-runtime";import{useState as t}from"react";import"./Accordion.scss.js";import r from"../Icon/Icon.js";import"../../index.scss.js";import c from"../Tooltip/Tooltip.js";import n from"../Typography/Typography.js";import a from"../../_virtual/index.js";import s from"../HighlightText/HighlightText.js";const d=({highlightText:d="",headerTitle:l="",color:h,minHeight:m="32px",accordionContent:p=i(e,{children:"This is accordion content"}),disable:g=!1,disableInfoMessage:f="",accordionStateIconName:x="arrow_down",AccordionStateIconWidth:T=12,AccordionStateIconHeight:j=8,isExpand:y,onClick:v,className:N="",iconColor:b="var(--brand-color)",accordionContentStyle:H={}})=>{const[I,C]=t(y??!0);return o("div",{className:`ff-accordion ${N}`,children:[o("div",{className:`accordion-header ${g&&"ff-disabled"} ${I&&"expanded"} `,style:{color:h||"--tooltip-bg-color"},onClick:()=>{v&&v(),g||C(!I)},children:[i(c,{title:f,children:i(n,{as:"div",className:"header-title",fontWeight:"semi-bold",lineHeight:"18px",children:"string"==typeof l?i(s,{text:l,highlight:d}):l})}),i(r,{name:x,hoverEffect:!1,className:a("accordion-arrow",{expanded:I}),width:T,height:j,color:b})]}),!g&&I&&i("div",{style:{minHeight:m,...H},className:"accordion-content",children:p})]})};export{d as default};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import './Accordion.scss';
+import Icon from '../Icon';
+import '../../../index.scss';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+import classNames from 'classnames';
+import HighlightText from '../HighlightText';
+/**
+ * Accordion UI component
+ */
+const Accordion = ({ highlightText = '', headerTitle = '', color, minHeight = '32px', // Default min-height for accordion content
+accordionContent = _jsx(_Fragment, { children: "This is accordion content" }), disable = false, disableInfoMessage = '', accordionStateIconName = 'arrow_down', AccordionStateIconWidth = 12, AccordionStateIconHeight = 8, isExpand, onClick, className = '', iconColor = 'var(--brand-color)', accordionContentStyle = {}, }) => {
+    const [isAccordionExpanded, setIsAccordionExpanded] = useState(isExpand ?? true);
+    const onAccordionClick = () => {
+        if (onClick) {
+            onClick();
+        }
+        if (!disable) {
+            setIsAccordionExpanded(!isAccordionExpanded);
+        }
+    };
+    return (_jsxs("div", { className: `ff-accordion ${className}`, children: [_jsxs("div", { className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'} `, style: { color: color || '--tooltip-bg-color' }, onClick: onAccordionClick, children: [_jsx(Tooltip, { title: disableInfoMessage, children: _jsx(Typography, { as: "div", className: "header-title", fontWeight: "semi-bold", lineHeight: "18px", children: typeof headerTitle === 'string' ? (_jsx(HighlightText, { text: headerTitle, highlight: highlightText })) : (headerTitle) }) }), _jsx(Icon, { name: accordionStateIconName, hoverEffect: false, className: classNames('accordion-arrow', {
+                            expanded: isAccordionExpanded,
+                        }), width: AccordionStateIconWidth, height: AccordionStateIconHeight, color: iconColor })] }), !disable && isAccordionExpanded && (_jsx("div", { style: { minHeight, ...accordionContentStyle }, className: "accordion-content", children: accordionContent }))] }));
+};
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/lib/components/AddContentButton/AddContentButton.js

@@ -1 +1,11 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import"./AddContentButton.scss.js";import e from"../Icon/Icon.js";import i from"../Typography/Typography.js";import n from"../IconButton/IconButton.js";import{checkEmpty as c}from"../../utils/checkEmpty/checkEmpty.js";const l=({iconName:l="",onButtonClick:r,buttonLabel:s="Label",buttonText:a="To Add Group",disableButton:d=!1,stepCount:p=1,iconWidth:h=120,iconHeight:m=120,addContentLabel:u="step"})=>t("div",{className:"add-content-button "+(d?"disabled":""),children:[!c(l)&&o("div",{className:"icon-container",children:o(e,{name:l,width:h,height:m})}),t("div",{className:"typography-label-button",children:[t(i,{fontSize:"12px",fontWeight:"regular",lineHeight:"18px",children:[u+p," :"]}),o(i,{fontSize:"12px",fontWeight:"semi-bold",lineHeight:"18px",children:"Click"}),o(n,{label:s,onClick:r,iconName:"plus_user_icon",isDisable:d}),o(i,{fontSize:"12px",fontWeight:"semi-bold",lineHeight:"18px",children:a})]})]});export{l as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './AddContentButton.scss';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import IconButton from '../IconButton';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const AddContentButton = ({ iconName = '', onButtonClick, buttonLabel = 'Label', buttonText = 'To Add Group', disableButton = false, stepCount = 1, iconWidth = 120, iconHeight = 120, addContentLabel = "step", }) => {
+    return (_jsxs("div", { className: `add-content-button ${disableButton ? 'disabled' : ''}`, children: [!checkEmpty(iconName) && (_jsx("div", { className: "icon-container", children: _jsx(Icon, { name: iconName, width: iconWidth, height: iconHeight }) })), _jsxs("div", { className: "typography-label-button", children: [_jsxs(Typography, { fontSize: "12px", fontWeight: "regular", lineHeight: "18px", children: [addContentLabel + stepCount, " :"] }), _jsx(Typography, { fontSize: "12px", fontWeight: "semi-bold", lineHeight: "18px", children: "Click" }), _jsx(IconButton, { label: buttonLabel, onClick: onButtonClick, iconName: "plus_user_icon", isDisable: disableButton }), _jsx(Typography, { fontSize: "12px", fontWeight: "semi-bold", lineHeight: "18px", children: buttonText })] })] }));
+};
+export default AddContentButton;
+//# sourceMappingURL=AddContentButton.js.map

package/lib/components/AddResourceButton/AddResourceButton.js

@@ -1 +1,84 @@
-import{jsxs as o,jsx as t}from"react/jsx-runtime";import"./AddResourceButton.scss.js";import e from"./ArrowsButton/ArrowsButton.js";import r from"../Icon/Icon.js";import{useState as n,useRef as i}from"react";import{createPortal as a}from"react-dom";import{validateArrows as s}from"./type.js";import c from"../../hooks/usePortalPosition.js";const d=({id:d="AddModule",variant:l="primary",directionalArrow:u=[{direction:"right",menuOptions:[{label:"Sub Module",value:"sub_module",icon:"",disable:!1,tooltipForOption:"",tooltipPlacementForOption:void 0}]}],zIndex:f=1400,menuOptionZIndex:m=1400,treeRowRef:p,onMenuOptionClick:b,isFromTree:w=!1})=>{const[v,h]=n(!1),[O,M]=n({left:0,top:0}),[j,A]=n(""),$=i(null),x=i(null),y=s(u),I=c($,v),R=()=>{h(!0);const{positionX:o,positionY:t}=I($);if(M({left:o,top:t}),p?.current){const o=p.current.querySelector(".table-tree-fn-row-action, .table-tree-row-action");o?.classList.add("table-row-add-button")}},g=o=>{const t=o.relatedTarget,e=$.current?.contains(t),r=x.current?.contains(t);if(!e&&!r&&(h(!1),A(""),p?.current)){const o=p.current.querySelector(".table-tree-fn-row-action, .table-tree-row-action");o?.classList.remove("table-row-add-button")}};return o("div",{id:d,ref:$,className:`${w?"ff-add-button-tree":"ff-add-button-container"} ${v?`ff-hovered-add-button--${l}`:""}`,onMouseEnter:R,onMouseLeave:g,children:[t("span",{className:"ff-add-button",children:t(r,{name:"plus_icon",width:16,height:16,className:v?`ff-hovered-add-icon--${l}`:`ff-add-icon--${l}`})}),v&&a(t("div",{ref:x,id:"portal-123",className:`ff-arrow-buttons-container ff-${y.map(o=>o.direction).sort().join("-")} ${2===y.length?"ff-two-arrows":""}`,onMouseEnter:R,onMouseLeave:g,style:{left:O.left+(w?4:0),top:O.top+(w?2:0),zIndex:f},children:u.map(({direction:o,menuOptions:r},n)=>t(e,{direction:o,onArrowClick:()=>(o=>{j===o?(A(""),h(!1)):(A(o),h(!0))})(o),menuOptions:r,isActive:j===o,variant:l,treeRowRef:p,onMenuOptionClick:b,menuOptionZIndex:m},n))}),document.body)]})};export{d as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './AddResourceButton.scss';
+import ArrowsButton from './ArrowsButton/ArrowsButton';
+import Icon from '../Icon';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { validateArrows, } from './type';
+import usePortalPosition from '../../hooks/usePortalPosition';
+const AddResourceButton = ({ id = 'AddModule', variant = 'primary', directionalArrow = [
+    {
+        direction: 'right',
+        menuOptions: [
+            {
+                label: 'Sub Module',
+                value: 'sub_module',
+                icon: '',
+                disable: false,
+                tooltipForOption: '',
+                tooltipPlacementForOption: undefined,
+            },
+        ],
+    },
+], zIndex = 1400, menuOptionZIndex = 1400, treeRowRef, onMenuOptionClick, isFromTree = false, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [positionArrowContainer, setPositionArrowContainer] = useState({
+        left: 0,
+        top: 0,
+    });
+    const [activeArrow, setActiveArrow] = useState('');
+    const arrowContainerRef = useRef(null);
+    const portalRef = useRef(null);
+    const validArrows = validateArrows(directionalArrow);
+    const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
+    const handleHover = () => {
+        setIsHovered(true);
+        const { positionX, positionY } = portalPosition(arrowContainerRef);
+        setPositionArrowContainer({ left: positionX, top: positionY });
+        if (treeRowRef?.current) {
+            const actionContainer = treeRowRef.current.querySelector('.table-tree-fn-row-action, .table-tree-row-action');
+            actionContainer?.classList.add('table-row-add-button');
+        }
+    };
+    const handleLeave = (e) => {
+        const nextTarget = e.relatedTarget;
+        const isInsideButton = arrowContainerRef.current?.contains(nextTarget);
+        const isInsidePortal = portalRef.current?.contains(nextTarget);
+        if (isInsideButton || isInsidePortal)
+            return;
+        setIsHovered(false);
+        setActiveArrow('');
+        if (treeRowRef?.current) {
+            const actionContainer = treeRowRef.current.querySelector('.table-tree-fn-row-action, .table-tree-row-action');
+            actionContainer?.classList.remove('table-row-add-button');
+        }
+    };
+    const handleArrowClick = (direction) => {
+        if (activeArrow === direction) {
+            setActiveArrow('');
+            setIsHovered(false);
+        }
+        else {
+            setActiveArrow(direction);
+            setIsHovered(true);
+        }
+    };
+    const getArrowButtonClass = () => {
+        const directions = validArrows
+            .map((arrow) => arrow.direction)
+            .sort()
+            .join('-');
+        const arrowCountClass = validArrows.length === 2 ? 'ff-two-arrows' : '';
+        return `ff-${directions} ${arrowCountClass}`;
+    };
+    return (_jsxs("div", { id: id, ref: arrowContainerRef, className: `${isFromTree ? 'ff-add-button-tree' : 'ff-add-button-container'} ${isHovered ? `ff-hovered-add-button--${variant}` : ''}`, onMouseEnter: handleHover, onMouseLeave: handleLeave, children: [_jsx("span", { className: "ff-add-button", children: _jsx(Icon, { name: "plus_icon", width: 16, height: 16, className: isHovered
+                        ? `ff-hovered-add-icon--${variant}`
+                        : `ff-add-icon--${variant}` }) }), isHovered &&
+                createPortal(_jsx("div", { ref: portalRef, id: "portal-123", className: `ff-arrow-buttons-container ${getArrowButtonClass()}`, onMouseEnter: handleHover, onMouseLeave: handleLeave, style: {
+                        left: positionArrowContainer.left + (isFromTree ? 4 : 0),
+                        top: positionArrowContainer.top + (isFromTree ? 2 : 0),
+                        zIndex,
+                    }, children: directionalArrow.map(({ direction, menuOptions }, index) => (_jsx(ArrowsButton, { direction: direction, onArrowClick: () => handleArrowClick(direction), menuOptions: menuOptions, isActive: activeArrow === direction, variant: variant, treeRowRef: treeRowRef, onMenuOptionClick: onMenuOptionClick, menuOptionZIndex: menuOptionZIndex }, index))) }), document.body)] }));
+};
+export default AddResourceButton;
+//# sourceMappingURL=AddResourceButton.js.map

package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.js

@@ -1 +1,15 @@
-import{jsx as o}from"react/jsx-runtime";import n from"../../../_virtual/index.js";import"./ArrowsButton.scss.js";import t from"../../MenuOption/MenuOption.js";import{useRef as r}from"react";const e=({direction:e,menuOptions:i,onArrowClick:c,treeRowRef:s,onMenuOptionClick:u,menuOptionZIndex:d})=>{const m=r(null);return o("div",{children:o("button",{className:n("ff-arrow-button",`ff-arrow-button--${e}`),onClick:c,children:o("span",{ref:m,children:o(t,{iconName:`arrows_${e}_icon`,options:i,dropdownPlacement:e,iconSize:12,iconButtonSize:24,iconButtonBorderRadius:3,onOptionClick:u,treeRowRef:s,zIndex:d,isAddResourceButton:!0})})})})};export{e as default};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import './ArrowsButton.scss';
+import MenuOption from '../../MenuOption/MenuOption';
+import { useRef } from 'react';
+const ArrowsButton = ({ direction, menuOptions, onArrowClick, treeRowRef, onMenuOptionClick, menuOptionZIndex, }) => {
+    const getIconName = () => {
+        return `arrows_${direction}_icon`;
+    };
+    const menuOptionRef = useRef(null);
+    const isAddResourceButton = true;
+    return (_jsx("div", { children: _jsx("button", { className: classNames('ff-arrow-button', `ff-arrow-button--${direction}`), onClick: onArrowClick, children: _jsx("span", { ref: menuOptionRef, children: _jsx(MenuOption, { iconName: getIconName(), options: menuOptions, dropdownPlacement: direction, iconSize: 12, iconButtonSize: 24, iconButtonBorderRadius: 3, onOptionClick: onMenuOptionClick, treeRowRef: treeRowRef, zIndex: menuOptionZIndex, isAddResourceButton: isAddResourceButton }) }) }) }));
+};
+export default ArrowsButton;
+//# sourceMappingURL=ArrowsButton.js.map

package/lib/components/AddResourceButton/type.js

@@ -1 +1,27 @@
-import{checkEmpty as o}from"../../utils/checkEmpty/checkEmpty.js";const t=t=>o(t)?[{direction:null,menuOptions:[{label:"Sub Module",value:"sub_module",icon:"",disable:!1,tooltipForOption:"",tooltipPlacementForOption:void 0}]}]:t;export{t as validateArrows};
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+/**
+ * Utility function to validate an array of directional arrows.
+ * Ensures there is at least one valid arrow in the array.
+ * If the array is empty, it returns a default arrow object.
+ */
+export const validateArrows = (arrows) => {
+    if (checkEmpty(arrows)) {
+        return [
+            {
+                direction: null,
+                menuOptions: [
+                    {
+                        label: 'Sub Module',
+                        value: 'sub_module',
+                        icon: '',
+                        disable: false,
+                        tooltipForOption: '',
+                        tooltipPlacementForOption: undefined,
+                    },
+                ],
+            },
+        ];
+    }
+    return arrows;
+};
+//# sourceMappingURL=type.js.map

package/lib/components/AiToggle/AiToggle.js

@@ -1 +1,21 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import"./AiToggle.scss.js";import i from"../Typography/Typography.js";import t from"../../_virtual/index.js";const s=({onChange:s,disabled:c,checked:l=!1,id:o="toggle",path:f})=>a("div",{className:"ff--ai-switch-container",children:[e("input",{className:"ff--ai-switch-checkbox",id:`ff-toggle-${o}`,type:"checkbox",disabled:!!c,onChange:a=>{s&&s(a)},checked:l}),e("label",{className:t("ff--ai-switch-label",{"ff--ai-switch-label--disabled":c}),htmlFor:`ff-toggle-${o}`,children:e("span",{className:"ff--ai-switch-content",children:a("span",{className:"ff--ai-switch-content",children:[e(i,{className:t("ff--ai-switch-typography",{left:l,right:!l}),as:"div",fontWeight:"bold",fontSize:18,color:l?"var(--base-bg-color)":"var(--ff-ai-toggle-text-color)",children:"AI"}),e("img",{className:"ff--ai-switch-image",src:f,alt:"AI image"})]})})})]});export{s as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './AiToggle.scss';
+import Typography from '../Typography';
+import classNames from 'classnames';
+const AiToggle = ({ onChange, disabled, checked = false, id = 'toggle', path, }) => {
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (_jsxs("div", { className: "ff--ai-switch-container", children: [_jsx("input", { className: "ff--ai-switch-checkbox", id: `ff-toggle-${id}`, type: "checkbox", disabled: !!disabled, onChange: handleChange, checked: checked }), _jsx("label", { className: classNames(`ff--ai-switch-label`, {
+                    'ff--ai-switch-label--disabled': disabled,
+                }), htmlFor: `ff-toggle-${id}`, children: _jsx("span", { className: "ff--ai-switch-content", children: _jsxs("span", { className: "ff--ai-switch-content", children: [_jsx(Typography, { className: classNames('ff--ai-switch-typography', {
+                                    left: checked,
+                                    right: !checked,
+                                }), as: "div", fontWeight: "bold", fontSize: 18, color: checked
+                                    ? 'var(--base-bg-color)'
+                                    : 'var(--ff-ai-toggle-text-color)', children: "AI" }), _jsx("img", { className: "ff--ai-switch-image", src: path, alt: "AI image" })] }) }) })] }));
+};
+export default AiToggle;
+//# sourceMappingURL=AiToggle.js.map

package/lib/components/AllProjectsDropdown/AllProjectsDropdown.js

@@ -1 +1,141 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{useState as o,useRef as i,useEffect as a}from"react";import c from"../Icon/Icon.js";import s from"../Typography/Typography.js";import{truncateText as r,isTextTruncated as t}from"../../utils/truncateText/truncateText.js";import"./AllProjectsDropdown.scss.js";import n from"../../_virtual/index.js";import d from"../Tooltip/Tooltip.js";import p from"../../hooks/useClickOutside.js";import f from"../Search/Search.js";import{checkEmpty as m}from"../../utils/checkEmpty/checkEmpty.js";const h=({onClick:h=()=>{},onMenuClick:j=()=>{},options:u,selectedOption:b={label:"All Projects",value:"All Projects",iconName:"all_projects"},selected:v=!1,placeholder:N,disabled:g=!1})=>{const[w,k]=o(!1),[x,C]=o(!1),[T,y]=o(b),E=i(null),[P,_]=o(u),[M,S]=o(null),A=i(null),[H,L]=o(""),[I,O]=o(v);a(()=>{P!==u&&_(u)},[u]),a(()=>{v||O(!1)},[v]),a(()=>{b&&y(b)},[b]);const z=()=>{w&&k(!1)},D=e=>{g||(y(e),z(),h(e),L(""),_(u)),C(!1),k(!1)};return p(E,()=>C(!1),[A]),e("div",{className:n("ff-all-project",{"ff-all-project--disabled":g}),ref:A,onClick:()=>{g||(w&&k(!1),I?C(!x):O(!0)),L(""),_(u)},onMouseEnter:()=>{g||k(!0),g||v||k(!0)},onMouseLeave:()=>{if(!g){const e=setTimeout(()=>{z()},250);S(e)}},children:[l("div",{className:n("ff-all-project-dropdown",{"ff-all-project-dropdown--selected":v,"ff-all-project-dropdown--disabled":g}),children:e("div",{className:n("ff-all-project-container"),children:[l(s,{as:"div",lineHeight:"18px",fontSize:12,fontWeight:v?"semi-bold":"regular",className:n("projects-label"),onClick:j,children:T.label.length<=12?T.label:r(T?.label,12)}),e("div",{className:n("label-icon"),children:[l("div",{className:"icon-click-layer"}),l(c,{name:w||x?"arrows_top_icon":"arrows_down_icon",color:g?"var(--disabled-icon-color)":"var(--primary-icon-color)",height:8,width:8,hoverEffect:!1})]})]})}),(w||x)&&!g&&e("div",{className:n("ff-projects-dropdown"),ref:E,onMouseEnter:()=>{null!==M&&(clearTimeout(M),S(null))},children:[l("div",{className:"ff-dropdown-search-container",onClick:e=>e.stopPropagation(),children:l(f,{onSearch:e=>{if(!g)if(L(e),m(e))L(""),_(u);else{const l=u[0]??{label:"",value:"",iconName:""},o=u.slice(1).filter(l=>l.label.toLowerCase().includes(e.toLowerCase()));_([l,...o])}},value:H,isExpand:!0,onClose:()=>{},onExpand:()=>{},showClose:!1,placeholder:N,disabled:g,showToaster:!1})}),l("div",{className:n("option-card"),children:P.map((o,i)=>0===i&&e("div",{onClick:e=>{e.stopPropagation(),D(o)},className:n("ff-projects-options",{"ff-selected-option":b.label===o.label,"ff-option-disabled":g}),children:[l("div",{className:n("ff-projects-icons"),children:l(c,{name:o.iconName,height:12,width:12})}),l(s,{as:"div",lineHeight:"30px",className:"ff-projects-label",children:o.label},i)]},i))}),l("div",{children:1===P.length&&l("div",{className:"ff-no-data-found",children:"-No Projects-"})}),l("div",{className:n("option-card",""+(P.length>4?"scroll":"")),children:P.map((o,i)=>i>0&&e("div",{onClick:e=>{e.stopPropagation(),D(o)},className:n("ff-projects-options",{"ff-selected-option":b.label===o.label,"ff-option-disabled":g}),children:[l("div",{className:n("ff-projects-icons"),children:l(c,{name:o.iconName,height:12,width:12})}),l(s,{as:"div",lineHeight:"30px",className:"ff-projects-label",children:l(d,{title:t(o.label,165,"pixel")?o.label:"",children:r(o.label,165,"pixel")})},i)]},i))})]})]})};export{h as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
+import './AllProjectsDropdown.scss';
+import classNames from 'classnames';
+import Tooltip from '../Tooltip';
+import useClickOutside from '../../hooks/useClickOutside';
+import Search from '../Search';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const AllProjectsDropdown = ({ onClick = () => { }, onMenuClick = () => { }, options, selectedOption = {
+    label: 'All Projects',
+    value: 'All Projects',
+    iconName: 'all_projects',
+}, selected = false, placeholder, disabled = false, }) => {
+    const [showOptions, setShowOptions] = useState(false);
+    const [showClicked, setShowClicked] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState(selectedOption);
+    const optionsRef = useRef(null);
+    const [optionsList, setOptionsList] = useState(options);
+    // ⇩⇩⇩ Updated: use actual return type of setTimeout (works in Node & DOM) ⇩⇩⇩
+    const [closeTimeout, setCloseTimeout] = useState(null);
+    // ⇧⇧⇧ Updated: use actual return type of setTimeout (works in Node & DOM) ⇧⇧⇧
+    const containerRef = useRef(null);
+    const [searchValue, setSearchValue] = useState('');
+    const [isSecondClickFromOtherTab, setIsSecondClickFromOtherTab] = useState(selected);
+    useEffect(() => {
+        if (optionsList !== options) {
+            setOptionsList(options);
+        }
+    }, [options]);
+    useEffect(() => {
+        if (!selected) {
+            setIsSecondClickFromOtherTab(false);
+        }
+    }, [selected]);
+    useEffect(() => {
+        if (selectedOption) {
+            setSelectedOptions(selectedOption);
+        }
+    }, [selectedOption]);
+    const closeOptions = () => {
+        if (showOptions) {
+            setShowOptions(false);
+        }
+    };
+    const handleMouseEnter = () => {
+        if (!disabled) {
+            setShowOptions(true);
+        }
+        if (!disabled && !selected) {
+            setShowOptions(true);
+        }
+    };
+    const handleClick = () => {
+        if (!disabled) {
+            if (showOptions) {
+                setShowOptions(false);
+            }
+            if (!isSecondClickFromOtherTab) {
+                setIsSecondClickFromOtherTab(true);
+            }
+            else {
+                setShowClicked(!showClicked);
+            }
+        }
+        setSearchValue('');
+        setOptionsList(options);
+    };
+    const handleMouseLeave = () => {
+        if (!disabled) {
+            const timeout = setTimeout(() => {
+                closeOptions();
+            }, 250);
+            setCloseTimeout(timeout);
+        }
+    };
+    const dropDownMouseEnter = () => {
+        if (closeTimeout !== null) {
+            clearTimeout(closeTimeout);
+            setCloseTimeout(null);
+        }
+    };
+    const handleSelectOption = (option) => {
+        if (!disabled) {
+            setSelectedOptions(option);
+            closeOptions();
+            onClick(option);
+            setSearchValue('');
+            setOptionsList(options);
+        }
+        setShowClicked(false);
+        setShowOptions(false);
+    };
+    const handleSearch = (query) => {
+        if (!disabled) {
+            setSearchValue(query);
+            if (!checkEmpty(query)) {
+                const staticItem = options[0] ?? { label: '', value: '', iconName: '' };
+                const filterData = options
+                    .slice(1)
+                    .filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));
+                setOptionsList([staticItem, ...filterData]);
+            }
+            else {
+                setSearchValue('');
+                setOptionsList(options);
+            }
+        }
+    };
+    useClickOutside(optionsRef, () => setShowClicked(false), [containerRef]);
+    return (_jsxs("div", { className: classNames('ff-all-project', {
+            'ff-all-project--disabled': disabled,
+        }), ref: containerRef, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { className: classNames('ff-all-project-dropdown', {
+                    ['ff-all-project-dropdown--selected']: selected,
+                    ['ff-all-project-dropdown--disabled']: disabled,
+                }), children: _jsxs("div", { className: classNames('ff-all-project-container'), children: [_jsx(Typography, { as: 'div', lineHeight: '18px', fontSize: 12, fontWeight: selected ? 'semi-bold' : 'regular', className: classNames('projects-label'), onClick: onMenuClick, children: selectedOptions.label.length <= 12
+                                ? selectedOptions.label
+                                : truncateText(selectedOptions?.label, 12) }), _jsxs("div", { className: classNames('label-icon'), children: [_jsx("div", { className: "icon-click-layer" }), _jsx(Icon, { name: showOptions || showClicked
+                                        ? 'arrows_top_icon'
+                                        : 'arrows_down_icon', color: disabled
+                                        ? 'var(--disabled-icon-color)'
+                                        : 'var(--primary-icon-color)', height: 8, width: 8, hoverEffect: false })] })] }) }), (showOptions || showClicked) && !disabled && (_jsxs("div", { className: classNames('ff-projects-dropdown'), ref: optionsRef, onMouseEnter: dropDownMouseEnter, children: [_jsx("div", { className: "ff-dropdown-search-container", onClick: (e) => e.stopPropagation(), children: _jsx(Search, { onSearch: handleSearch, value: searchValue, isExpand: true, onClose: () => { }, onExpand: () => { }, showClose: false, placeholder: placeholder, disabled: disabled, showToaster: false }) }), _jsx("div", { className: classNames('option-card'), children: optionsList.map((option, index) => index === 0 && (_jsxs("div", { onClick: (e) => {
+                                e.stopPropagation();
+                                handleSelectOption(option);
+                            }, className: classNames('ff-projects-options', {
+                                ['ff-selected-option']: selectedOption.label === option.label,
+                                ['ff-option-disabled']: disabled,
+                            }), children: [_jsx("div", { className: classNames('ff-projects-icons'), children: _jsx(Icon, { name: option.iconName, height: 12, width: 12 }) }), _jsx(Typography, { as: 'div', lineHeight: '30px', className: "ff-projects-label", children: option.label }, index)] }, index))) }), _jsx("div", { children: optionsList.length === 1 && (_jsx("div", { className: "ff-no-data-found", children: "-No Projects-" })) }), _jsx("div", { className: classNames('option-card', `${optionsList.length > 4 ? 'scroll' : ''}`), children: optionsList.map((option, index) => index > 0 && (_jsxs("div", { onClick: (e) => {
+                                e.stopPropagation();
+                                handleSelectOption(option);
+                            }, className: classNames('ff-projects-options', {
+                                ['ff-selected-option']: selectedOption.label === option.label,
+                                ['ff-option-disabled']: disabled,
+                            }), children: [_jsx("div", { className: classNames('ff-projects-icons'), children: _jsx(Icon, { name: option.iconName, height: 12, width: 12 }) }), _jsx(Typography, { as: 'div', lineHeight: '30px', className: "ff-projects-label", children: _jsx(Tooltip, { title: isTextTruncated(option.label, 165, 'pixel')
+                                            ? option.label
+                                            : '', children: truncateText(option.label, 165, 'pixel') }) }, index)] }, index))) })] }))] }));
+};
+export default AllProjectsDropdown;
+//# sourceMappingURL=AllProjectsDropdown.js.map

package/lib/components/AnimatedSetting/AnimatedSetting.js

@@ -1 +1,33 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as r,useRef as e,useEffect as i}from"react";import o from"../Icon/iconList.js";const n=r(({name:r,height:n=30,width:c=30,path:a="",onClick:l,color:s="var(--brand-color)",hoverEffect:d=!1,className:h="",disabled:u=!1,variant:m="light",isSelected:p=!1,x:f,y:x,tabIndex:g=-1,...b},v)=>{if(!o[r])return null;const w=e(null);i(()=>{w.current&&(void 0!==f&&w.current.setAttribute("x",String(f)),void 0!==x&&w.current.setAttribute("y",String(x)))},[f,x]);const y={ref:v,onClick:u?void 0:l,style:{height:`${n}px`,width:`${c}px`,cursor:u?"not-allowed":"pointer",opacity:u?.3:1},tabIndex:g,...b};return t("span",{...y,children:t("img",{height:n,width:c,src:a,alt:""})})});export{n as default};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import Components from '../Icon/iconList';
+const AnimatedSetting = forwardRef(({ name, height = 30, width = 30, path = '', onClick, color = 'var(--brand-color)', // Default color
+hoverEffect = false, className = '', disabled = false, variant = 'light', isSelected = false, x, y, tabIndex = -1, ...props }, ref) => {
+    const IconComponent = Components[name];
+    if (!IconComponent)
+        return null;
+    const iconRef = useRef(null);
+    useEffect(() => {
+        if (iconRef.current) {
+            if (x !== undefined)
+                iconRef.current.setAttribute('x', String(x));
+            if (y !== undefined)
+                iconRef.current.setAttribute('y', String(y));
+        }
+    }, [x, y]);
+    const baseProps = {
+        ref,
+        onClick: disabled ? undefined : onClick,
+        style: {
+            height: `${height}px`,
+            width: `${width}px`,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.3 : 1, // Reduce opacity when disabled
+        },
+        tabIndex,
+        ...props,
+    };
+    return (_jsx("span", { ...baseProps, children: _jsx("img", { height: height, width: width, src: path, alt: "" }) }));
+});
+export default AnimatedSetting;
+//# sourceMappingURL=AnimatedSetting.js.map