uibee 2.16.35 → 2.16.37

package/dist/src/components/inputs/input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useRef, useState, useId } from 'react';
 import { Calendar, Clock } from 'lucide-react';
 import { FieldWrapper } from './shared';
 import DateTimePickerPopup from './shared/dateTimePickerPopup';
@@ -10,6 +10,8 @@ export default function Input(props) {
     const { type = 'text', value } = inputProps;
     const localRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
+    const id = useId();
+    const anchorName = `--input-${id.replace(/:/g, '')}`;
     const containerRef = useClickOutside(() => setIsOpen(false));
     const isDateType = ['date', 'datetime-local', 'time'].includes(type);
     const isColorType = type === 'color';
@@ -108,7 +110,7 @@ export default function Input(props) {
     return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, description: description, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
                             absolute left-3 text-login-200
                             ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
-                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: isClickableType ? undefined : name, type: isClickableType ? 'text' : type, value: isDateType ? getDateDisplayValue() : value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: isClickableType ? undefined : name, type: isClickableType ? 'text' : type, value: isDateType ? getDateDisplayValue() : value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), "aria-describedby": error ? `${name}-error` : undefined, style: { anchorName }, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
@@ -118,5 +120,5 @@ export default function Input(props) {
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
-                    ` }), isClickableType && (_jsx("input", { type: 'hidden', name: name, value: value })), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
+                    ` }), isClickableType && (_jsx("input", { type: 'hidden', name: name, value: value })), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false), anchorName: anchorName })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false), anchorName: anchorName }))] }) }));
 }

package/dist/src/components/inputs/shared/colorPickerPopup.d.ts

@@ -3,5 +3,6 @@ export type ColorPickerPopupProps = {
     value: string;
     onChange: (color: string) => void;
     onClose: () => void;
+    anchorName?: string;
 };
-export default function ColorPickerPopup({ value, onChange, onClose }: ColorPickerPopupProps): JSX.Element;
+export default function ColorPickerPopup({ value, onChange, onClose, anchorName }: ColorPickerPopupProps): JSX.Element;

package/dist/src/components/inputs/shared/colorPickerPopup.js

@@ -142,7 +142,7 @@ function HuePicker({ hue, onChange }) {
                     top-1/2 pointer-events-none
                 `, style: { left: `${(hue / 360) * 100}%` } }) }));
 }
-export default function ColorPickerPopup({ value, onChange, onClose }) {
+export default function ColorPickerPopup({ value, onChange, onClose, anchorName }) {
     const [hsv, setHsv] = useState(() => hexToHsv(value || '#000000'));
     const [hexInput, setHexInput] = useState(value || '#000000');
     useEffect(() => {
@@ -168,7 +168,13 @@ export default function ColorPickerPopup({ value, onChange, onClose }) {
             onChange(val);
         }
     }
-    return (_jsxs("div", { className: 'absolute top-full left-0 mt-1 z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none', children: [_jsx(SaturationPicker, { hsv: hsv, onChange: handleSaturationChange }), _jsx(HuePicker, { hue: hsv.h, onChange: handleHueChange }), _jsxs("div", { className: 'flex items-center gap-2 mb-3', children: [_jsx("div", { className: 'text-xs text-login-200 font-mono', children: "HEX" }), _jsx("input", { type: 'text', value: hexInput, onChange: manualHexChange, className: `
+    return (_jsxs("div", { className: 'fixed z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none anchor-popup', style: {
+            positionAnchor: anchorName,
+            positionArea: 'bottom span-right',
+            insetArea: 'bottom span-right',
+            positionTryFallbacks: 'flip-block',
+            margin: '0.25rem 0',
+        }, children: [_jsx(SaturationPicker, { hsv: hsv, onChange: handleSaturationChange }), _jsx(HuePicker, { hue: hsv.h, onChange: handleHueChange }), _jsxs("div", { className: 'flex items-center gap-2 mb-3', children: [_jsx("div", { className: 'text-xs text-login-200 font-mono', children: "HEX" }), _jsx("input", { type: 'text', value: hexInput, onChange: manualHexChange, className: `
                         flex-1 min-w-0 bg-login-500 border border-login-500 rounded
                         px-2 py-1 text-sm text-login-text focus:outline-none
                         focus:border-login focus:ring-1 focus:ring-login

package/dist/src/components/inputs/shared/dateTimePickerPopup.d.ts

@@ -3,6 +3,7 @@ type DateTimePickerPopupProps = {
     onChange: (date: Date) => void;
     type: 'date' | 'time' | 'datetime-local';
     onClose?: () => void;
+    anchorName?: string;
 };
-export default function DateTimePickerPopup({ value, onChange, type, onClose, }: DateTimePickerPopupProps): import("react/jsx-runtime").JSX.Element;
+export default function DateTimePickerPopup({ value, onChange, type, onClose, anchorName, }: DateTimePickerPopupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/inputs/shared/dateTimePickerPopup.js

@@ -6,7 +6,7 @@ const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
 ];
-export default function DateTimePickerPopup({ value, onChange, type, onClose, }) {
+export default function DateTimePickerPopup({ value, onChange, type, onClose, anchorName, }) {
     const [currentDate, setCurrentDate] = useState(new Date());
     const [timeInput, setTimeInput] = useState({
         hours: value ? value.getHours().toString() : '0',
@@ -118,5 +118,11 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
                             border border-login-500 focus:border-login outline-none
                         ` })] })] }));
     }
-    return (_jsxs("div", { className: 'absolute top-full left-0 z-50 mt-1 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70', children: [type !== 'time' && renderCalendar(), (type === 'time' || type === 'datetime-local') && renderTimePicker()] }));
+    return (_jsxs("div", { className: 'fixed z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70 anchor-popup', style: {
+            positionAnchor: anchorName,
+            positionArea: 'bottom span-right',
+            insetArea: 'bottom span-right',
+            positionTryFallbacks: 'flip-block',
+            margin: '0.25rem 0',
+        }, children: [type !== 'time' && renderCalendar(), (type === 'time' || type === 'datetime-local') && renderTimePicker()] }));
 }

package/dist/src/components/table/header.js

@@ -2,13 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
+function parseOrder(value) {
+    return value === 'asc' || value === 'desc' ? value : undefined;
+}
 export default function Header({ columns, hideMenu, variant = 'default' }) {
-    const [column, setColumn] = useState(columns[0]?.key || '');
-    const [order, setOrder] = useState('asc');
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
+    const [column, setColumn] = useState(searchParams.get('column') ?? '');
+    const [order, setOrder] = useState(parseOrder(searchParams.get('order')));
     useEffect(() => {
+        if (!column || !order) {
+            return;
+        }
         const params = new URLSearchParams(searchParams.toString());
         if (searchParams.get('order') !== order ||
             searchParams.get('column') !== column) {

package/dist/src/globals.css

@@ -333,6 +333,14 @@
   .end {
     inset-inline-end: var(--spacing);
   }
+  .anchor-popup {
+    top: 100%;
+    left: 0;
+    @supports (position-anchor: --foo) {
+      top: auto;
+      left: auto;
+    }
+  }
   .-top-3 {
     top: calc(var(--spacing) * -3);
   }
@@ -360,9 +368,6 @@
   .top-16 {
     top: calc(var(--spacing) * 16);
   }
-  .top-full {
-    top: 100%;
-  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.16.35",
+  "version": "2.16.37",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -57,4 +57,4 @@
     "remark-gfm": "^4.0.1",
     "utilbee": "^1.4.5"
   }
-}
+}

package/src/components/inputs/input.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type JSX, useRef, useState } from 'react'
+import { type ChangeEvent, type JSX, useRef, useState, useId } from 'react'
 import { Calendar, Clock } from 'lucide-react'
 import { FieldWrapper } from './shared'
 import DateTimePickerPopup from './shared/dateTimePickerPopup'
@@ -21,6 +21,8 @@ export default function Input(props: InputProps) {
     const { type = 'text', value } = inputProps
     const localRef = useRef<HTMLInputElement>(null)
     const [isOpen, setIsOpen] = useState(false)
+    const id = useId()
+    const anchorName = `--input-${id.replace(/:/g, '')}`
 
     const containerRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
 
@@ -157,9 +159,8 @@ export default function Input(props: InputProps) {
                     value={isDateType ? getDateDisplayValue() : value}
                     readOnly={isClickableType}
                     onClick={() => isClickableType && !inputProps.disabled && setIsOpen(true)}
-                    title={label}
-                    aria-invalid={!!error}
                     aria-describedby={error ? `${name}-error` : undefined}
+                    style={{ anchorName } as any}
                     className={`
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200
@@ -181,6 +182,7 @@ export default function Input(props: InputProps) {
                         onChange={handleDateChange}
                         type={type as 'date' | 'time' | 'datetime-local'}
                         onClose={() => setIsOpen(false)}
+                        anchorName={anchorName}
                     />
                 )}
                 {isOpen && isColorType && !inputProps.disabled && (
@@ -188,6 +190,7 @@ export default function Input(props: InputProps) {
                         value={value as string || ''}
                         onChange={handleColorChange}
                         onClose={() => setIsOpen(false)}
+                        anchorName={anchorName}
                     />
                 )}
             </div>

package/src/components/inputs/shared/colorPickerPopup.tsx

@@ -4,6 +4,7 @@ export type ColorPickerPopupProps = {
     value: string
     onChange: (color: string) => void
     onClose: () => void
+    anchorName?: string
 }
 
 function hexToHsv(hex: string): { h: number; s: number; v: number } {
@@ -159,7 +160,7 @@ function HuePicker({ hue, onChange }: { hue: number, onChange: (h: number) => vo
     )
 }
 
-export default function ColorPickerPopup({ value, onChange, onClose }: ColorPickerPopupProps): JSX.Element {
+export default function ColorPickerPopup({ value, onChange, onClose, anchorName }: ColorPickerPopupProps): JSX.Element {
     const [hsv, setHsv] = useState(() => hexToHsv(value || '#000000'))
     const [hexInput, setHexInput] = useState(value || '#000000')
 
@@ -191,7 +192,16 @@ export default function ColorPickerPopup({ value, onChange, onClose }: ColorPick
     }
 
     return (
-        <div className='absolute top-full left-0 mt-1 z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none'>
+        <div 
+            className='fixed z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-3 w-64 select-none anchor-popup'
+            style={{
+                positionAnchor: anchorName,
+                positionArea: 'bottom span-right',
+                insetArea: 'bottom span-right',
+                positionTryFallbacks: 'flip-block',
+                margin: '0.25rem 0',
+            } as React.CSSProperties}
+        >
             <SaturationPicker hsv={hsv} onChange={handleSaturationChange} />
             <HuePicker hue={hsv.h} onChange={handleHueChange} />
 

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -6,6 +6,7 @@ type DateTimePickerPopupProps = {
     onChange: (date: Date) => void
     type: 'date' | 'time' | 'datetime-local'
     onClose?: () => void
+    anchorName?: string
 }
 
 const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
@@ -19,6 +20,7 @@ export default function DateTimePickerPopup({
     onChange,
     type,
     onClose,
+    anchorName,
 }: DateTimePickerPopupProps) {
     const [currentDate, setCurrentDate] = useState(new Date())
     const [timeInput, setTimeInput] = useState({
@@ -218,7 +220,16 @@ export default function DateTimePickerPopup({
     }
 
     return (
-        <div className='absolute top-full left-0 z-50 mt-1 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70'>
+        <div 
+            className='fixed z-50 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70 anchor-popup'
+            style={{
+                positionAnchor: anchorName,
+                positionArea: 'bottom span-right',
+                insetArea: 'bottom span-right',
+                positionTryFallbacks: 'flip-block',
+                margin: '0.25rem 0',
+            } as React.CSSProperties}
+        >
             {type !== 'time' && renderCalendar()}
             {(type === 'time' || type === 'datetime-local') && renderTimePicker()}
         </div>

package/src/components/table/header.tsx

@@ -9,14 +9,22 @@ type HeaderProps = {
     variant?: 'default' | 'minimal'
 }
 
+function parseOrder(value: string | null) {
+    return value === 'asc' || value === 'desc' ? value : undefined
+}
+
 export default function Header({ columns, hideMenu, variant = 'default' }: HeaderProps) {
-    const [column, setColumn] = useState(columns[0]?.key || '')
-    const [order, setOrder] = useState<'asc' | 'desc'>('asc')
     const router = useRouter()
     const pathname = usePathname()
     const searchParams = useSearchParams()
+    const [column, setColumn] = useState(searchParams.get('column') ?? '')
+    const [order, setOrder] = useState<'asc' | 'desc' | undefined>(parseOrder(searchParams.get('order')))
 
     useEffect(() => {
+        if (!column || !order) {
+            return
+        }
+
         const params = new URLSearchParams(searchParams.toString())
         if (
             searchParams.get('order') !== order ||

package/src/globals.css

@@ -205,6 +205,16 @@
     font-weight: 500;
 }
 
+@utility anchor-popup {
+    top: 100%;
+    left: 0;
+    
+    @supports (position-anchor: --foo) {
+        top: auto;
+        left: auto;
+    }
+}
+
 /* Hide default browser icons/buttons for inputs */
 input::-webkit-calendar-picker-indicator {
     display: none !important;