@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/SelectInput/SelectInputProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, useState, useCallback, useReducer, useEffect, createContext, useContext } from "react";
 const SelectInputContext = createContext({
   displayedOptions: [],
@@ -12,15 +12,9 @@ const SelectInputContext = createContext({
   },
   options: [],
   searchInput: "",
-  selectAll: {
-    label: ""
-  },
+  selectAll: { label: "" },
   selectAllGroup: false,
-  selectedData: {
-    allSelected: false,
-    selectedGroups: [],
-    selectedValues: []
-  },
+  selectedData: { allSelected: false, selectedGroups: [], selectedValues: [] },
   setIsDropdownVisible: () => {
   },
   setSearchInput: () => {
@@ -54,23 +48,32 @@ const SelectInputProvider = ({
     if (Array.isArray(options)) {
       return [];
     }
-    return Object.keys(options).filter((group) => options[group].every((groupOption) => currentValue.includes(groupOption.value)));
+    return Object.keys(options).filter(
+      (group) => options[group].every(
+        (groupOption) => currentValue.includes(groupOption.value)
+      )
+    );
   }, [currentValue, options]);
   const [displayedOptions, setDisplayedOptions] = useState(options);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [searchInput, setSearchInput] = useState("");
-  const handleDropDownVisible = useCallback((newValue) => {
-    setIsDropdownVisible(newValue);
-    if (newValue) {
-      onOpen?.();
-    }
-    if (!newValue && refSelect) {
-      refSelect.current?.focus();
-    }
-  }, [refSelect, onOpen]);
+  const handleDropDownVisible = useCallback(
+    (newValue) => {
+      setIsDropdownVisible(newValue);
+      if (newValue) {
+        onOpen?.();
+      }
+      if (!newValue && refSelect) {
+        refSelect.current?.focus();
+      }
+    },
+    [refSelect, onOpen]
+  );
   const allValues = useMemo(() => {
     if (!Array.isArray(options)) {
-      return Object.keys(options).flatMap((group) => options[group].filter((option) => !option.disabled));
+      return Object.keys(options).flatMap(
+        (group) => options[group].filter((option) => !option.disabled)
+      );
     }
     return options;
   }, [options]);
@@ -84,11 +87,7 @@ const SelectInputProvider = ({
     switch (action.type) {
       case "selectAll": {
         if (state.allSelected) {
-          return {
-            allSelected: false,
-            selectedGroups: [],
-            selectedValues: []
-          };
+          return { allSelected: false, selectedGroups: [], selectedValues: [] };
         }
         return {
           allSelected: true,
@@ -101,12 +100,20 @@ const SelectInputProvider = ({
           if (state.selectedGroups.includes(action.selectedGroup)) {
             return {
               allSelected: false,
-              selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.selectedGroup),
-              selectedValues: [...state.selectedValues].filter((selectedValue) => !options[action.selectedGroup].find((option) => option.value === selectedValue))
+              selectedGroups: state.selectedGroups.filter(
+                (selectedGroup) => selectedGroup !== action.selectedGroup
+              ),
+              selectedValues: [...state.selectedValues].filter(
+                (selectedValue) => !options[action.selectedGroup].find(
+                  (option) => option.value === selectedValue
+                )
+              )
             };
           }
           const newSelectedValues = [...state.selectedValues];
-          options[action.selectedGroup].map((option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+          options[action.selectedGroup].map(
+            (option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value)
+          );
           return {
             allSelected: newSelectedValues.length === numberOfOptions,
             selectedGroups: [...state.selectedGroups, action.selectedGroup],
@@ -120,14 +127,26 @@ const SelectInputProvider = ({
           if (state.selectedValues.includes(action.clickedOption.value)) {
             return {
               allSelected: false,
-              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.group) : [],
-              selectedValues: state.selectedValues.filter((val) => val !== action.clickedOption.value)
+              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter(
+                (selectedGroup) => selectedGroup !== action.group
+              ) : [],
+              selectedValues: state.selectedValues.filter(
+                (val) => val !== action.clickedOption.value
+              )
             };
           }
           return {
             allSelected: state.selectedValues.length + 1 === numberOfOptions,
-            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every((option) => [...state.selectedValues, action.clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups,
-            selectedValues: [...state.selectedValues, action.clickedOption.value]
+            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(
+              (option) => [
+                ...state.selectedValues,
+                action.clickedOption.value
+              ].includes(option.value) || option.disabled
+            ) ? [...state.selectedGroups, action.group] : state.selectedGroups,
+            selectedValues: [
+              ...state.selectedValues,
+              action.clickedOption.value
+            ]
           };
         }
         return {
@@ -137,11 +156,7 @@ const SelectInputProvider = ({
         };
       }
       case "clearAll": {
-        return {
-          allSelected: false,
-          selectedGroups: [],
-          selectedValues: []
-        };
+        return { allSelected: false, selectedGroups: [], selectedValues: [] };
       }
       case "update": {
         return {
@@ -149,9 +164,15 @@ const SelectInputProvider = ({
           selectedGroups: state.selectedGroups,
           selectedValues: state.selectedValues.filter((selectedValue) => {
             if (!Array.isArray(options)) {
-              return Object.keys(options).some((group) => options[group].some((option) => option.value === selectedValue && !option.disabled));
+              return Object.keys(options).some(
+                (group) => options[group].some(
+                  (option) => option.value === selectedValue && !option.disabled
+                )
+              );
             }
-            return options.some((option) => option.value === selectedValue && !option.disabled);
+            return options.some(
+              (option) => option.value === selectedValue && !option.disabled
+            );
           })
         };
       }
@@ -179,22 +200,37 @@ const SelectInputProvider = ({
       type: "reset"
     });
   }, [currentValue, selectedGroups]);
-  const providerValue = useMemo(() => ({
-    displayedOptions,
-    isDropdownVisible,
-    multiselect,
-    numberOfOptions,
-    onChange,
-    onSearch: setDisplayedOptions,
-    options,
-    searchInput,
-    selectAll,
-    selectAllGroup,
-    selectedData,
-    setIsDropdownVisible: handleDropDownVisible,
-    setSearchInput,
-    setSelectedData
-  }), [isDropdownVisible, handleDropDownVisible, searchInput, options, multiselect, selectAll, selectAllGroup, numberOfOptions, displayedOptions, selectedData, onChange]);
+  const providerValue = useMemo(
+    () => ({
+      displayedOptions,
+      isDropdownVisible,
+      multiselect,
+      numberOfOptions,
+      onChange,
+      onSearch: setDisplayedOptions,
+      options,
+      searchInput,
+      selectAll,
+      selectAllGroup,
+      selectedData,
+      setIsDropdownVisible: handleDropDownVisible,
+      setSearchInput,
+      setSelectedData
+    }),
+    [
+      isDropdownVisible,
+      handleDropDownVisible,
+      searchInput,
+      options,
+      multiselect,
+      selectAll,
+      selectAllGroup,
+      numberOfOptions,
+      displayedOptions,
+      selectedData,
+      onChange
+    ]
+  );
   return /* @__PURE__ */ jsx(SelectInputContext.Provider, { value: providerValue, children });
 };
 export {

package/dist/components/SelectInput/{Dropdown.d.ts → components/Dropdown.d.ts}

@@ -1,5 +1,5 @@
 import type { ComponentProps, ReactNode, RefObject } from 'react';
-import { Popup } from '../Popup';
+import { Popup } from '../../Popup';
 export type DropdownProps = {
     id?: string;
     children: ReactNode;
@@ -25,4 +25,4 @@ export type CreateDropdownProps = {
     defaultSearchValue: string | null;
     isLoading?: boolean;
 };
-export declare const Dropdown: ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, }: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;