pixel-react 1.0.0 → 1.0.2

package/lib/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.2"}
+{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.stories.tsx","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.stories.tsx","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.stories.tsx","../src/utils/debounce/debounce.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/find/findandinsert.stories.tsx","../src/utils/find/findandinsert.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/throttle/throttle.stories.tsx","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.3"}

package/lib/utils/compareArrays/compareArrays.d.ts

@@ -0,0 +1,11 @@
+export type AnyObject = Record<string, unknown>;
+/**
+ * Compare two arrays for equality.
+ * This function checks if both arrays contain the same elements in the same order,
+ * including nested structures.
+ *
+ * @param arr1 - The first array to compare.
+ * @param arr2 - The second array to compare.
+ * @returns - A boolean indicating if the arrays are equal.
+ */
+export declare const compareArrays: (arr1: unknown[], arr2: unknown[]) => boolean;

package/lib/utils/compareArrays/compareArrays.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (arr1: unknown[], arr2: unknown[]) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/compareObjects/compareObjects.d.ts

@@ -0,0 +1,2 @@
+export type AnyObject = Record<string, unknown>;
+export declare const compareObjects: (obj1: AnyObject | null, obj2: AnyObject | null) => boolean;

package/lib/utils/compareObjects/compareObjects.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (obj1: import("./compareObjects").AnyObject | null, obj2: import("./compareObjects").AnyObject | null) => boolean;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/debounce/debounce.d.ts

@@ -0,0 +1,6 @@
+type Callback = (...args: any[]) => void;
+export interface DebouncedFunction extends Function {
+    cancel: () => void;
+}
+export declare const debounce: (func: Callback, delay: number) => DebouncedFunction;
+export {};

package/lib/utils/debounce/debounce.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, delay: number) => import("./debounce").DebouncedFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/find/findAndInsert.d.ts

@@ -0,0 +1,7 @@
+export type AnyObject = {
+    id: number;
+    [key: string]: any;
+};
+export declare function findAndInsert<T extends AnyObject>(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): {
+    updatedArray: T[];
+} | null;

package/lib/utils/find/findAndInsert.stories.d.ts

@@ -0,0 +1,7 @@
+import { findAndInsert } from './findAndInsert';
+declare const _default: {
+    title: string;
+    component: typeof findAndInsert;
+};
+export default _default;
+export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/throttle/throttle.d.ts

@@ -0,0 +1,6 @@
+type Callback = (...args: any[]) => void;
+export interface ThrottledFunction extends Function {
+    cancel: () => void;
+}
+export declare const throttle: (func: Callback, limit: number) => ThrottledFunction;
+export {};

package/lib/utils/throttle/throttle.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: (func: (...args: any[]) => void, limit: number) => import("./throttle").ThrottledFunction;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -10,7 +10,9 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/preset-react": "^7.25.9",
     "@chromatic-com/storybook": "^2.0.2",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",

package/rollup.config.mjs

@@ -4,12 +4,10 @@ import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import dts from 'rollup-plugin-dts';
-import react from '@vitejs/plugin-react';
+import { babel } from '@rollup/plugin-babel'; // Import Babel plugin
 import svgrPlugin from 'vite-plugin-svgr';
 import { createRequire } from 'node:module';
 
-// This is required to read package.json file when
-// using Native ES modules in Node.js
 const requireFile = createRequire(import.meta.url);
 const packageJson = requireFile('./package.json');
 
@@ -34,11 +32,15 @@ export default [
       peerDepsExternal(),
       resolve(),
       commonjs(),
-      typescript(), // Ensure tsconfig.json targets ESM
+      typescript(),
       postcss({
         extensions: ['.scss'],
       }),
-      react(),
+      babel({
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'bundled',
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      }), // Use Babel to handle JSX instead of Vite React
       svgrPlugin({
         svgrOptions: {
           icon: true,

package/src/assets/icons/filter.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12.7145 0.400147H2.8385C2.43037 0.399936 2.03133 0.520731 1.69184 0.747262C1.35234 0.973792 1.08763 1.29589 0.931152 1.67284C0.774679 2.04979 0.733473 2.46466 0.812743 2.86503C0.892012 3.26539 1.0882 3.63326 1.3765 3.92215L5.6195 8.16515V13.1001C5.62058 13.3566 5.69752 13.6071 5.84062 13.82C5.98373 14.0328 6.18661 14.1986 6.42373 14.2964C6.66085 14.3943 6.9216 14.4197 7.17317 14.3697C7.42475 14.3196 7.65589 14.1963 7.8375 14.0151L9.4565 12.4001C9.60732 12.2508 9.7269 12.0728 9.80828 11.8768C9.88965 11.6807 9.9312 11.4704 9.9305 11.2581V8.15815L14.1765 3.91615C14.3675 3.72539 14.5189 3.4987 14.6219 3.24914C14.7249 2.99959 14.7774 2.73211 14.7765 2.46215C14.7754 1.91559 14.5579 1.39173 14.1714 1.00526C13.7849 0.618789 13.2611 0.401204 12.7145 0.400147ZM13.4095 3.15715L9.1715 7.40015C9.07035 7.50015 8.99014 7.61931 8.93554 7.75065C8.88094 7.882 8.85305 8.02291 8.8535 8.16515V11.2651C8.85142 11.4076 8.79572 11.544 8.6975 11.6471L7.0815 13.2641C7.04817 13.2903 7.00843 13.307 6.96643 13.3126C6.92444 13.3182 6.88171 13.3124 6.8427 13.2959C6.8037 13.2793 6.76984 13.2526 6.74466 13.2186C6.71947 13.1845 6.70388 13.1443 6.6995 13.1021V8.16515C6.69983 8.02382 6.67186 7.88385 6.61724 7.75349C6.56263 7.62314 6.48247 7.50504 6.3815 7.40615L2.1445 3.15715C2.00588 3.01997 1.91124 2.84462 1.87265 2.65346C1.83406 2.46229 1.85326 2.26396 1.92782 2.08375C2.00237 1.90354 2.12889 1.7496 2.29126 1.64157C2.45362 1.53354 2.64448 1.4763 2.8395 1.47715H12.7145C12.9095 1.4763 13.1004 1.53354 13.2627 1.64157C13.4251 1.7496 13.5516 1.90354 13.6262 2.08375C13.7007 2.26396 13.7199 2.46229 13.6814 2.65346C13.6428 2.84462 13.5481 3.01997 13.4095 3.15715Z"
+        fill="currentColor" stroke="currentColor" stroke-width="0.5" />
+</svg>

package/src/assets/styles/_colors.scss

@@ -76,6 +76,8 @@ $default-color: #747474;
 
 ///!-----------------------------------------------------------------------------------------------------
 
+
+
 $description-text: #d9d9d9;
 $ff-success: #079455;
 $ff-warning: #f79009;
@@ -140,6 +142,6 @@ $file-details-bg: #ffffff;
   --add-icon-hover-color: #{$add-icon-hover-color}; // TODO: Change the color variable name
   --arrows-button-border-color: #{$arrows-button-border-color}; // TODO: Change the color variable name
   --arrow-button-bg-color: #{$arrow-button-bg-color}; // TODO: Change the color variable name
-  --text-bg-highlight: #{$text-bg-highlight};
+  --text-bg-highlight:#{$text-bg-highlight};
   --slider-table-color: #{$slider-table-color};
 }

package/src/components/Icon/iconList.ts

@@ -28,6 +28,7 @@ import CheckMarkIcon from '../../assets/icons/check_mark.svg?react';
 import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
+import Filter from '../../assets/icons/filter.svg?react';
 
 //icons
 Components['delete'] = DeleteIcon;
@@ -58,5 +59,6 @@ Components['wrong_mark'] = WrongMarkIcon;
 Components['tick'] = Tick;
 Components['arrow_right'] = ArrowRight;
 Components['search'] = Search;
+Components['filter'] = Filter;
 
 export default Components;

package/src/components/MultiSelect/Dropdown.scss

@@ -10,25 +10,27 @@
   box-sizing: border-box;
   margin-block: 4px;
   max-height: 160px;
-  overflow-y: auto; // Change from scroll to auto to avoid arrow buttons
 
-  // WebKit scrollbar styles
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 40px;
-    border-radius: 12px 0px 0px 0px;
-    background: var(--description-text);
+  .ff-multiselect-options-wrapper {
+    max-height: 128px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 40px;
+      border-radius: 12px 0px 0px 0px;
+      background: var(--description-text);
 
-    &-track {
-      background: var(--ff-select-scroll-track-bg);
-    }
+      &-track {
+        background: var(--ff-select-scroll-track-bg);
+      }
 
-    &-thumb {
-      background: var(--description-text);
-      border-radius: 10px;
+      &-thumb {
+        background: var(--ff-select-scroll-thumb-color);
+        border-radius: 10px;
 
-      &:hover {
-        background: var(--ff-select-scroll-thumb-hove);
+        &:hover {
+          background: var(--ff-select-scroll-thumb-hover);
+        }
       }
     }
   }
@@ -53,7 +55,7 @@
 
     .dropdown-option-label {
       @extend .fontMd;
-      color: var(--pop-up-background-blur);
+      color: var(--ff-select-text-color);
     }
     &:hover {
       background-color: var(--hover-color);
@@ -63,4 +65,13 @@
   &:focus {
     outline: none;
   }
+  .select-button-container {
+    box-sizing: border-box;
+    width: 100%;
+    border-top: 1px solid var(--slider-table-color);
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }

package/src/components/MultiSelect/Dropdown.tsx

@@ -1,9 +1,10 @@
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useMemo } from 'react';
 import { dropdownDefaultCSSData, DropdownProps } from './dropdownTypes';
 
 import './Dropdown.scss';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import Button from '../Button';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -13,6 +14,8 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       searchedKeyword = '',
       dropdownPosition = {},
       zIndex,
+      withSelectButton,
+      onSelect,
     },
     ref
   ) => {
@@ -23,19 +26,29 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       : [];
     const { verticalMargin, optionHeight, maxDropdownHeight } =
       dropdownDefaultCSSData;
-    const dropdownHeight = Math.min(
-      filteredOptions.length * optionHeight,
-      maxDropdownHeight
-    );
-    const isEnoughBottomSpaceAvailable =
-      dropdownPosition.fromBottom >= dropdownHeight + verticalMargin;
 
-    const topPosition = isEnoughBottomSpaceAvailable
-      ? dropdownPosition.top
-      : dropdownPosition.top -
-        dropdownHeight -
-        dropdownPosition.selectHeight -
-        2 * verticalMargin;
+    const topPosition = useMemo(() => {
+      let calculatedDropdownHeight = Math.min(
+        filteredOptions.length * optionHeight,
+        maxDropdownHeight
+      );
+
+      if (filteredOptions.length < 5 && withSelectButton) {
+        calculatedDropdownHeight += 32;
+      }
+
+      const isEnoughSpaceAvailable =
+        dropdownPosition.fromBottom >=
+        calculatedDropdownHeight + verticalMargin;
+      const topPosition = isEnoughSpaceAvailable
+        ? dropdownPosition.top
+        : dropdownPosition.top -
+          calculatedDropdownHeight -
+          dropdownPosition.selectHeight -
+          2 * verticalMargin;
+
+      return topPosition;
+    }, [filteredOptions.length, withSelectButton, dropdownPosition]);
     const themeContext = useContext(ThemeContext);
     const currentTheme = themeContext?.currentTheme;
     return (
@@ -52,22 +65,32 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
           zIndex,
         }}
       >
-        {filteredOptions.length === 0 ? (
-          <div className="dropdown-option-container">
-            <p className="no-options">No Option</p>
-          </div>
-        ) : (
-          filteredOptions.map((info) => (
-            <div
-              role="option"
-              className={`dropdown-option-container`}
-              key={info.label}
-              onClick={() => handleOptionChange(info, !info.isChecked)}
-            >
-              <input type="checkbox" checked={info.isChecked} readOnly />
-              <span className="dropdown-option-label">{info.label}</span>
+        <div
+          className="ff-multiselect-options-wrapper"
+          style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
+        >
+          {filteredOptions.length === 0 ? (
+            <div className="dropdown-option-container ">
+              <p className="no-options">No Option</p>
             </div>
-          ))
+          ) : (
+            filteredOptions.map((info) => (
+              <div
+                role="option"
+                className={`dropdown-option-container`}
+                key={info.label}
+                onClick={() => handleOptionChange(info, !info.isChecked)}
+              >
+                <input type="checkbox" checked={info.isChecked} readOnly />
+                <span className="dropdown-option-label">{info.label}</span>
+              </div>
+            ))
+          )}
+        </div>
+        {withSelectButton && filteredOptions.length > 0 && (
+          <div className="select-button-container">
+            <Button label="Select" variant="tertiary" onClick={onSelect} />
+          </div>
         )}
       </div>
     );

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -22,17 +22,21 @@ export const Default: Story = {
   args: {
     ...defaultArgs,
     required: true,
+    withSelectButton: true,
+    onSelect: () => {
+      alert('selected');
+    },
     options: [
       { label: 'Apple', value: 'apple' },
       { label: 'Banana', value: 'banana' },
       { label: 'Cherry', value: 'cherry' },
       { label: 'Date', value: 'date' },
       { label: 'Grape', value: 'grape' },
-      { label: 'Kiwi', value: 'kiwi' },
-      { label: 'Mango', value: 'mango' },
-      { label: 'Orange', value: 'orange' },
-      { label: 'Peach', value: 'peach' },
-      { label: 'Strawberry', value: 'strawberry' },
+      // { label: 'Kiwi', value: 'kiwi' },
+      // { label: 'Mango', value: 'mango' },
+      // { label: 'Orange', value: 'orange' },
+      // { label: 'Peach', value: 'peach' },
+      // { label: 'Strawberry', value: 'strawberry' },
     ],
     // selectedOptions: [{ label: 'Apple', value: 'apple' }],
   },

package/src/components/MultiSelect/MultiSelect.tsx

@@ -38,6 +38,8 @@ const MultiSelect = ({
   required = false,
   disabled = false,
   errorMessage = 'Fill this field',
+  withSelectButton = false,
+  onSelect = () => {},
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -249,6 +251,8 @@ const MultiSelect = ({
               options={allOptions}
               dropdownPosition={dropdownPosition}
               zIndex={zIndex}
+              withSelectButton={withSelectButton}
+              onSelect={onSelect}
             />,
             document.body
           )}

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -14,6 +14,8 @@ interface MultiSelectProps {
   zIndex?: number;
   required?: boolean;
   errorMessage?: string;
+  withSelectButton?: boolean;
+  onSelect?: () => void;
 }
 
 export { Option, MultiSelectProps };

package/src/components/MultiSelect/dropdownTypes.ts

@@ -12,4 +12,6 @@ export interface DropdownProps {
   searchedKeyword: undefined | string;
   dropdownPosition: any;
   zIndex: number;
+  withSelectButton?: boolean;
+  onSelect?: () => void;
 }

package/src/components/Select/components/Dropdown/Dropdown.tsx

@@ -1,10 +1,12 @@
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { DropDownListProps, dropdownDefaultCSSData } from './dropdownTypes';
 import useClickOutside from '../../../../hooks/useClickOutside';
 import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
 import './Dropdown.scss';
 import Typography from '../../../Typography';
 import ffid from '../../../../utils/ffID/ffid';
+import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
 
 const Dropdown = ({
   onSelectBlur,
@@ -14,6 +16,8 @@ const Dropdown = ({
   optionZIndex = 100,
   inputRef,
 }: DropDownListProps) => {
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
   const optionsWrapperRef = useRef<HTMLDivElement>(null);
   useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
 
@@ -55,7 +59,7 @@ const Dropdown = ({
         ref={optionsWrapperRef}
         // inline css required due to multiple overlay scenarios are present
         style={updateDropdownPosition()}
-        className="ff-select-options-wrapper"
+        className={classNames('ff-select-options-wrapper', currentTheme)}
       >
         {!checkEmpty(options) ? (
           options.map((option) => (
@@ -63,7 +67,7 @@ const Dropdown = ({
               key={ffid()}
               as="div"
               lineHeight="30px"
-              className="ff-select-option"
+              className={classNames('ff-select-option', currentTheme)}
               color="var(--ff-select-text-color)"
               onClick={() => onSelectOptionSelector(option)}
             >

package/src/components/Tooltip/Tooltip.scss

@@ -1,4 +1,3 @@
-@import '../../assets/styles/colors';
 @import '../../assets/styles/fonts';
 
 .ff-tooltip-container {

package/src/index.ts

@@ -15,7 +15,7 @@ import Select from './components/Select/Select';
 import TextArea from './components/TextArea';
 
 import MenuOption from './components/MenuOption';
-import Table from './components/Table';
+import Table from './components/Table/Table';
 
 import AddResourceButton from './components/AddResourceButton';
 import DonutChart from './components/Charts/DonutChart';
@@ -26,7 +26,6 @@ import Typography from './components/Typography';
 import useTheme from './hooks/useTheme';
 import Form from './components/Form';
 
-
 import InputWithDropdown from './components/InputWithDropdown';
 import RadioButton from './components/RadioButton';
 import RadioGroup from './components/RadioGroup';
@@ -35,7 +34,7 @@ import TableTree from './components/TableTree';
 import Tabs from './components/Tabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
-import Search from './components/Search'
+import Search from './components/Search/Search';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -69,11 +68,9 @@ export {
   useTheme,
   InputWithDropdown,
   Table,
-
   RadioButton,
   RadioGroup,
   Form,
-
   MiniModal,
   Container,
   Row,

package/src/utils/checkEmpty/checkEmpty.stories.tsx

@@ -1,7 +1,7 @@
 import { checkEmpty } from './checkEmpty';
 
 export default {
-  title: 'Utils/isEmptyValue',
+  title: 'Utils/checkEmpty',
   component: checkEmpty,
 };
 

package/src/utils/checkEmpty/checkEmpty.ts

@@ -1,10 +1,24 @@
 type valueType = any;
 
-export const checkEmpty = (value: valueType) => {
-  if (!value) {
-    return true;
-  } else if (typeof value === 'object') {
-    if (Array.isArray(value)) return value.length === 0;
-    else return Object.keys(value).length === 0;
-  } else return false;
+export const checkEmpty = (value: valueType): boolean => {
+  // Check for null or undefined
+  if (value == null) return true;
+
+  // Check for strings
+  if (typeof value === 'string') return value.trim().length === 0;
+
+  // Check for arrays
+  if (Array.isArray(value)) return value.length === 0;
+
+  // Check for objects
+  if (typeof value === 'object') {
+    // Handle Map and Set
+    if (value instanceof Map || value instanceof Set) return value.size === 0;
+
+    // Handle regular objects
+    return Object.keys(value).length === 0;
+  }
+
+  // For all other types (numbers, booleans, etc.), return false as they are not "empty"
+  return false;
 };