@ultraviolet/ui 2.0.0-beta.8 → 2.0.0

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

@@ -2,8 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
-const SelectInputContext = React.createContext({
+const react = require("react");
+const SelectInputContext = react.createContext({
   options: [],
   multiselect: false,
   onSearch: () => {
@@ -30,7 +30,7 @@ const SelectInputContext = React.createContext({
   onChange: () => {
   }
 });
-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);
     }
@@ -162,19 +162,19 @@ const SelectInputProvider = ({
         return state;
     }
   };
-  const [selectedData, setSelectedData] = React.useReducer(reducer, {
+  const [selectedData, setSelectedData] = react.useReducer(reducer, {
     selectedValues: currentValue,
     allSelected: false,
     selectedGroups
   });
-  React.useEffect(() => {
+  react.useEffect(() => {
     setSelectedData({
       type: "reset",
       selectedGroups,
       selectedValues: currentValue
     });
   }, [currentValue, selectedGroups]);
-  const providerValue = React.useMemo(() => ({
+  const providerValue = react.useMemo(() => ({
     onSearch: setDisplayedOptions,
     isDropdownVisible,
     setIsDropdownVisible: handleDropDownVisible,

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

@@ -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));