@josephomills/esign 0.9.2 → 0.9.4

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 +147 -150
  2. package/dist/ui/index.cjs.map +1 -1
  3. package/dist/ui/index.js +147 -150
  4. package/dist/ui/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/ui/index.js CHANGED
@@ -364,6 +364,7 @@ function FieldDesigner({
364
364
  const [drawMode, setDrawMode] = useState(false);
365
365
  const [pendingType, setPendingType] = useState("signature");
366
366
  const [configId, setConfigId] = useState(null);
367
+ const [configPos, setConfigPos] = useState(null);
367
368
  const [drag, setDrag] = useState(null);
368
369
  const [live, setLive] = useState(null);
369
370
  const stageRef = useRef(null);
@@ -471,7 +472,6 @@ function FieldDesigner({
471
472
  onChange([...value, f]);
472
473
  setSelectedId(f.id);
473
474
  setDrawMode(false);
474
- if (isDate) setConfigId(f.id);
475
475
  } else {
476
476
  onChange(value.map((x) => x.id === drag.id ? { ...x, ...live } : x));
477
477
  }
@@ -490,6 +490,11 @@ function FieldDesigner({
490
490
  function setConfig(id, patch) {
491
491
  onChange(value.map((f) => f.id === id ? { ...f, ...patch } : f));
492
492
  }
493
+ function openConfig(id, e) {
494
+ const r = e.currentTarget.getBoundingClientRect();
495
+ setConfigPos({ x: r.left, y: r.bottom + 6 });
496
+ setConfigId(id);
497
+ }
493
498
  const configField = value.find((f) => f.id === configId && f.type === "date") ?? null;
494
499
  const handle = (id, geom, c) => {
495
500
  const cx = c[1] === "w" ? geom.x : geom.x + geom.w;
@@ -578,6 +583,7 @@ function FieldDesigner({
578
583
  {
579
584
  ref: stageRef,
580
585
  onPointerDown: (e) => {
586
+ setSelectedId(null);
581
587
  if (drawMode || e.pointerType === "mouse") setDrag({ mode: "new", start: rel(e) });
582
588
  },
583
589
  onPointerMove,
@@ -685,7 +691,7 @@ function FieldDesigner({
685
691
  onPointerDown: (e) => e.stopPropagation(),
686
692
  onClick: (e) => {
687
693
  e.stopPropagation();
688
- setConfigId(f.id);
694
+ openConfig(f.id, e);
689
695
  },
690
696
  style: {
691
697
  position: "absolute",
@@ -731,172 +737,163 @@ function FieldDesigner({
731
737
  ]
732
738
  }
733
739
  ),
734
- configField ? /* @__PURE__ */ jsxs(
735
- "div",
736
- {
737
- style: {
738
- marginTop: 10,
739
- border: `1px solid ${primaryColor}66`,
740
- borderRadius: 8,
741
- padding: 12,
742
- background: "#fff",
743
- fontSize: 13,
744
- color: "#374151"
745
- },
746
- children: [
747
- /* @__PURE__ */ jsxs(
748
- "div",
749
- {
750
- style: {
751
- display: "flex",
752
- alignItems: "center",
753
- justifyContent: "space-between",
754
- marginBottom: 8
755
- },
756
- children: [
757
- /* @__PURE__ */ jsxs("strong", { children: [
758
- "\u{1F4C5} ",
759
- configField.label || "Date"
760
- ] }),
761
- /* @__PURE__ */ jsx(
762
- "button",
763
- {
764
- type: "button",
765
- onClick: () => setConfigId(null),
766
- style: {
767
- fontSize: 12,
768
- padding: "3px 10px",
769
- borderRadius: 6,
770
- border: `1px solid ${primaryColor}`,
771
- background: primaryColor,
772
- color: "#fff",
773
- cursor: "pointer"
774
- },
775
- children: "Done"
776
- }
777
- )
778
- ]
779
- }
780
- ),
781
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
782
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Display format" }),
783
- /* @__PURE__ */ jsx(
740
+ configField && configPos ? /* @__PURE__ */ jsxs(Fragment, { children: [
741
+ /* @__PURE__ */ jsx(
742
+ "div",
743
+ {
744
+ onClick: () => setConfigId(null),
745
+ style: { position: "fixed", inset: 0, zIndex: 50 }
746
+ }
747
+ ),
748
+ /* @__PURE__ */ jsxs(
749
+ "div",
750
+ {
751
+ style: {
752
+ position: "fixed",
753
+ left: Math.min(
754
+ configPos.x,
755
+ (typeof window !== "undefined" ? window.innerWidth : 1024) - 312
756
+ ),
757
+ top: configPos.y,
758
+ width: 300,
759
+ zIndex: 51,
760
+ border: "1px solid #e5e7eb",
761
+ borderRadius: 10,
762
+ padding: 12,
763
+ background: "#fff",
764
+ fontSize: 13,
765
+ color: "#374151",
766
+ boxShadow: "0 10px 30px rgba(0,0,0,0.18)"
767
+ },
768
+ children: [
769
+ /* @__PURE__ */ jsxs(
784
770
  "div",
785
771
  {
786
772
  style: {
787
773
  display: "flex",
788
- flexDirection: "column",
789
- border: "1px solid #e5e7eb",
790
- borderRadius: 8,
791
- overflow: "hidden"
774
+ alignItems: "center",
775
+ justifyContent: "space-between",
776
+ marginBottom: 8
792
777
  },
793
- children: DATE_FORMATS.map((fmt) => {
794
- const active = (configField.dateFormat ?? DEFAULT_DATE_FORMAT) === fmt;
795
- return /* @__PURE__ */ jsxs(
778
+ children: [
779
+ /* @__PURE__ */ jsxs("strong", { children: [
780
+ "\u{1F4C5} ",
781
+ configField.label || "Date"
782
+ ] }),
783
+ /* @__PURE__ */ jsx(
796
784
  "button",
797
785
  {
798
786
  type: "button",
799
- onClick: () => setConfig(configField.id, { dateFormat: fmt }),
787
+ onClick: () => setConfigId(null),
800
788
  style: {
801
- display: "flex",
802
- alignItems: "center",
803
- justifyContent: "space-between",
804
- padding: "7px 10px",
805
- border: "none",
806
- borderTop: "1px solid #f3f4f6",
807
- textAlign: "left",
808
- background: active ? `${primaryColor}14` : "#fff",
809
- color: active ? primaryColor : "#374151",
810
- fontWeight: active ? 600 : 400,
811
- fontSize: 13,
789
+ fontSize: 12,
790
+ padding: "3px 10px",
791
+ borderRadius: 6,
792
+ border: `1px solid ${primaryColor}`,
793
+ background: primaryColor,
794
+ color: "#fff",
812
795
  cursor: "pointer"
813
796
  },
814
- children: [
815
- /* @__PURE__ */ jsx("span", { children: DATE_FORMAT_LABELS[fmt] }),
816
- active ? /* @__PURE__ */ jsx("span", { children: "\u2713" }) : null
817
- ]
818
- },
819
- fmt
820
- );
821
- })
797
+ children: "Done"
798
+ }
799
+ )
800
+ ]
822
801
  }
823
- )
824
- ] }),
825
- /* @__PURE__ */ jsxs("div", { children: [
826
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
827
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
828
- /* @__PURE__ */ jsxs(
829
- "div",
830
- {
831
- style: {
832
- display: "inline-flex",
833
- alignItems: "center",
834
- border: "1px solid #d1d5db",
835
- borderRadius: 6,
836
- background: "#fff"
837
- },
838
- children: [
839
- /* @__PURE__ */ jsx(
840
- "input",
841
- {
842
- ref: minDateRef,
843
- type: "date",
844
- value: configField.minDate ?? "",
845
- onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
846
- style: {
847
- border: "none",
848
- outline: "none",
849
- background: "transparent",
850
- padding: "5px 8px",
851
- fontSize: 13,
852
- appearance: "none",
853
- WebkitAppearance: "none"
854
- }
855
- }
856
- ),
857
- /* @__PURE__ */ jsx(
858
- "button",
859
- {
860
- type: "button",
861
- "aria-label": "Open calendar",
862
- onClick: () => minDateRef.current?.showPicker?.(),
863
- style: {
864
- border: "none",
865
- background: "transparent",
866
- cursor: "pointer",
867
- fontSize: 14,
868
- lineHeight: 1,
869
- padding: "4px 8px 4px 2px"
870
- },
871
- children: "\u{1F4C5}"
872
- }
873
- )
874
- ]
875
- }
876
- ),
877
- configField.minDate ? /* @__PURE__ */ jsx(
878
- "button",
802
+ ),
803
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: 10 }, children: [
804
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Display format" }),
805
+ /* @__PURE__ */ jsx(
806
+ "select",
879
807
  {
880
- type: "button",
881
- onClick: () => setConfig(configField.id, { minDate: null }),
808
+ value: configField.dateFormat ?? DEFAULT_DATE_FORMAT,
809
+ onChange: (e) => setConfig(configField.id, { dateFormat: e.target.value }),
882
810
  style: {
883
- padding: "5px 8px",
811
+ width: "100%",
812
+ padding: "6px 8px",
884
813
  borderRadius: 6,
885
814
  border: "1px solid #d1d5db",
886
- background: "#fff",
887
- color: "#6b7280",
888
- cursor: "pointer",
889
- fontSize: 12
815
+ fontSize: 13
890
816
  },
891
- children: "Clear"
817
+ children: DATE_FORMATS.map((fmt) => /* @__PURE__ */ jsx("option", { value: fmt, children: DATE_FORMAT_LABELS[fmt] }, fmt))
892
818
  }
893
- ) : null
819
+ )
894
820
  ] }),
895
- /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
896
- ] })
897
- ]
898
- }
899
- ) : null
821
+ /* @__PURE__ */ jsxs("div", { children: [
822
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
823
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
824
+ /* @__PURE__ */ jsxs(
825
+ "div",
826
+ {
827
+ style: {
828
+ display: "inline-flex",
829
+ alignItems: "center",
830
+ border: "1px solid #d1d5db",
831
+ borderRadius: 6,
832
+ background: "#fff"
833
+ },
834
+ children: [
835
+ /* @__PURE__ */ jsx(
836
+ "input",
837
+ {
838
+ ref: minDateRef,
839
+ type: "date",
840
+ value: configField.minDate ?? "",
841
+ onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
842
+ style: {
843
+ border: "none",
844
+ outline: "none",
845
+ background: "transparent",
846
+ padding: "5px 8px",
847
+ fontSize: 13,
848
+ appearance: "none",
849
+ WebkitAppearance: "none"
850
+ }
851
+ }
852
+ ),
853
+ /* @__PURE__ */ jsx(
854
+ "button",
855
+ {
856
+ type: "button",
857
+ "aria-label": "Open calendar",
858
+ onClick: () => minDateRef.current?.showPicker?.(),
859
+ style: {
860
+ border: "none",
861
+ background: "transparent",
862
+ cursor: "pointer",
863
+ fontSize: 14,
864
+ lineHeight: 1,
865
+ padding: "4px 8px 4px 2px"
866
+ },
867
+ children: "\u{1F4C5}"
868
+ }
869
+ )
870
+ ]
871
+ }
872
+ ),
873
+ configField.minDate ? /* @__PURE__ */ jsx(
874
+ "button",
875
+ {
876
+ type: "button",
877
+ onClick: () => setConfig(configField.id, { minDate: null }),
878
+ style: {
879
+ padding: "5px 8px",
880
+ borderRadius: 6,
881
+ border: "1px solid #d1d5db",
882
+ background: "#fff",
883
+ color: "#6b7280",
884
+ cursor: "pointer",
885
+ fontSize: 12
886
+ },
887
+ children: "Clear"
888
+ }
889
+ ) : null
890
+ ] }),
891
+ /* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 11 }, children: "Leave blank to use the document's creation date." })
892
+ ] })
893
+ ]
894
+ }
895
+ )
896
+ ] }) : null
900
897
  ] }),
901
898
  hideFieldList ? null : /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 200px", minWidth: 180, maxWidth: 300 }, children: [
902
899
  /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 8px" }, children: [
@@ -951,7 +948,7 @@ function FieldDesigner({
951
948
  "aria-label": `Configure ${f.label}`,
952
949
  onClick: (e) => {
953
950
  e.stopPropagation();
954
- setConfigId(f.id);
951
+ openConfig(f.id, e);
955
952
  },
956
953
  style: {
957
954
  border: "none",