@sphereon/ui-components.ssi-react 0.4.1-next.179 → 0.4.1-next.181

package/dist/components/fields/TextInputField/index.d.ts

@@ -1,11 +1,14 @@
 import { CSSProperties, FC } from 'react';
 type Props = {
+    label?: string;
+    placeholder?: string;
+    type?: 'text' | 'password' | 'email';
     initialValue?: string;
     value?: string;
     onChangeValue?: (value: string) => Promise<void>;
-    placeholder?: string;
+    onChange?: (value: string) => void;
     maxLength?: number;
-    label?: string;
+    disabled?: boolean;
     style?: CSSProperties;
 };
 declare const TextInputField: FC<Props>;

package/dist/components/fields/TextInputField/index.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { TextFieldInputContainerStyled as Container, TextFieldInputInputStyled as Input, SSITextH2Styled as Label } from '../../../styles';
+import { useState } from 'react';
+import { TextFieldInputContainerStyled as Container, TextFieldInputWrapperStyled as Wrapper, TextFieldInputInputStyled as Input, TextFieldInputLabelStyled as Label, } from '../../../styles';
 const TextInputField = (props) => {
-    const { initialValue, label, placeholder, maxLength, onChangeValue, style } = props;
-    const [value, setValue] = React.useState(initialValue);
-    const [isFocused, setIsFocused] = useState(false);
-    const onChange = async (event) => {
-        setValue(event.target.value);
-        await onChangeValue?.(event.target.value);
+    const { label, placeholder, type = 'text', initialValue, maxLength, onChangeValue, onChange, disabled = false, style } = props;
+    const isControlled = props.value !== undefined;
+    const [internalValue, setInternalValue] = useState(initialValue ?? '');
+    const currentValue = isControlled ? props.value : internalValue;
+    const handleChange = async (event) => {
+        const newValue = event.target.value;
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+        await onChangeValue?.(newValue);
     };
-    const onFocus = () => {
-        setIsFocused(true);
-    };
-    const onBlur = () => {
-        setIsFocused(false);
-    };
-    return (_jsxs(Container, { style: { ...style }, children: [label && _jsx(Label, { children: label }), _jsx(Input, { onChange: onChange, value: value, placeholder: isFocused ? '' : placeholder, type: 'text', onFocus: onFocus, onBlur: onBlur, maxLength: maxLength })] }));
+    return (_jsx(Container, { style: { ...style }, children: _jsxs(Wrapper, { children: [_jsx(Input, { type: type, value: currentValue, onChange: handleChange, placeholder: placeholder, maxLength: maxLength, disabled: disabled }), label && _jsx(Label, { children: label })] }) }));
 };
 export default TextInputField;

package/dist/styles/components/components/TextInputField/index.d.ts

@@ -1,3 +1,5 @@
 import type { IStyledComponent } from 'styled-components';
 export declare const TextFieldInputContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const TextFieldInputWrapperStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const TextFieldInputInputStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+export declare const TextFieldInputLabelStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

package/dist/styles/components/components/TextInputField/index.js

@@ -1,27 +1,49 @@
-import { borderColors, fontColors } from '@sphereon/ui-components.core';
+import { backgroundColors, borderColors, elementColors, fontColors } from '@sphereon/ui-components.core';
 import styled from 'styled-components';
-import { SSITextH2Css } from '../../../css';
+import { SSITextH3Css, SSITextH7RegularCss } from '../../../css';
 export const TextFieldInputContainerStyled = styled.div `
-  display: flex;
-  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 56px;
 `;
-export const TextFieldInputInputStyled = styled.input `Retry
-  ${SSITextH2Css};
+export const TextFieldInputWrapperStyled = styled.div `
+  position: absolute;
+  inset: 0;
+  border: 1px solid ${elementColors.lightGrey};
+  border-radius: 4px;
+  background-color: ${backgroundColors.primaryLight};
+
+  &:focus-within {
+    border-color: ${borderColors.purple};
+  }
+`;
+export const TextFieldInputInputStyled = styled.input `
+  ${SSITextH3Css};
   color: ${fontColors.dark};
-  display: flex;
-  padding: 12px 16px;
-  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 16px;
+  border: none;
   border-radius: 4px;
-  border: 1px solid ${borderColors.lightGrey};
   outline: none;
-  background-color: unset;
-  font-family: Poppins, serif;
+  background-color: transparent;
+  font-family: Poppins, sans-serif;
 
-  &:focus {
-    border-color: ${borderColors.purple};
+  &::placeholder {
+    color: #727272;
   }
 
-  &:hover {
-    border-color: ${borderColors.purple};
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 `;
+export const TextFieldInputLabelStyled = styled.div `
+  ${SSITextH7RegularCss};
+  position: absolute;
+  top: -10px;
+  left: 12px;
+  padding: 0 4px;
+  background-color: ${backgroundColors.primaryLight};
+  color: ${fontColors.dark};
+`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.1-next.179+216c7c7",
+  "version": "0.4.1-next.181+028e087",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -50,7 +50,7 @@
     "@mui/x-date-pickers": "^8.18.0",
     "@sphereon/ssi-sdk.data-store-types": "0.36.1-next.159",
     "@sphereon/ssi-types": "0.36.1-next.159",
-    "@sphereon/ui-components.core": "0.4.1-next.179+216c7c7",
+    "@sphereon/ui-components.core": "0.4.1-next.181+028e087",
     "@tanstack/react-table": "^8.9.3",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -72,5 +72,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "216c7c7dd49b3f1ed6048ed17f746d5b477682da"
+  "gitHead": "028e0879c0ce5b40610fedf5895b0252119d05b5"
 }