@josephomills/esign 0.9.2 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/ui/index.cjs +146 -150
  2. package/dist/ui/index.cjs.map +1 -1
  3. package/dist/ui/index.js +146 -150
  4. package/dist/ui/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/ui/index.cjs CHANGED
@@ -370,6 +370,7 @@ function FieldDesigner({
370
370
  const [drawMode, setDrawMode] = react.useState(false);
371
371
  const [pendingType, setPendingType] = react.useState("signature");
372
372
  const [configId, setConfigId] = react.useState(null);
373
+ const [configPos, setConfigPos] = react.useState(null);
373
374
  const [drag, setDrag] = react.useState(null);
374
375
  const [live, setLive] = react.useState(null);
375
376
  const stageRef = react.useRef(null);
@@ -477,7 +478,6 @@ function FieldDesigner({
477
478
  onChange([...value, f]);
478
479
  setSelectedId(f.id);
479
480
  setDrawMode(false);
480
- if (isDate) setConfigId(f.id);
481
481
  } else {
482
482
  onChange(value.map((x) => x.id === drag.id ? { ...x, ...live } : x));
483
483
  }
@@ -496,6 +496,11 @@ function FieldDesigner({
496
496
  function setConfig(id, patch) {
497
497
  onChange(value.map((f) => f.id === id ? { ...f, ...patch } : f));
498
498
  }
499
+ function openConfig(id, e) {
500
+ const r = e.currentTarget.getBoundingClientRect();
501
+ setConfigPos({ x: r.left, y: r.bottom + 6 });
502
+ setConfigId(id);
503
+ }
499
504
  const configField = value.find((f) => f.id === configId && f.type === "date") ?? null;
500
505
  const handle = (id, geom, c) => {
501
506
  const cx = c[1] === "w" ? geom.x : geom.x + geom.w;
@@ -691,7 +696,7 @@ function FieldDesigner({
691
696
  onPointerDown: (e) => e.stopPropagation(),
692
697
  onClick: (e) => {
693
698
  e.stopPropagation();
694
- setConfigId(f.id);
699
+ openConfig(f.id, e);
695
700
  },
696
701
  style: {
697
702
  position: "absolute",
@@ -737,172 +742,163 @@ function FieldDesigner({
737
742
  ]
738
743
  }
739
744
  ),
740
- configField ? /* @__PURE__ */ jsxRuntime.jsxs(
741
- "div",
742
- {
743
- style: {
744
- marginTop: 10,
745
- border: `1px solid ${primaryColor}66`,
746
- borderRadius: 8,
747
- padding: 12,
748
- background: "#fff",
749
- fontSize: 13,
750
- color: "#374151"
751
- },
752
- children: [
753
- /* @__PURE__ */ jsxRuntime.jsxs(
754
- "div",
755
- {
756
- style: {
757
- display: "flex",
758
- alignItems: "center",
759
- justifyContent: "space-between",
760
- marginBottom: 8
761
- },
762
- children: [
763
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
764
- "\u{1F4C5} ",
765
- configField.label || "Date"
766
- ] }),
767
- /* @__PURE__ */ jsxRuntime.jsx(
768
- "button",
769
- {
770
- type: "button",
771
- onClick: () => setConfigId(null),
772
- style: {
773
- fontSize: 12,
774
- padding: "3px 10px",
775
- borderRadius: 6,
776
- border: `1px solid ${primaryColor}`,
777
- background: primaryColor,
778
- color: "#fff",
779
- cursor: "pointer"
780
- },
781
- children: "Done"
782
- }
783
- )
784
- ]
785
- }
786
- ),
787
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 10 }, children: [
788
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Display format" }),
789
- /* @__PURE__ */ jsxRuntime.jsx(
745
+ configField && configPos ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
746
+ /* @__PURE__ */ jsxRuntime.jsx(
747
+ "div",
748
+ {
749
+ onClick: () => setConfigId(null),
750
+ style: { position: "fixed", inset: 0, zIndex: 50 }
751
+ }
752
+ ),
753
+ /* @__PURE__ */ jsxRuntime.jsxs(
754
+ "div",
755
+ {
756
+ style: {
757
+ position: "fixed",
758
+ left: Math.min(
759
+ configPos.x,
760
+ (typeof window !== "undefined" ? window.innerWidth : 1024) - 312
761
+ ),
762
+ top: configPos.y,
763
+ width: 300,
764
+ zIndex: 51,
765
+ border: "1px solid #e5e7eb",
766
+ borderRadius: 10,
767
+ padding: 12,
768
+ background: "#fff",
769
+ fontSize: 13,
770
+ color: "#374151",
771
+ boxShadow: "0 10px 30px rgba(0,0,0,0.18)"
772
+ },
773
+ children: [
774
+ /* @__PURE__ */ jsxRuntime.jsxs(
790
775
  "div",
791
776
  {
792
777
  style: {
793
778
  display: "flex",
794
- flexDirection: "column",
795
- border: "1px solid #e5e7eb",
796
- borderRadius: 8,
797
- overflow: "hidden"
779
+ alignItems: "center",
780
+ justifyContent: "space-between",
781
+ marginBottom: 8
798
782
  },
799
- children: DATE_FORMATS.map((fmt) => {
800
- const active = (configField.dateFormat ?? DEFAULT_DATE_FORMAT) === fmt;
801
- return /* @__PURE__ */ jsxRuntime.jsxs(
783
+ children: [
784
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
785
+ "\u{1F4C5} ",
786
+ configField.label || "Date"
787
+ ] }),
788
+ /* @__PURE__ */ jsxRuntime.jsx(
802
789
  "button",
803
790
  {
804
791
  type: "button",
805
- onClick: () => setConfig(configField.id, { dateFormat: fmt }),
792
+ onClick: () => setConfigId(null),
806
793
  style: {
807
- display: "flex",
808
- alignItems: "center",
809
- justifyContent: "space-between",
810
- padding: "7px 10px",
811
- border: "none",
812
- borderTop: "1px solid #f3f4f6",
813
- textAlign: "left",
814
- background: active ? `${primaryColor}14` : "#fff",
815
- color: active ? primaryColor : "#374151",
816
- fontWeight: active ? 600 : 400,
817
- fontSize: 13,
794
+ fontSize: 12,
795
+ padding: "3px 10px",
796
+ borderRadius: 6,
797
+ border: `1px solid ${primaryColor}`,
798
+ background: primaryColor,
799
+ color: "#fff",
818
800
  cursor: "pointer"
819
801
  },
820
- children: [
821
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: DATE_FORMAT_LABELS[fmt] }),
822
- active ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2713" }) : null
823
- ]
824
- },
825
- fmt
826
- );
827
- })
802
+ children: "Done"
803
+ }
804
+ )
805
+ ]
828
806
  }
829
- )
830
- ] }),
831
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
832
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
833
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
834
- /* @__PURE__ */ jsxRuntime.jsxs(
835
- "div",
836
- {
837
- style: {
838
- display: "inline-flex",
839
- alignItems: "center",
840
- border: "1px solid #d1d5db",
841
- borderRadius: 6,
842
- background: "#fff"
843
- },
844
- children: [
845
- /* @__PURE__ */ jsxRuntime.jsx(
846
- "input",
847
- {
848
- ref: minDateRef,
849
- type: "date",
850
- value: configField.minDate ?? "",
851
- onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
852
- style: {
853
- border: "none",
854
- outline: "none",
855
- background: "transparent",
856
- padding: "5px 8px",
857
- fontSize: 13,
858
- appearance: "none",
859
- WebkitAppearance: "none"
860
- }
861
- }
862
- ),
863
- /* @__PURE__ */ jsxRuntime.jsx(
864
- "button",
865
- {
866
- type: "button",
867
- "aria-label": "Open calendar",
868
- onClick: () => minDateRef.current?.showPicker?.(),
869
- style: {
870
- border: "none",
871
- background: "transparent",
872
- cursor: "pointer",
873
- fontSize: 14,
874
- lineHeight: 1,
875
- padding: "4px 8px 4px 2px"
876
- },
877
- children: "\u{1F4C5}"
878
- }
879
- )
880
- ]
881
- }
882
- ),
883
- configField.minDate ? /* @__PURE__ */ jsxRuntime.jsx(
884
- "button",
807
+ ),
808
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 10 }, children: [
809
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Display format" }),
810
+ /* @__PURE__ */ jsxRuntime.jsx(
811
+ "select",
885
812
  {
886
- type: "button",
887
- onClick: () => setConfig(configField.id, { minDate: null }),
813
+ value: configField.dateFormat ?? DEFAULT_DATE_FORMAT,
814
+ onChange: (e) => setConfig(configField.id, { dateFormat: e.target.value }),
888
815
  style: {
889
- padding: "5px 8px",
816
+ width: "100%",
817
+ padding: "6px 8px",
890
818
  borderRadius: 6,
891
819
  border: "1px solid #d1d5db",
892
- background: "#fff",
893
- color: "#6b7280",
894
- cursor: "pointer",
895
- fontSize: 12
820
+ fontSize: 13
896
821
  },
897
- children: "Clear"
822
+ children: DATE_FORMATS.map((fmt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: fmt, children: DATE_FORMAT_LABELS[fmt] }, fmt))
898
823
  }
899
- ) : null
824
+ )
900
825
  ] }),
901
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
902
- ] })
903
- ]
904
- }
905
- ) : null
826
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
827
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
828
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
829
+ /* @__PURE__ */ jsxRuntime.jsxs(
830
+ "div",
831
+ {
832
+ style: {
833
+ display: "inline-flex",
834
+ alignItems: "center",
835
+ border: "1px solid #d1d5db",
836
+ borderRadius: 6,
837
+ background: "#fff"
838
+ },
839
+ children: [
840
+ /* @__PURE__ */ jsxRuntime.jsx(
841
+ "input",
842
+ {
843
+ ref: minDateRef,
844
+ type: "date",
845
+ value: configField.minDate ?? "",
846
+ onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
847
+ style: {
848
+ border: "none",
849
+ outline: "none",
850
+ background: "transparent",
851
+ padding: "5px 8px",
852
+ fontSize: 13,
853
+ appearance: "none",
854
+ WebkitAppearance: "none"
855
+ }
856
+ }
857
+ ),
858
+ /* @__PURE__ */ jsxRuntime.jsx(
859
+ "button",
860
+ {
861
+ type: "button",
862
+ "aria-label": "Open calendar",
863
+ onClick: () => minDateRef.current?.showPicker?.(),
864
+ style: {
865
+ border: "none",
866
+ background: "transparent",
867
+ cursor: "pointer",
868
+ fontSize: 14,
869
+ lineHeight: 1,
870
+ padding: "4px 8px 4px 2px"
871
+ },
872
+ children: "\u{1F4C5}"
873
+ }
874
+ )
875
+ ]
876
+ }
877
+ ),
878
+ configField.minDate ? /* @__PURE__ */ jsxRuntime.jsx(
879
+ "button",
880
+ {
881
+ type: "button",
882
+ onClick: () => setConfig(configField.id, { minDate: null }),
883
+ style: {
884
+ padding: "5px 8px",
885
+ borderRadius: 6,
886
+ border: "1px solid #d1d5db",
887
+ background: "#fff",
888
+ color: "#6b7280",
889
+ cursor: "pointer",
890
+ fontSize: 12
891
+ },
892
+ children: "Clear"
893
+ }
894
+ ) : null
895
+ ] }),
896
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
897
+ ] })
898
+ ]
899
+ }
900
+ )
901
+ ] }) : null
906
902
  ] }),
907
903
  hideFieldList ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: "1 1 200px", minWidth: 180, maxWidth: 300 }, children: [
908
904
  /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 8px" }, children: [
@@ -957,7 +953,7 @@ function FieldDesigner({
957
953
  "aria-label": `Configure ${f.label}`,
958
954
  onClick: (e) => {
959
955
  e.stopPropagation();
960
- setConfigId(f.id);
956
+ openConfig(f.id, e);
961
957
  },
962
958
  style: {
963
959
  border: "none",