pixel-react 1.5.3 → 1.5.4

package/src/components/AddResourceButton/type.ts

@@ -1,92 +1,92 @@
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-/**
- * Describes the directional arrow used in the Add Resource Button component.
- * The arrow specifies its direction (top, right, down) and associated menu options.
- *
- * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
- * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
- * If null, no menu options will be shown.
- */
-export interface DirectionalArrow {
-  direction: string | 'top' | 'right' | 'down';
-  menuOptions: {
-    label: string;
-    value: string | string[];
-    icon?: string;
-    disable?: boolean;
-  }[];
-}
-
-/**
- * Props for the Add Resource Button component.
- *
- * @property {string} [id] - An optional unique identifier for the Add Resource Button.
- * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
- * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
- * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
- */
-export interface AddResourceButtonProps {
-  id?: string;
-  variant?: 'primary' | 'secondary';
-  directionalArrow: {
-    /**
-     * direction option: 'top' | 'right' | 'down'
-     */
-    direction: string;
-    menuOptions: {
-      label: string;
-      value: string | string[];
-      icon?: string;
-      disable?: boolean;
-    }[];
-  }[];
-  zIndex?: number;
-}
-
-/**
- * Props for individual directional arrow buttons.
- *
- * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
- * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
- * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
- * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
- */
-export interface DirectionalArrowButtonProps {
-  direction: 'top' | 'right' | 'down';
-  menuOptions: {
-    label: string;
-    value: string | string[];
-    icon?: string;
-    disable?: boolean;
-  }[];
-  onArrowClick: () => void;
-  isActive: boolean;
-  variant?: 'primary' | 'secondary';
-}
-
-/**
- * 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: DirectionalArrow[]
-): DirectionalArrow[] => {
-  if (checkEmpty(arrows)) {
-    return [
-      {
-        direction: null as any,
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'sub_module',
-            icon: '',
-            disable: false,
-          },
-        ],
-      },
-    ];
-  }
-  return arrows;
-};
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+/**
+ * Describes the directional arrow used in the Add Resource Button component.
+ * The arrow specifies its direction (top, right, down) and associated menu options.
+ *
+ * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
+ * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
+ * If null, no menu options will be shown.
+ */
+export interface DirectionalArrow {
+  direction: string | 'top' | 'right' | 'down';
+  menuOptions: {
+    label: string;
+    value: string | string[];
+    icon?: string;
+    disable?: boolean;
+  }[];
+}
+
+/**
+ * Props for the Add Resource Button component.
+ *
+ * @property {string} [id] - An optional unique identifier for the Add Resource Button.
+ * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
+ * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
+ * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
+ */
+export interface AddResourceButtonProps {
+  id?: string;
+  variant?: 'primary' | 'secondary';
+  directionalArrow: {
+    /**
+     * direction option: 'top' | 'right' | 'down'
+     */
+    direction: string;
+    menuOptions: {
+      label: string;
+      value: string | string[];
+      icon?: string;
+      disable?: boolean;
+    }[];
+  }[];
+  zIndex?: number;
+}
+
+/**
+ * Props for individual directional arrow buttons.
+ *
+ * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
+ * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
+ * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
+ * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
+ */
+export interface DirectionalArrowButtonProps {
+  direction: 'top' | 'right' | 'down';
+  menuOptions: {
+    label: string;
+    value: string | string[];
+    icon?: string;
+    disable?: boolean;
+  }[];
+  onArrowClick: () => void;
+  isActive: boolean;
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * 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: DirectionalArrow[]
+): DirectionalArrow[] => {
+  if (checkEmpty(arrows)) {
+    return [
+      {
+        direction: null as any,
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: '',
+            disable: false,
+          },
+        ],
+      },
+    ];
+  }
+  return arrows;
+};

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -1,189 +1,189 @@
-@use '../../assets/styles/mixins';
-
-.ff-all-project {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  .ff-all-project-dropdown {
-    width: fit-content;
-    border-radius: 16px;
-    background-color: var(--ff-all-projects-default-color);
-    color: var(--expandable-menu-default-bg);
-    line-height: 18px;
-    @include mixins.center-content();
-    padding: 3px;
-    cursor: pointer;
-    &--selected {
-      background-color: var(--primary-icon-color);
-      border-radius: 20px;
-      .ff-all-project-container {
-        border-radius: 20px;
-        box-shadow: 0px 4px 4px 0px #00000040 inset;
-        background: linear-gradient(
-          90deg,
-          var(--brand-color) 0%,
-          var(--button-background-gradient-color) 100%
-        );
-        text-wrap-mode: nowrap;
-      }
-    }
-    &:not(.ff-all-project-dropdown--selected):hover {
-      .projects-label {
-        position: relative;
-        white-space: nowrap;
-        &:hover::after {
-          animation: oscillate-border-width 0.5s ease-in-out forwards;
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          top: 20px;
-          left: 0%;
-          width: 0%;
-          height: 2px;
-          background-color: var(--ff-app-header-menu-border-bottom-color);
-          border-radius: 4px;
-          transition: width 0.15s ease-in-out;
-        }
-      }
-    }
-    .ff-all-project-container {
-      display: flex;
-      padding: 4px;
-      gap: 4px;
-      justify-content: center;
-      text-wrap-mode: nowrap;
-      .label-icon {
-        height: 16px;
-        width: 16px;
-        @include mixins.center-content();
-      }
-    }
-  }
-  .ff-projects-dropdown {
-    width: 202px;
-    position: absolute;
-    top: 50px;
-    padding: 1px;
-    border: 0.5px solid var(--expandable-menu-default-bg);
-    border-radius: 4px;
-    background-color: var(--secondary-icon-color);
-    color: var(--primary-icon-color);
-    .ff-projects-search {
-      width: 99%;
-      margin-bottom: 1px;
-      input {
-        height: 30px;
-        width: inherit;
-        border-radius: 4px;
-        border-style: none;
-        &::placeholder {
-          padding-left: 28px;
-          font-size: 8px;
-          line-height: 12px;
-        }
-      }
-      span {
-        position: absolute;
-        top: 11px;
-        left: 8px;
-      }
-    }
-    .scroll {
-      max-height: 150px;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &::-webkit-scrollbar {
-        width: 2px;
-      }
-      &::-webkit-scrollbar-thumb {
-        background: var(--primary-icon-color);
-        border-radius: 2px;
-      }
-    }
-    .ff-all-projects-options {
-      @include mixins.center-content();
-      justify-content: flex-start;
-      gap: 4px;
-
-      .ff-projects-icons {
-        @include mixins.center-content();
-        height: 24px;
-        width: 24px;
-        svg {
-          path {
-            fill: var(--primary-icon-color);
-          }
-        }
-      }
-    }
-    .ff-all-projects-options.ff-selected-option,
-    .ff-all-projects-options:hover {
-      background-color: var(--primary-icon-color);
-      color: var(--secondary-icon-color);
-      svg {
-        path {
-          fill: var(--secondary-icon-color);
-        }
-      }
-    }
-    .option-card {
-      .ff-projects-options {
-        @include mixins.center-content();
-        justify-content: flex-start;
-        gap: 4px;
-        white-space: nowrap;
-        .ff-projects-icons {
-          @include mixins.center-content();
-          height: 24px;
-          width: 24px;
-          svg {
-            path {
-              fill: var(--primary-icon-color);
-            }
-          }
-        }
-      }
-      .ff-projects-options.ff-selected-option,
-      .ff-projects-options:hover {
-        background-color: var(--primary-icon-color);
-        color: var(--secondary-icon-color);
-        svg {
-          path {
-            fill: var(--secondary-icon-color);
-          }
-        }
-      }
-    }
-    .ff-selected-option {
-      @include mixins.center-content();
-      justify-content: flex-start;
-      gap: 4px;
-      background-color: var(--primary-icon-color);
-      color: var(--secondary-icon-color);
-      border-radius: 4px;
-      .ff-projects-icons {
-        svg {
-          path {
-            fill: var(--secondary-icon-color);
-          }
-        }
-      }
-    }
-  }
-}
-@keyframes oscillate-border-width {
-  0% {
-    width: 50%;
-    left: 25%;
-  }
-  50% {
-    width: 70%;
-    left: 15%;
-  }
-  100% {
-    width: 50%;
-    left: 25%;
-  }
-}
+@use '../../assets/styles/mixins';
+
+.ff-all-project {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  .ff-all-project-dropdown {
+    width: fit-content;
+    border-radius: 16px;
+    background-color: var(--ff-all-projects-default-color);
+    color: var(--expandable-menu-default-bg);
+    line-height: 18px;
+    @include mixins.center-content();
+    padding: 3px;
+    cursor: pointer;
+    &--selected {
+      background-color: var(--primary-icon-color);
+      border-radius: 20px;
+      .ff-all-project-container {
+        border-radius: 20px;
+        box-shadow: 0px 4px 4px 0px #00000040 inset;
+        background: linear-gradient(
+          90deg,
+          var(--brand-color) 0%,
+          var(--button-background-gradient-color) 100%
+        );
+        text-wrap-mode: nowrap;
+      }
+    }
+    &:not(.ff-all-project-dropdown--selected):hover {
+      .projects-label {
+        position: relative;
+        white-space: nowrap;
+        &:hover::after {
+          animation: oscillate-border-width 0.5s ease-in-out forwards;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          top: 20px;
+          left: 0%;
+          width: 0%;
+          height: 2px;
+          background-color: var(--ff-app-header-menu-border-bottom-color);
+          border-radius: 4px;
+          transition: width 0.15s ease-in-out;
+        }
+      }
+    }
+    .ff-all-project-container {
+      display: flex;
+      padding: 4px;
+      gap: 4px;
+      justify-content: center;
+      text-wrap-mode: nowrap;
+      .label-icon {
+        height: 16px;
+        width: 16px;
+        @include mixins.center-content();
+      }
+    }
+  }
+  .ff-projects-dropdown {
+    width: 202px;
+    position: absolute;
+    top: 50px;
+    padding: 1px;
+    border: 0.5px solid var(--expandable-menu-default-bg);
+    border-radius: 4px;
+    background-color: var(--secondary-icon-color);
+    color: var(--primary-icon-color);
+    .ff-projects-search {
+      width: 99%;
+      margin-bottom: 1px;
+      input {
+        height: 30px;
+        width: inherit;
+        border-radius: 4px;
+        border-style: none;
+        &::placeholder {
+          padding-left: 28px;
+          font-size: 8px;
+          line-height: 12px;
+        }
+      }
+      span {
+        position: absolute;
+        top: 11px;
+        left: 8px;
+      }
+    }
+    .scroll {
+      max-height: 150px;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      &::-webkit-scrollbar {
+        width: 2px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: var(--primary-icon-color);
+        border-radius: 2px;
+      }
+    }
+    .ff-all-projects-options {
+      @include mixins.center-content();
+      justify-content: flex-start;
+      gap: 4px;
+
+      .ff-projects-icons {
+        @include mixins.center-content();
+        height: 24px;
+        width: 24px;
+        svg {
+          path {
+            fill: var(--primary-icon-color);
+          }
+        }
+      }
+    }
+    .ff-all-projects-options.ff-selected-option,
+    .ff-all-projects-options:hover {
+      background-color: var(--primary-icon-color);
+      color: var(--secondary-icon-color);
+      svg {
+        path {
+          fill: var(--secondary-icon-color);
+        }
+      }
+    }
+    .option-card {
+      .ff-projects-options {
+        @include mixins.center-content();
+        justify-content: flex-start;
+        gap: 4px;
+        white-space: nowrap;
+        .ff-projects-icons {
+          @include mixins.center-content();
+          height: 24px;
+          width: 24px;
+          svg {
+            path {
+              fill: var(--primary-icon-color);
+            }
+          }
+        }
+      }
+      .ff-projects-options.ff-selected-option,
+      .ff-projects-options:hover {
+        background-color: var(--primary-icon-color);
+        color: var(--secondary-icon-color);
+        svg {
+          path {
+            fill: var(--secondary-icon-color);
+          }
+        }
+      }
+    }
+    .ff-selected-option {
+      @include mixins.center-content();
+      justify-content: flex-start;
+      gap: 4px;
+      background-color: var(--primary-icon-color);
+      color: var(--secondary-icon-color);
+      border-radius: 4px;
+      .ff-projects-icons {
+        svg {
+          path {
+            fill: var(--secondary-icon-color);
+          }
+        }
+      }
+    }
+  }
+}
+@keyframes oscillate-border-width {
+  0% {
+    width: 50%;
+    left: 25%;
+  }
+  50% {
+    width: 70%;
+    left: 15%;
+  }
+  100% {
+    width: 50%;
+    left: 25%;
+  }
+}