@ultraviolet/ui 2.0.0-beta.9 → 2.0.1

package/dist/components/{SelectInputV2 → SelectInput}/SelectInputProvider.cjs

@@ -2,35 +2,35 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
-const SelectInputContext = React.createContext({
-  options: [],
+const react = require("react");
+const SelectInputContext = react.createContext({
+  displayedOptions: [],
+  isDropdownVisible: false,
   multiselect: false,
-  onSearch: () => {
+  numberOfOptions: 0,
+  onChange: () => {
   },
-  isDropdownVisible: false,
-  setIsDropdownVisible: () => {
+  onSearch: () => {
   },
+  options: [],
   searchInput: "",
-  setSearchInput: () => {
-  },
   selectAll: {
     label: ""
   },
   selectAllGroup: false,
-  numberOfOptions: 0,
-  displayedOptions: [],
   selectedData: {
     allSelected: false,
     selectedGroups: [],
     selectedValues: []
   },
-  setSelectedData: () => {
+  setIsDropdownVisible: () => {
   },
-  onChange: () => {
+  setSearchInput: () => {
+  },
+  setSelectedData: () => {
   }
 });
-const useSelectInput = () => React.useContext(SelectInputContext);
+const useSelectInput = () => react.useContext(SelectInputContext);
 const SelectInputProvider = ({
   options,
   multiselect,
@@ -40,9 +40,10 @@ const SelectInputProvider = ({
   numberOfOptions,
   children,
   onChange,
-  refSelect
+  refSelect,
+  onOpen
 }) => {
-  const currentValue = React.useMemo(() => {
+  const currentValue = react.useMemo(() => {
     if (value) {
       if (Array.isArray(value)) {
         return value;
@@ -51,32 +52,31 @@ const SelectInputProvider = ({
     }
     return [];
   }, [value]);
-  const selectedGroups = React.useMemo(() => {
+  const selectedGroups = react.useMemo(() => {
     if (Array.isArray(options)) {
       return [];
     }
     return Object.keys(options).filter((group) => options[group].every((groupOption) => currentValue.includes(groupOption.value)));
   }, [currentValue, options]);
-  const [displayedOptions, setDisplayedOptions] = React.useState(options);
-  const [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
-  const [searchInput, setSearchInput] = React.useState("");
-  const handleDropDownVisible = React.useCallback((newValue) => {
+  const [displayedOptions, setDisplayedOptions] = react.useState(options);
+  const [isDropdownVisible, setIsDropdownVisible] = react.useState(false);
+  const [searchInput, setSearchInput] = react.useState("");
+  const handleDropDownVisible = react.useCallback((newValue) => {
+    setIsDropdownVisible(newValue);
     if (newValue) {
-      setIsDropdownVisible(newValue);
-    } else {
-      setIsDropdownVisible(newValue);
-      if (refSelect) {
-        refSelect.current?.focus();
-      }
+      onOpen?.();
+    }
+    if (!newValue && refSelect) {
+      refSelect.current?.focus();
     }
-  }, [refSelect]);
-  const allValues = React.useMemo(() => {
+  }, [refSelect, onOpen]);
+  const allValues = react.useMemo(() => {
     if (!Array.isArray(options)) {
       return Object.keys(options).flatMap((group) => options[group].filter((option) => !option.disabled));
     }
     return options;
   }, [options]);
-  const allGroups = React.useMemo(() => {
+  const allGroups = react.useMemo(() => {
     if (!Array.isArray(options)) {
       return Object.keys(options);
     }
@@ -87,31 +87,31 @@ const SelectInputProvider = ({
       case "selectAll":
         if (state.allSelected) {
           return {
-            selectedValues: [],
             allSelected: false,
-            selectedGroups: []
+            selectedGroups: [],
+            selectedValues: []
           };
         }
         return {
-          selectedValues: allValues.map((option) => option.value),
           allSelected: true,
-          selectedGroups: allGroups
+          selectedGroups: allGroups,
+          selectedValues: allValues.map((option) => option.value)
         };
       case "selectGroup":
         if (!Array.isArray(options)) {
           if (state.selectedGroups.includes(action.selectedGroup)) {
             return {
-              selectedValues: [...state.selectedValues].filter((selectedValue) => !options[action.selectedGroup].find((option) => option.value === selectedValue)),
               allSelected: false,
-              selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.selectedGroup)
+              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));
           return {
-            selectedValues: newSelectedValues,
             allSelected: newSelectedValues.length === numberOfOptions,
-            selectedGroups: [...state.selectedGroups, action.selectedGroup]
+            selectedGroups: [...state.selectedGroups, action.selectedGroup],
+            selectedValues: newSelectedValues
           };
         }
         return state;
@@ -119,32 +119,32 @@ const SelectInputProvider = ({
         if (multiselect) {
           if (state.selectedValues.includes(action.clickedOption.value)) {
             return {
-              selectedValues: state.selectedValues.filter((val) => val !== action.clickedOption.value),
               allSelected: false,
-              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.group) : []
+              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 {
-            selectedValues: [...state.selectedValues, action.clickedOption.value],
             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
+            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 {
-          selectedValues: [action.clickedOption.value],
           allSelected: false,
-          selectedGroups: state.selectedGroups
+          selectedGroups: state.selectedGroups,
+          selectedValues: [action.clickedOption.value]
         };
       case "clearAll":
         return {
+          allSelected: false,
           selectedGroups: [],
-          selectedValues: [],
-          allSelected: false
+          selectedValues: []
         };
       case "update":
         return {
-          selectedGroups: state.selectedGroups,
           allSelected: state.allSelected,
+          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));
@@ -154,41 +154,41 @@ const SelectInputProvider = ({
         };
       case "reset":
         return {
-          selectedValues: action.selectedValues,
           allSelected: false,
-          selectedGroups: action.selectedGroups
+          selectedGroups: action.selectedGroups,
+          selectedValues: action.selectedValues
         };
       default:
         return state;
     }
   };
-  const [selectedData, setSelectedData] = React.useReducer(reducer, {
-    selectedValues: currentValue,
+  const [selectedData, setSelectedData] = react.useReducer(reducer, {
     allSelected: false,
-    selectedGroups
+    selectedGroups,
+    selectedValues: currentValue
   });
-  React.useEffect(() => {
+  react.useEffect(() => {
     setSelectedData({
-      type: "reset",
       selectedGroups,
-      selectedValues: currentValue
+      selectedValues: currentValue,
+      type: "reset"
     });
   }, [currentValue, selectedGroups]);
-  const providerValue = React.useMemo(() => ({
-    onSearch: setDisplayedOptions,
+  const providerValue = react.useMemo(() => ({
+    displayedOptions,
     isDropdownVisible,
-    setIsDropdownVisible: handleDropDownVisible,
-    searchInput,
-    setSearchInput,
-    options,
     multiselect,
+    numberOfOptions,
+    onChange,
+    onSearch: setDisplayedOptions,
+    options,
+    searchInput,
     selectAll,
     selectAllGroup,
-    numberOfOptions,
-    displayedOptions,
     selectedData,
-    setSelectedData,
-    onChange
+    setIsDropdownVisible: handleDropDownVisible,
+    setSearchInput,
+    setSelectedData
   }), [isDropdownVisible, handleDropDownVisible, searchInput, options, multiselect, selectAll, selectAllGroup, numberOfOptions, displayedOptions, selectedData, onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(SelectInputContext.Provider, { value: providerValue, children });
 };

package/dist/components/{SelectInputV2 → SelectInput}/SelectInputProvider.d.ts

@@ -37,6 +37,7 @@ type SelectInputProviderProps<IsMulti extends boolean> = {
     multiselect: IsMulti;
     refSelect?: RefObject<HTMLDivElement | null>;
     onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
+    onOpen?: () => void;
 };
-export declare const SelectInputProvider: <T extends boolean>({ options, multiselect, selectAll, value, selectAllGroup, numberOfOptions, children, onChange, refSelect, }: SelectInputProviderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SelectInputProvider: <T extends boolean>({ options, multiselect, selectAll, value, selectAllGroup, numberOfOptions, children, onChange, refSelect, onOpen, }: SelectInputProviderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/{SelectInputV2 → SelectInput}/SelectInputProvider.js

@@ -2,30 +2,30 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo, useState, useCallback, useReducer, useEffect, createContext, useContext } from "react";
 const SelectInputContext = createContext({
-  options: [],
+  displayedOptions: [],
+  isDropdownVisible: false,
   multiselect: false,
-  onSearch: () => {
+  numberOfOptions: 0,
+  onChange: () => {
   },
-  isDropdownVisible: false,
-  setIsDropdownVisible: () => {
+  onSearch: () => {
   },
+  options: [],
   searchInput: "",
-  setSearchInput: () => {
-  },
   selectAll: {
     label: ""
   },
   selectAllGroup: false,
-  numberOfOptions: 0,
-  displayedOptions: [],
   selectedData: {
     allSelected: false,
     selectedGroups: [],
     selectedValues: []
   },
-  setSelectedData: () => {
+  setIsDropdownVisible: () => {
   },
-  onChange: () => {
+  setSearchInput: () => {
+  },
+  setSelectedData: () => {
   }
 });
 const useSelectInput = () => useContext(SelectInputContext);
@@ -38,7 +38,8 @@ const SelectInputProvider = ({
   numberOfOptions,
   children,
   onChange,
-  refSelect
+  refSelect,
+  onOpen
 }) => {
   const currentValue = useMemo(() => {
     if (value) {
@@ -59,15 +60,14 @@ const SelectInputProvider = ({
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [searchInput, setSearchInput] = useState("");
   const handleDropDownVisible = useCallback((newValue) => {
+    setIsDropdownVisible(newValue);
     if (newValue) {
-      setIsDropdownVisible(newValue);
-    } else {
-      setIsDropdownVisible(newValue);
-      if (refSelect) {
-        refSelect.current?.focus();
-      }
+      onOpen?.();
+    }
+    if (!newValue && refSelect) {
+      refSelect.current?.focus();
     }
-  }, [refSelect]);
+  }, [refSelect, onOpen]);
   const allValues = useMemo(() => {
     if (!Array.isArray(options)) {
       return Object.keys(options).flatMap((group) => options[group].filter((option) => !option.disabled));
@@ -85,31 +85,31 @@ const SelectInputProvider = ({
       case "selectAll":
         if (state.allSelected) {
           return {
-            selectedValues: [],
             allSelected: false,
-            selectedGroups: []
+            selectedGroups: [],
+            selectedValues: []
           };
         }
         return {
-          selectedValues: allValues.map((option) => option.value),
           allSelected: true,
-          selectedGroups: allGroups
+          selectedGroups: allGroups,
+          selectedValues: allValues.map((option) => option.value)
         };
       case "selectGroup":
         if (!Array.isArray(options)) {
           if (state.selectedGroups.includes(action.selectedGroup)) {
             return {
-              selectedValues: [...state.selectedValues].filter((selectedValue) => !options[action.selectedGroup].find((option) => option.value === selectedValue)),
               allSelected: false,
-              selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.selectedGroup)
+              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));
           return {
-            selectedValues: newSelectedValues,
             allSelected: newSelectedValues.length === numberOfOptions,
-            selectedGroups: [...state.selectedGroups, action.selectedGroup]
+            selectedGroups: [...state.selectedGroups, action.selectedGroup],
+            selectedValues: newSelectedValues
           };
         }
         return state;
@@ -117,32 +117,32 @@ const SelectInputProvider = ({
         if (multiselect) {
           if (state.selectedValues.includes(action.clickedOption.value)) {
             return {
-              selectedValues: state.selectedValues.filter((val) => val !== action.clickedOption.value),
               allSelected: false,
-              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.group) : []
+              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 {
-            selectedValues: [...state.selectedValues, action.clickedOption.value],
             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
+            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 {
-          selectedValues: [action.clickedOption.value],
           allSelected: false,
-          selectedGroups: state.selectedGroups
+          selectedGroups: state.selectedGroups,
+          selectedValues: [action.clickedOption.value]
         };
       case "clearAll":
         return {
+          allSelected: false,
           selectedGroups: [],
-          selectedValues: [],
-          allSelected: false
+          selectedValues: []
         };
       case "update":
         return {
-          selectedGroups: state.selectedGroups,
           allSelected: state.allSelected,
+          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));
@@ -152,41 +152,41 @@ const SelectInputProvider = ({
         };
       case "reset":
         return {
-          selectedValues: action.selectedValues,
           allSelected: false,
-          selectedGroups: action.selectedGroups
+          selectedGroups: action.selectedGroups,
+          selectedValues: action.selectedValues
         };
       default:
         return state;
     }
   };
   const [selectedData, setSelectedData] = useReducer(reducer, {
-    selectedValues: currentValue,
     allSelected: false,
-    selectedGroups
+    selectedGroups,
+    selectedValues: currentValue
   });
   useEffect(() => {
     setSelectedData({
-      type: "reset",
       selectedGroups,
-      selectedValues: currentValue
+      selectedValues: currentValue,
+      type: "reset"
     });
   }, [currentValue, selectedGroups]);
   const providerValue = useMemo(() => ({
-    onSearch: setDisplayedOptions,
+    displayedOptions,
     isDropdownVisible,
-    setIsDropdownVisible: handleDropDownVisible,
-    searchInput,
-    setSearchInput,
-    options,
     multiselect,
+    numberOfOptions,
+    onChange,
+    onSearch: setDisplayedOptions,
+    options,
+    searchInput,
     selectAll,
     selectAllGroup,
-    numberOfOptions,
-    displayedOptions,
     selectedData,
-    setSelectedData,
-    onChange
+    setIsDropdownVisible: handleDropDownVisible,
+    setSearchInput,
+    setSelectedData
   }), [isDropdownVisible, handleDropDownVisible, searchInput, options, multiselect, selectAll, selectAllGroup, numberOfOptions, displayedOptions, selectedData, onChange]);
   return /* @__PURE__ */ jsx(SelectInputContext.Provider, { value: providerValue, children });
 };