@solidxai/core-ui 0.1.9-beta.19 → 0.1.9-beta.20

package/dist/components/shad-cn-ui/SolidSelect.tsx

@@ -13,6 +13,7 @@ type SolidSelectProps = {
   disabled?: boolean;
   onChange?: (event: { value: any }) => void;
   id?: string;
+  native?: boolean;
 };
 
 function cx(...parts: Array<string | false | undefined>) {
@@ -29,7 +30,12 @@ export function SolidSelect({
   disabled,
   onChange,
   id,
+  native = true,
 }: SolidSelectProps) {
+  const [open, setOpen] = React.useState(false);
+  const [openUpward, setOpenUpward] = React.useState(false);
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const menuRef = React.useRef<HTMLDivElement | null>(null);
   const normalized = options.map((option, index) => ({
     key: String(index),
     label: option?.[optionLabel] ?? "",
@@ -38,6 +44,95 @@ export function SolidSelect({
 
   const selectedIndex = normalized.findIndex((item) => item.value === value);
   const selectedKey = selectedIndex >= 0 ? normalized[selectedIndex].key : "";
+  const selectedOption = selectedIndex >= 0 ? normalized[selectedIndex] : null;
+
+  React.useEffect(() => {
+    if (!open) return;
+
+    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open]);
+
+  React.useLayoutEffect(() => {
+    if (!open || native || !rootRef.current || !menuRef.current) return;
+
+    const rootRect = rootRef.current.getBoundingClientRect();
+    const menuHeight = menuRef.current.offsetHeight;
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rootRect.bottom;
+    const spaceAbove = rootRect.top;
+    const needsOpenUpward = spaceBelow < menuHeight + 8 && spaceAbove > spaceBelow;
+
+    setOpenUpward(needsOpenUpward);
+  }, [open, native, options.length]);
+
+  if (!native) {
+    return (
+      <div ref={rootRef} className={cx("solid-select-wrap", "solid-select-wrap-custom", className)}>
+        <button
+          id={id}
+          type="button"
+          className="solid-select solid-select-trigger"
+          disabled={disabled}
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          onClick={() => {
+            if (disabled) return;
+            setOpen((prev) => !prev);
+          }}
+        >
+          <span className={cx("solid-select-trigger-label", !selectedOption && "solid-select-placeholder")}>
+            {selectedOption?.label || placeholder || "Select"}
+          </span>
+          <span className="solid-select-icon" aria-hidden="true">
+            <ChevronDown size={14} />
+          </span>
+        </button>
+        {open ? (
+          <div
+            ref={menuRef}
+            className={cx("solid-select-menu", openUpward && "solid-select-menu-top")}
+            role="listbox"
+          >
+            {normalized.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                role="option"
+                className={cx("solid-select-menu-item", item.value === value && "is-selected")}
+                aria-selected={item.value === value}
+                onClick={() => {
+                  onChange?.({ value: item.value });
+                  setOpen(false);
+                }}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
 
   return (
     <div className={cx("solid-select-wrap", className)}>

package/dist/resources/globals.css

@@ -196,21 +196,86 @@ a {
   color: white;
 }
 
-.react-datepicker {
+.solid-react-datepicker-calendar {
   width: auto;
   min-width: 240px;
+  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--foreground);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
+  overflow: hidden;
 }
 
-.react-datepicker__month-container {
+.solid-react-datepicker-calendar .react-datepicker__month-container {
   float: left;
   width: auto;
 }
 
-.react-datepicker__time-container {
-  min-width: 160px;
-  border-left: 1px solid rgba(15, 23, 42, 0.1);
+.solid-react-datepicker-calendar .react-datepicker__header {
+  background: color-mix(in srgb, var(--card) 92%, white 8%);
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__current-month,
+.solid-react-datepicker-calendar .react-datepicker-time__header,
+.solid-react-datepicker-calendar .react-datepicker-year-header {
+  color: var(--foreground);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container {
+  min-width: 112px;
+  width: 112px;
+  border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time,
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box,
+.solid-react-datepicker-calendar .react-datepicker__header--time {
+  width: 100%;
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--border) 80%, transparent) transparent;
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
+  min-height: 34px;
+  height: auto;
+  padding: 7px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
+  background: var(--accent);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
+  background: color-mix(in srgb, var(--primary) 16%, var(--card));
+  color: var(--foreground);
+  font-weight: 600;
+}
+
+.solid-react-datepicker-calendar.react-datepicker--time-only {
+  min-width: 0;
+}
+
+.solid-react-datepicker-calendar.react-datepicker--time-only .react-datepicker__time-container {
+  width: 100%;
+  min-width: 0;
+  border-left: 0;
 }
 
+.solid-react-datepicker-calendar.react-datepicker--time-only .react-datepicker__header--time {
+  padding-inline: 12px;
+}
+
+.solid-react-datepicker-popper.react-datepicker-popper,
 .react-datepicker-popper {
   z-index: 10000 !important;
 }
@@ -1817,7 +1882,7 @@ li.header-li-px {
 }
 
 .solid-form-wrapper .solid-form-content {
-  height: calc(100vh - 170px);
+  /* height: calc(100vh - 170px); */
   /* calc(100dvh - 128px) */
   /* height: calc(100vh - 145px); */
   /* height: calc(100vh - 111px); */
@@ -1829,8 +1894,23 @@ li.header-li-px {
   scrollbar-gutter: stable;
 }
 
-.solid-create-mode-form-content {
-  height: calc(100vh - 162px) !important;
+
+.solid-form-wrapper .solid-form-content.solid-form-view,
+  .solid-form-content.solid-edit-mode-form-content{
+  height: calc(100vh - 168px) !important;
+}
+
+.solid-form-wrapper .solid-form-content.solid-form-edit,
+.solid-form-content.solid-create-mode-form-content{
+  height: calc(100vh - 140px) !important;
+}
+
+.solid-inline-relation-dialog .solid-form-content,
+.solid-inline-relation-dialog .solid-create-mode-form-content {
+  height: auto !important;
+  min-height: 0;
+  max-height: none !important;
+  overflow: visible !important;
 }
 
 .chatter-collapse-btn {
@@ -2017,7 +2097,7 @@ li.header-li-px {
   border-radius: 8px;
   border: 1px solid var(--solid-file-wrapper);
   padding: 10px;
-  margin-top: 10px;
+  margin: 10px;
 }
 
 .solid-file-vieww-wrapper {
@@ -2083,7 +2163,7 @@ li.header-li-px {
   pointer-events: none;
 }
 
-.arrow-stepper-container > * {
+.arrow-stepper-container>* {
   pointer-events: auto;
 }
 
@@ -2759,7 +2839,7 @@ li.header-li-px {
 }
 
 .solid-custom-filter-wrapper {
-  z-index: 85;
+  z-index: 58;
 }
 
 .custom-filter-button {
@@ -4371,7 +4451,7 @@ li.header-li-px {
   max-width: min(320px, calc(100vw - 40px));
 }
 
-.solid-form-stepper-overlay > div {
+.solid-form-stepper-overlay>div {
   min-width: inherit;
 }
 
@@ -6060,6 +6140,7 @@ html.dark .solid-empty-listview-secondary-action.solid-btn,
   0% {
     transform: translateX(-110%);
   }
+
   100% {
     transform: translateX(290%);
   }