uibee 2.7.10 → 2.7.12

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

@@ -36,5 +36,5 @@ export default function TagInput({ label, name, value = [], onChange, placeholde
                     disabled:opacity-50 disabled:cursor-not-allowed
                     transition-all duration-200
                     ${error ? 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500' : ''}
-                `, children: [value.map((tag, index) => (_jsxs("span", { className: 'flex items-center gap-1 px-2 py-1 bg-login rounded text-sm text-white', children: [tag, !disabled && (_jsx("button", { type: 'button', onClick: () => removeTag(index), className: 'hover:text-red-200 transition-colors', children: _jsx(X, { size: 14 }) }))] }, index))), _jsx("input", { type: 'text', value: inputValue, required: required && value.length === 0, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, disabled: disabled, placeholder: value.length === 0 ? placeholder : '', className: 'flex-1 bg-transparent outline-none min-w-30 text-login-text placeholder:text-login-200' })] }), value.map((tag, index) => (_jsx("input", { type: 'hidden', name: `${name}[${index}]`, value: tag }, index)))] }));
+                `, children: [value.map((tag, index) => (_jsxs("span", { className: 'flex items-center gap-1 px-2 py-1 bg-login rounded text-sm text-white', children: [tag, !disabled && (_jsx("button", { type: 'button', onClick: () => removeTag(index), className: 'hover:text-red-200 transition-colors', children: _jsx(X, { size: 14 }) }))] }, index))), _jsx("input", { type: 'text', value: inputValue, required: required && value.length === 0, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, disabled: disabled, placeholder: value.length === 0 ? placeholder : '', className: 'flex-1 bg-transparent outline-none min-w-30 text-login-text placeholder:text-login-200' })] }), _jsx("input", { type: 'hidden', name: name, value: value.join(',') })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.7.10",
+  "version": "2.7.12",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

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

@@ -12,6 +12,7 @@ interface SelectionWrapperProps {
     children: ReactNode
     className?: string
     disabled?: boolean
+    hideError?: boolean
 }
 
 export default function SelectionWrapper({
@@ -23,6 +24,7 @@ export default function SelectionWrapper({
     children,
     className,
     disabled,
+    hideError,
 }: SelectionWrapperProps) {
     return (
         <div className={`flex flex-col gap-1 ${className || ''}`}>
@@ -41,7 +43,7 @@ export default function SelectionWrapper({
                 </div>
                 {info && <InputInfo info={info} />}
             </div>
-            <InputError error={error} />
+            {!hideError && <InputError error={error} />}
         </div>
     )
 }

package/src/components/inputs/switch.tsx

@@ -11,6 +11,7 @@ export type SwitchProps = {
     error?: string
     info?: string
     required?: boolean
+    switchOnly?: boolean
 }
 
 export default function Switch({
@@ -23,6 +24,7 @@ export default function Switch({
     error,
     info,
     required,
+    switchOnly,
 }: SwitchProps) {
     return (
         <SelectionWrapper
@@ -31,10 +33,11 @@ export default function Switch({
             required={required}
             info={info}
             error={error}
+            hideError={switchOnly}
             className={className}
             disabled={disabled}
         >
-            <label className='relative inline-flex items-center cursor-pointer h-10.5'>
+            <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`}>
                 <input
                     type='checkbox'
                     id={name}
@@ -48,7 +51,7 @@ export default function Switch({
                 <div className={`
                     w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
-                    after:content-[''] after:absolute after:top-2.75 after:left-0.5 
+                    after:content-[''] after:absolute ${switchOnly ? 'top-0.5' : 'top-2.75'} after:left-0.5 
                     after:bg-white after:border-gray-300 after:border after:rounded-full 
                     after:h-5 after:w-5 after:transition-all peer-checked:bg-login
                     ${disabled ? 'opacity-50 cursor-not-allowed' : ''}

package/src/components/inputs/tagInput.tsx

@@ -99,14 +99,11 @@ export default function TagInput({
                     className='flex-1 bg-transparent outline-none min-w-30 text-login-text placeholder:text-login-200'
                 />
             </div>
-            {value.map((tag, index) => (
-                <input
-                    key={index}
-                    type='hidden'
-                    name={`${name}[${index}]`}
-                    value={tag}
-                />
-            ))}
+            <input
+                type='hidden'
+                name={name}
+                value={value.join(',')}
+            />
         </FieldWrapper>
     )
 }