@unifiedsoftware/react-ui 1.0.14 → 1.0.16

package/dist/index.js

@@ -75,7 +75,9 @@ __export(src_exports, {
   MenuItem: () => MenuItem_default,
   MenuSubmenu: () => MenuSubmenu_default,
   MenuValueContext: () => MenuValueContext_default,
+  MultiSelect: () => MultiSelect_default,
   Portal: () => Portal_default,
+  Select: () => Select_default,
   Tab: () => Tab,
   Tabs: () => Tabs,
   Toolbar: () => Toolbar_default,
@@ -1175,20 +1177,563 @@ var Toolbar = (props) => {
 };
 var Toolbar_default = Toolbar;
 
-// src/hooks/useLocalStorage.tsx
+// src/components/Select/SelectClient.tsx
+var import_kendo_data_query = require("@progress/kendo-data-query");
+var import_kendo_react_dropdowns = require("@progress/kendo-react-dropdowns");
+var import_react26 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var SelectClient = ({
+  value: valueProp,
+  data: propData,
+  filter: filterProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  disabled,
+  loading,
+  className,
+  onChange,
+  onFilterChange
+}) => {
+  const [value, setValue] = (0, import_react26.useState)(valueProp);
+  const [filter, setFilter] = (0, import_react26.useState)(filterProp);
+  const handleChange = (event) => {
+    const value2 = event.target.value || null;
+    if (valueProp !== void 0) {
+      onChange(value2);
+    } else {
+      setValue(value2);
+    }
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = (0, import_react26.useRef)([]);
+  const [state, setState] = (0, import_react26.useState)({
+    skip: 0,
+    total: propData.total,
+    subsetData: propData.items.slice(0, pageSize3)
+  });
+  const handleFilterChange = (event) => {
+    if (pageSize3) {
+      filteredData.current = (0, import_kendo_data_query.filterBy)(propData.items.slice(), event.filter);
+      const data = filteredData.current.slice(0, pageSize3);
+      setState({
+        subsetData: data,
+        skip: 0,
+        total: filteredData.current.length
+      });
+    }
+    const filter2 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter2);
+    } else {
+      setFilter(filter2);
+    }
+  };
+  const handlePageChange = (event) => {
+    if (pageSize3) {
+      const skip = event.page.skip;
+      const take = event.page.take;
+      const newSubsetData = filteredData.current.slice(skip, skip + take);
+      setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip }));
+    }
+  };
+  (0, import_react26.useEffect)(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  (0, import_react26.useEffect)(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  (0, import_react26.useEffect)(() => {
+    if (pageSize3) {
+      filteredData.current = propData.items.slice();
+    }
+  }, [propData]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_kendo_react_dropdowns.ComboBox,
+    {
+      value,
+      data: pageSize3 ? state.subsetData : propData.items,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      filter,
+      virtual: pageSize3 ? {
+        total: state.total,
+        pageSize: pageSize3,
+        skip: state.skip
+      } : void 0,
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onFilterChange: handleFilterChange,
+      onPageChange: handlePageChange
+    }
+  );
+};
+var SelectClient_default = SelectClient;
+
+// src/components/Select/SelectServer.tsx
+var import_kendo_react_dropdowns2 = require("@progress/kendo-react-dropdowns");
+var import_react27 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var textField = "ContactName";
+var emptyItem = { [textField]: "loading ...", CustomerID: 0 };
+var pageSize = 10;
+var loadingData = [];
+while (loadingData.length < pageSize) {
+  loadingData.push(__spreadValues({}, emptyItem));
+}
+var SelectServer = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp = "",
+  disabled,
+  loading,
+  className,
+  onChange,
+  onDataChange,
+  onFilterChange,
+  getData,
+  renderItem
+}) => {
+  var _a;
+  const dataCaching = (0, import_react27.useRef)([]);
+  const pendingRequest = (0, import_react27.useRef)();
+  const requestStarted = (0, import_react27.useRef)(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = (0, import_react27.useState)([]);
+  const [data, setData] = (0, import_react27.useState)(dataProp.items);
+  const [total, setTotal] = (0, import_react27.useState)(0);
+  const [value, setValue] = (0, import_react27.useState)(valueProp);
+  const [filter, setFilter] = (0, import_react27.useState)(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = (0, import_react27.useRef)(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = (0, import_react27.useCallback)((state) => {
+    const { skip } = state;
+    if (requestStarted.current) {
+      clearTimeout(pendingRequest.current);
+      pendingRequest.current = setTimeout(() => {
+        requestData(state);
+      }, 50);
+      return;
+    }
+    requestStarted.current = true;
+    getData(state).then(({ items, total: total2 }) => {
+      items.forEach((item, index) => {
+        dataCaching.current[index + skip] = item;
+      });
+      if (skip === skipRef.current) {
+        setData(items);
+        setTotal(total2);
+        onDataChange == null ? void 0 : onDataChange({ items, total: total2 });
+      }
+      requestStarted.current = false;
+    }).catch(() => {
+      requestStarted.current = false;
+    });
+  }, []);
+  const handleFilterChange = (0, import_react27.useCallback)((event) => {
+    const filter2 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter2);
+    } else {
+      setFilter(filter2);
+    }
+    resetCach();
+    requestData({ skip: 0, filter: filter2 });
+    setData(loadingData3);
+    skipRef.current = 0;
+  }, []);
+  const shouldRequestData = (0, import_react27.useCallback)((skip) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = (0, import_react27.useCallback)((skip) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = (0, import_react27.useCallback)(
+    (event) => {
+      if (filter !== void 0) {
+        const newSkip = event.page.skip;
+        if (shouldRequestData(newSkip)) {
+          requestData({ skip: newSkip, filter });
+        }
+        const data2 = getCachedData(newSkip);
+        setData(data2);
+        skipRef.current = newSkip;
+      }
+    },
+    [getCachedData, requestData, shouldRequestData, filter]
+  );
+  const handleChange = (0, import_react27.useCallback)((event) => {
+    const value2 = event.target.value;
+    if (value2 && value2[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    if (valueProp !== void 0) {
+      onChange(value2);
+    } else {
+      setValue(value2);
+    }
+  }, []);
+  const handleItemRender = (li, itemProps) => {
+    const itemChildren = renderItem == null ? void 0 : renderItem(itemProps.dataItem);
+    if (!itemChildren)
+      return (0, import_react27.cloneElement)(li, li.props);
+    return (0, import_react27.cloneElement)(li, li.props, itemChildren);
+  };
+  (0, import_react27.useEffect)(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  (0, import_react27.useEffect)(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  (0, import_react27.useEffect)(() => {
+    if (filterProp !== void 0) {
+      setFilter(filterProp);
+    }
+  }, [filterProp]);
+  (0, import_react27.useEffect)(() => {
+    requestData({ skip: 0, filter });
+    return () => {
+      resetCach();
+    };
+  }, [filter, requestData]);
+  (0, import_react27.useEffect)(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_kendo_react_dropdowns2.ComboBox,
+    {
+      data,
+      value,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      onFilterChange: handleFilterChange,
+      virtual: {
+        pageSize: pageSize3,
+        skip: skipRef.current,
+        total
+      },
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onPageChange: pageChange,
+      itemRender: handleItemRender
+    }
+  );
+};
+var SelectServer_default = SelectServer;
+
+// src/components/Select/Select.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Select = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectServer_default, __spreadValues({}, props));
+};
+var Select_default = Select;
+
+// src/components/MultiSelect/MultiSelectClient.tsx
+var import_kendo_data_query2 = require("@progress/kendo-data-query");
+var import_kendo_react_dropdowns3 = require("@progress/kendo-react-dropdowns");
 var import_react28 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var textField2 = "text";
+var keyField = "key";
+var emptyItem2 = { [textField2]: "loading ...", [keyField]: 0 };
+var pageSize2 = 10;
+var loadingData2 = [];
+while (loadingData2.length < pageSize2) {
+  loadingData2.push(__spreadValues({}, emptyItem2));
+}
+var SelectClient2 = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp,
+  disabled,
+  loading,
+  className,
+  onChange,
+  onFilterChange
+}) => {
+  const [value, setValue] = (0, import_react28.useState)(valueProp);
+  const [filter, setFilter] = (0, import_react28.useState)(filterProp);
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = (0, import_react28.useRef)([]);
+  const [state, setState] = (0, import_react28.useState)({
+    skip: 0,
+    total: dataProp.total,
+    subsetData: dataProp.items.slice(0, pageSize3)
+  });
+  const handleFilterChange = (event) => {
+    if (pageSize3) {
+      filteredData.current = (0, import_kendo_data_query2.filterBy)(dataProp.items.slice(), event.filter);
+      const data = filteredData.current.slice(0, pageSize3);
+      setState({
+        subsetData: data,
+        skip: 0,
+        total: filteredData.current.length
+      });
+    }
+    onFilterChange == null ? void 0 : onFilterChange(event.filter.value);
+  };
+  const pageChange = (event) => {
+    if (pageSize3) {
+      const skip = event.page.skip;
+      const take = event.page.take;
+      const newSubsetData = filteredData.current.slice(skip, skip + take);
+      setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip }));
+    }
+  };
+  (0, import_react28.useEffect)(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  (0, import_react28.useEffect)(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  (0, import_react28.useEffect)(() => {
+    if (pageSize3) {
+      filteredData.current = dataProp.items.slice();
+    }
+  }, [dataProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_kendo_react_dropdowns3.MultiSelect,
+    {
+      value,
+      data: pageSize3 ? state.subsetData : dataProp.items,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      filter,
+      virtual: pageSize3 ? {
+        total: state.total,
+        pageSize: pageSize3,
+        skip: state.skip
+      } : void 0,
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onFilterChange: handleFilterChange,
+      onPageChange: pageChange
+    }
+  );
+};
+var MultiSelectClient_default = SelectClient2;
+
+// src/components/MultiSelect/MultiSelectServer.tsx
+var import_kendo_react_dropdowns4 = require("@progress/kendo-react-dropdowns");
+var import_react29 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var MultiSelectServer = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp = "",
+  disabled,
+  loading,
+  className,
+  onDataChange,
+  onChange,
+  onFilterChange,
+  getData
+}) => {
+  var _a;
+  const dataCaching = (0, import_react29.useRef)([]);
+  const pendingRequest = (0, import_react29.useRef)();
+  const requestStarted = (0, import_react29.useRef)(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = (0, import_react29.useState)([]);
+  const [data, setData] = (0, import_react29.useState)(dataProp.items);
+  const [total, setTotal] = (0, import_react29.useState)(0);
+  const [value, setValue] = (0, import_react29.useState)(valueProp);
+  const [filter, setFilter] = (0, import_react29.useState)(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = (0, import_react29.useRef)(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = (0, import_react29.useCallback)((state) => {
+    if (requestStarted.current) {
+      clearTimeout(pendingRequest.current);
+      pendingRequest.current = setTimeout(() => {
+        requestData(state);
+      }, 50);
+      return;
+    }
+    requestStarted.current = true;
+    getData(state).then(({ items, total: total2 }) => {
+      const { skip } = state;
+      items.forEach((item, index) => {
+        dataCaching.current[index + skip] = item;
+      });
+      if (skip === skipRef.current) {
+        setData(items);
+        setTotal(total2);
+        onDataChange == null ? void 0 : onDataChange({ items, total: total2 });
+      }
+      requestStarted.current = false;
+    }).catch(() => {
+      requestStarted.current = false;
+    });
+  }, []);
+  const handleFilterChange = (0, import_react29.useCallback)((event) => {
+    const filter2 = event.filter.value;
+    resetCach();
+    requestData({ skip: 0, filter: filter2 });
+    setData(loadingData3);
+    skipRef.current = 0;
+    setFilter(filter2);
+    onFilterChange == null ? void 0 : onFilterChange(filter2);
+  }, []);
+  const shouldRequestData = (0, import_react29.useCallback)((skip) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = (0, import_react29.useCallback)((skip) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = (0, import_react29.useCallback)(
+    (event) => {
+      const newSkip = event.page.skip;
+      if (shouldRequestData(newSkip)) {
+        requestData({ skip: newSkip, filter });
+      }
+      const data2 = getCachedData(newSkip);
+      setData(data2);
+      skipRef.current = newSkip;
+    },
+    [getCachedData, requestData, shouldRequestData, filter]
+  );
+  const handleChange = (0, import_react29.useCallback)((event) => {
+    const value2 = event.target.value;
+    if (value2 && value2[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    setValue(value2);
+    onChange(value2);
+  }, []);
+  (0, import_react29.useEffect)(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  (0, import_react29.useEffect)(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  (0, import_react29.useEffect)(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  (0, import_react29.useEffect)(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  (0, import_react29.useEffect)(() => {
+    requestData({ skip: 0, filter });
+    return () => {
+      resetCach();
+    };
+  }, [filter, requestData]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_kendo_react_dropdowns4.MultiSelect,
+    {
+      data,
+      value,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      onFilterChange: handleFilterChange,
+      virtual: {
+        pageSize: pageSize3,
+        skip: skipRef.current,
+        total
+      },
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onPageChange: pageChange
+    }
+  );
+};
+var MultiSelectServer_default = MultiSelectServer;
+
+// src/components/MultiSelect/MultiSelect.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var MultiSelect3 = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MultiSelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MultiSelectServer_default, __spreadValues({}, props));
+};
+var MultiSelect_default = MultiSelect3;
+
+// src/hooks/useLocalStorage.tsx
+var import_react32 = require("react");
 
 // src/hooks/useEventListener.tsx
-var import_react27 = require("react");
+var import_react31 = require("react");
 
 // src/hooks/useIsomorphicLayoutEffect.tsx
-var import_react26 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react26.useLayoutEffect : import_react26.useEffect;
+var import_react30 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react30.useLayoutEffect : import_react30.useEffect;
 var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
 
 // src/hooks/useEventListener.tsx
 function useEventListener(handler) {
-  const savedHandler = (0, import_react27.useRef)(handler);
+  const savedHandler = (0, import_react31.useRef)(handler);
   useIsomorphicLayoutEffect_default(() => {
     savedHandler.current = handler;
   }, [handler]);
@@ -1197,7 +1742,7 @@ var useEventListener_default = useEventListener;
 
 // src/hooks/useLocalStorage.tsx
 function useLocalStorage(key, initialValue) {
-  const readValue = (0, import_react28.useCallback)(() => {
+  const readValue = (0, import_react32.useCallback)(() => {
     if (typeof window === "undefined") {
       return initialValue;
     }
@@ -1209,8 +1754,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   }, [initialValue, key]);
-  const [storedValue, setStoredValue] = (0, import_react28.useState)(readValue);
-  const setValue = (0, import_react28.useCallback)(
+  const [storedValue, setStoredValue] = (0, import_react32.useState)(readValue);
+  const setValue = (0, import_react32.useCallback)(
     (value) => {
       if (typeof window == "undefined") {
         console.warn(`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`);
@@ -1226,10 +1771,10 @@ function useLocalStorage(key, initialValue) {
     },
     [key, storedValue]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     setStoredValue(readValue());
   }, []);
-  const handleStorageChange = (0, import_react28.useCallback)(() => {
+  const handleStorageChange = (0, import_react32.useCallback)(() => {
     setStoredValue(readValue());
   }, [readValue]);
   useEventListener_default("storage", handleStorageChange);
@@ -1240,28 +1785,27 @@ function parseJSON(value) {
   try {
     return value === "undefined" ? void 0 : JSON.parse(value != null ? value : "");
   } catch (e) {
-    console.log("parsing error on", { value });
     return void 0;
   }
 }
 
 // src/hooks/usePrevious.tsx
-var import_react29 = require("react");
+var import_react33 = require("react");
 var usePrevious = (value) => {
-  const ref = (0, import_react29.useRef)();
-  (0, import_react29.useEffect)(() => {
+  const ref = (0, import_react33.useRef)();
+  (0, import_react33.useEffect)(() => {
     ref.current = value;
   });
   return ref.current;
 };
 
 // src/hooks/useStep.tsx
-var import_react30 = require("react");
+var import_react34 = require("react");
 var useStep = (maxStep) => {
-  const [currentStep, setCurrentStep] = (0, import_react30.useState)(1);
-  const canGoToNextStep = (0, import_react30.useMemo)(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
-  const canGoToPrevStep = (0, import_react30.useMemo)(() => currentStep - 1 >= 1, [currentStep]);
-  const setStep = (0, import_react30.useCallback)(
+  const [currentStep, setCurrentStep] = (0, import_react34.useState)(1);
+  const canGoToNextStep = (0, import_react34.useMemo)(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
+  const canGoToPrevStep = (0, import_react34.useMemo)(() => currentStep - 1 >= 1, [currentStep]);
+  const setStep = (0, import_react34.useCallback)(
     (step) => {
       const newStep = step instanceof Function ? step(currentStep) : step;
       if (newStep >= 1 && newStep <= maxStep) {
@@ -1272,17 +1816,17 @@ var useStep = (maxStep) => {
     },
     [maxStep, currentStep]
   );
-  const goToNextStep = (0, import_react30.useCallback)(() => {
+  const goToNextStep = (0, import_react34.useCallback)(() => {
     if (canGoToNextStep) {
       setCurrentStep((step) => step + 1);
     }
   }, [canGoToNextStep]);
-  const goToPrevStep = (0, import_react30.useCallback)(() => {
+  const goToPrevStep = (0, import_react34.useCallback)(() => {
     if (canGoToPrevStep) {
       setCurrentStep((step) => step - 1);
     }
   }, [canGoToPrevStep]);
-  const reset = (0, import_react30.useCallback)(() => {
+  const reset = (0, import_react34.useCallback)(() => {
     setCurrentStep(1);
   }, []);
   return [
@@ -1315,7 +1859,9 @@ var useStep = (maxStep) => {
   MenuItem,
   MenuSubmenu,
   MenuValueContext,
+  MultiSelect,
   Portal,
+  Select,
   Tab,
   Tabs,
   Toolbar,