@astralui/core 0.1.13 → 0.1.15

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.
package/dist/index.d.cts CHANGED
@@ -148,8 +148,11 @@ interface Props {
148
148
  style?: CSSProperties;
149
149
  disabled?: boolean;
150
150
  'aria-label'?: string;
151
+ /** So a visible <label htmlFor> can name it. aria-label names the control
152
+ * too, but only htmlFor also makes clicking the label focus it. */
153
+ id?: string;
151
154
  }
152
- declare function DateInput({ type, value, onChange, min, max, className, style, disabled, 'aria-label': ariaLabel }: Props): react.JSX.Element;
155
+ declare function DateInput({ type, value, onChange, min, max, className, style, disabled, id, 'aria-label': ariaLabel }: Props): react.JSX.Element;
153
156
 
154
157
  declare function Spinner({ size, className, style }: {
155
158
  size?: number;
package/dist/index.d.ts CHANGED
@@ -148,8 +148,11 @@ interface Props {
148
148
  style?: CSSProperties;
149
149
  disabled?: boolean;
150
150
  'aria-label'?: string;
151
+ /** So a visible <label htmlFor> can name it. aria-label names the control
152
+ * too, but only htmlFor also makes clicking the label focus it. */
153
+ id?: string;
151
154
  }
152
- declare function DateInput({ type, value, onChange, min, max, className, style, disabled, 'aria-label': ariaLabel }: Props): react.JSX.Element;
155
+ declare function DateInput({ type, value, onChange, min, max, className, style, disabled, id, 'aria-label': ariaLabel }: Props): react.JSX.Element;
153
156
 
154
157
  declare function Spinner({ size, className, style }: {
155
158
  size?: number;
package/dist/index.js CHANGED
@@ -610,12 +610,21 @@ function AstralMenu({ trigger, items, align = "end", width = 220 }) {
610
610
  if (menuRef.current?.contains(e.target)) return;
611
611
  setOpen(false);
612
612
  };
613
+ const onKey = (e) => {
614
+ if (e.key !== "Escape") return;
615
+ e.preventDefault();
616
+ e.stopPropagation();
617
+ setOpen(false);
618
+ anchorRef.current?.querySelector(FOCUSABLE)?.focus();
619
+ };
613
620
  window.addEventListener("scroll", onScroll, true);
614
621
  window.addEventListener("resize", onResize);
622
+ window.addEventListener("keydown", onKey, true);
615
623
  document.addEventListener("mousedown", onDoc, true);
616
624
  return () => {
617
625
  window.removeEventListener("scroll", onScroll, true);
618
626
  window.removeEventListener("resize", onResize);
627
+ window.removeEventListener("keydown", onKey, true);
619
628
  document.removeEventListener("mousedown", onDoc, true);
620
629
  };
621
630
  }, [open, reposition]);
@@ -757,7 +766,7 @@ function dateTimeToInputStr(d) {
757
766
  if (!d || isNaN(d.getTime())) return "";
758
767
  return `${dateToInputStr(d)}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
759
768
  }
760
- function DateInput({ type = "date", value, onChange, min, max, className, style, disabled, "aria-label": ariaLabel }) {
769
+ function DateInput({ type = "date", value, onChange, min, max, className, style, disabled, id, "aria-label": ariaLabel }) {
761
770
  const isTime = type === "datetime-local";
762
771
  const fmt = isTime ? dateTimeToInputStr : dateToInputStr;
763
772
  const [s, setS] = useState(() => fmt(value));
@@ -786,6 +795,7 @@ function DateInput({ type = "date", value, onChange, min, max, className, style,
786
795
  className,
787
796
  style,
788
797
  disabled,
798
+ id,
789
799
  "aria-label": ariaLabel,
790
800
  value: s,
791
801
  min: min ? fmt(min) : void 0,