trotl-filter 1.0.23 → 1.0.26

package/dist/index.cjs.js

@@ -7688,8 +7688,16 @@ const DebounceSelect = ({
   }, "No results")));
 };
 
+/**
+ * SearchInput Component
+ * @param {string} pushUrlParamObj - URL parameter key (if null, URL params are not updated)
+ * @param {string} height - Input height (e.g., "40px", "3rem")
+ * @param {object} style - Custom inline styles
+ */
 function SearchInput({
   pushUrlParamObj = null,
+  height,
+  style = {},
   ...props
 }) {
   const key = pushUrlParamObj || "search";
@@ -7697,6 +7705,7 @@ function SearchInput({
 
   // On mount, read the URL param and set value
   React.useEffect(() => {
+    if (pushUrlParamObj === null) return;
     const params = new URLSearchParams(window.location.search);
     const urlValue = params.get(key) || "";
     setValue(urlValue);
@@ -7708,8 +7717,9 @@ function SearchInput({
     };
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
-  }, [key]);
+  }, [key, pushUrlParamObj]);
   const setUrlParam = val => {
+    if (pushUrlParamObj === null) return;
     const params = new URLSearchParams(window.location.search);
     if (val && val.length > 0) {
       params.set(key, val);
@@ -7728,14 +7738,18 @@ function SearchInput({
     setValue("");
     setUrlParam("");
   };
+
+  // Apply height to container if provided and style doesn't have height defined
+  const containerStyle = {
+    position: "relative",
+    display: "inline-block",
+    height: height || "34px",
+    verticalAlign: "middle",
+    ...style
+  };
   return /*#__PURE__*/React.createElement("div", {
     title: "tooltip",
-    style: {
-      position: "relative",
-      display: "inline-block",
-      height: "34px",
-      verticalAlign: "middle"
-    }
+    style: containerStyle
   }, /*#__PURE__*/React.createElement("input", _extends$1({
     className: "basic-input",
     value: value,
@@ -10616,6 +10630,7 @@ const Button = ({
   style = {},
   className = "",
   height,
+  float = null,
   ...rest
 }) => {
   // Determine button class based on type
@@ -10639,11 +10654,76 @@ const Button = ({
     } : {}),
     ...style
   };
+
+  // If `float` prop is provided, compute fixed positioning styles.
+  let floatClass = "";
+  const floatStyle = {};
+  if (float) {
+    floatClass = "button--float";
+    // Accept boolean true (use bottom-right default) or object
+    const cfg = typeof float === "object" ? float : {
+      position: "bottom-right"
+    };
+
+    // Default spacing if not provided
+    const gap = cfg.gap || cfg.offset || 16;
+
+    // If explicit top/left/right/bottom provided, use them.
+    if (cfg.top !== undefined) floatStyle.top = cfg.top;
+    if (cfg.left !== undefined) floatStyle.left = cfg.left;
+    if (cfg.right !== undefined) floatStyle.right = cfg.right;
+    if (cfg.bottom !== undefined) floatStyle.bottom = cfg.bottom;
+
+    // If position string is provided, map to offsets unless explicit coords set
+    if (cfg.position && !(cfg.top || cfg.left || cfg.right || cfg.bottom)) {
+      const pos = String(cfg.position).toLowerCase();
+      // Accept common typo 'botton' as 'bottom'
+      const posNormalized = pos.replace(/botton/g, 'bottom');
+
+      // If user requested an edge position like 'bottom-left', place at exact edge (0px)
+      if (posNormalized.includes("bottom") && posNormalized.includes("left")) {
+        floatStyle.bottom = '0px';
+        floatStyle.left = '0px';
+      } else if (posNormalized.includes("bottom") && posNormalized.includes("right")) {
+        floatStyle.bottom = '0px';
+        floatStyle.right = '0px';
+      } else if (posNormalized.includes("top") && posNormalized.includes("left")) {
+        floatStyle.top = '0px';
+        floatStyle.left = '0px';
+      } else if (posNormalized.includes("top") && posNormalized.includes("right")) {
+        floatStyle.top = '0px';
+        floatStyle.right = '0px';
+      } else {
+        // fallback: apply gap offsets
+        if (posNormalized.includes("bottom")) floatStyle.bottom = typeof gap === "number" ? `${gap}px` : gap;
+        if (posNormalized.includes("top")) floatStyle.top = typeof gap === "number" ? `${gap}px` : gap;
+        if (posNormalized.includes("left")) floatStyle.left = typeof gap === "number" ? `${gap}px` : gap;
+        if (posNormalized.includes("right")) floatStyle.right = typeof gap === "number" ? `${gap}px` : gap;
+      }
+
+      // center handling (horizontal or vertical centering)
+      if (posNormalized.startsWith("center-")) {
+        const parts = posNormalized.split("-");
+        const dir = parts[1];
+        if (dir === "bottom" || dir === "top") {
+          floatStyle.left = "50%";
+          floatStyle.transform = (floatStyle.transform ? floatStyle.transform + " " : "") + "translateX(-50%)";
+        }
+        if (dir === "left" || dir === "right") {
+          floatStyle.top = "50%";
+          floatStyle.transform = (floatStyle.transform ? floatStyle.transform + " " : "") + "translateY(-50%)";
+        }
+      }
+    }
+  }
   return /*#__PURE__*/React.createElement("button", _extends$1({
-    className: `button ${getButtonClass()} ${className}`,
+    className: `button ${getButtonClass()} ${className} ${floatClass}`,
     onClick: onClick,
     disabled: disabled,
-    style: buttonStyle
+    style: {
+      ...buttonStyle,
+      ...floatStyle
+    }
   }, rest), children);
 };
 
@@ -10699,6 +10779,137 @@ const Switch = ({
   }, label));
 };
 
+const formatBytes = bytes => {
+  if (!bytes) return "0 B";
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
+};
+function Upload({
+  onChange,
+  multiple = false,
+  accept,
+  acceptFiles,
+  maxFiles = null,
+  maxFileSize = null,
+  customPreview = null,
+  buttonLabel = "Browse...",
+  className = "",
+  style = {},
+  value = undefined
+}) {
+  const inputRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const [files, setFiles] = React.useState([]);
+  const handleFiles = React.useCallback((fileList, event = null) => {
+    const incoming = Array.from(fileList || []);
+    setFiles(prev => {
+      let arr = multiple ? [...prev, ...incoming] : incoming;
+      if (maxFileSize) {
+        arr = arr.filter(f => f.size <= maxFileSize);
+      }
+      if (maxFiles && Number.isFinite(maxFiles)) {
+        arr = arr.slice(0, maxFiles);
+      }
+      if (onChange) {
+        // Call with (files, event) for consistency; provide single file when not multiple
+        onChange(multiple ? arr : arr[0] || null, event || null);
+      }
+      return arr;
+    });
+  }, [onChange, multiple, maxFileSize, maxFiles]);
+
+  // Determine which files to display: prefer `value` prop when provided (controlled),
+  // otherwise use internal `files` state.
+  const displayFiles = (() => {
+    if (value !== undefined && value !== null) {
+      if (Array.isArray(value)) return value;
+      return [value];
+    }
+    return files;
+  })();
+  const onInputChange = e => {
+    handleFiles(e.target.files, e);
+  };
+  const openFileDialog = () => {
+    if (inputRef.current) inputRef.current.click();
+  };
+  const onDrop = e => {
+    e.preventDefault();
+    setDragOver(false);
+    handleFiles(e.dataTransfer.files, e);
+  };
+  const onDragOver = e => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+  const onDragLeave = () => setDragOver(false);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `trotl-upload ${className}`,
+    style: style
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "file",
+    style: {
+      display: "none"
+    },
+    onChange: onInputChange,
+    multiple: multiple,
+    accept: acceptFiles || accept
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `upload-dropzone ${dragOver ? "drag-over" : ""}`,
+    onClick: openFileDialog,
+    onDrop: onDrop,
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave,
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: e => {
+      if (e.key === "Enter") openFileDialog();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "upload-inner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "upload-icon"
+  }, "\u2B06\uFE0F"), /*#__PURE__*/React.createElement("div", {
+    className: "upload-text"
+  }, "Drag & drop files here or"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "upload-browse",
+    onClick: e => {
+      e.stopPropagation();
+      openFileDialog();
+    }
+  }, buttonLabel))), displayFiles && displayFiles.length > 0 && (customPreview ? (
+  /*#__PURE__*/
+  // If customPreview is a component, render it with `files` prop
+  React.createElement(customPreview, {
+    files: displayFiles
+  })) : /*#__PURE__*/React.createElement("ul", {
+    className: "upload-list"
+  }, displayFiles.map((f, i) => /*#__PURE__*/React.createElement("li", {
+    key: `${f && f.name || f || i}-${i}`,
+    className: "upload-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "upload-name"
+  }, f && f.name || String(f)), /*#__PURE__*/React.createElement("span", {
+    className: "upload-size"
+  }, f && f.size ? formatBytes(f.size) : ""))))));
+}
+Upload.propTypes = {
+  onChange: PropTypes.func,
+  multiple: PropTypes.bool,
+  accept: PropTypes.string,
+  acceptFiles: PropTypes.string,
+  maxFiles: PropTypes.number,
+  maxFileSize: PropTypes.number,
+  customPreview: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func, PropTypes.node]),
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+  buttonLabel: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object
+};
+
 exports.Button = Button;
 exports.CalendarRangePicker = CalendarRangePicker;
 exports.DateTimeInput = DateTimeInput;
@@ -10709,4 +10920,5 @@ exports.MultiSelectDropdown = MultiSelectDropdown;
 exports.RangePicker = RangePicker;
 exports.SearchInput = SearchInput;
 exports.Switch = Switch;
+exports.Upload = Upload;
 //# sourceMappingURL=index.cjs.js.map