v1.1.84

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fratch-ui",
-  "version": "1.1.83",
+  "version": "1.1.84",
   "repository": {
     "type": "git",
     "url": "https://github.com/JorgeRojo/fratch-ui.git"

src/components/Form/InputText/InputText.tsx

@@ -10,8 +10,10 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
   (
     {
       className,
+      cleanable,
       cleanerClassName,
       disabled,
+      id,
       onBlur,
       onChange,
       onClean,
@@ -20,10 +22,9 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       onKeyDownCapture,
       placeholder,
       readOnly,
+      title,
       type = 'text',
       value,
-      title,
-      cleanable,
     }: InputTextProps,
     ref
   ) => {
@@ -53,6 +54,8 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
     return (
       <div className={c(styles.input_wrapper, className)}>
         <input
+          id={id}
+          name={id}
           className={c(styles.input)}
           disabled={disabled}
           onBlur={onBlur}
@@ -63,8 +66,8 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
           placeholder={placeholder}
           readOnly={readOnly}
           ref={setInnerRef}
-          type={type}
           title={title}
+          type={type}
         />
         {cleanable && (
           <button

src/components/Form/InputText/InputTextProps.ts

@@ -1,17 +1,18 @@
 export interface InputTextProps {
   className?: string;
+  cleanable?: boolean;
   cleanerClassName?: string;
   disabled?: boolean;
+  id?: string;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+  onClean?: (element?: HTMLInputElement) => void;
   onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onClean?: (element?: HTMLInputElement) => void;
   onKeyDownCapture?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
   readOnly?: boolean;
+  title?: string;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
   value?: string;
-  title?: string;
-  cleanable?: boolean;
 }

src/components/Form/LeftLabeledField/LeftLabeledField.module.css

@@ -11,7 +11,7 @@
   border-left: var(--ft-form-item-border);
   border-top: var(--ft-form-item-border);
   border-bottom: var(--ft-form-item-border);
-  padding: var(--ft-form-item-padding-y);
+  padding: 0 16px;
   white-space: nowrap;
   border-radius: var(--ft-form-item-border-radius) 0 0
     var(--ft-form-item-border-radius);

src/components/Form/LeftLabeledField/LeftLabeledField.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Select from '../Select/Select';
+import { SelectOption } from '../Select/SelectProps';
 import LeftLabeledField from './LeftLabeledField';
 
 const meta = {
@@ -16,9 +17,19 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof LeftLabeledField>;
 
+const labelId = 'labelId';
+const options: SelectOption<string>[] = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+];
+
 export const Docs: Story = {
   args: {
-    label: <label>Label</label>,
-    field: <Select options={[]} />,
+    label: (
+      <label style={{ background: '#ccc', padding: '8px' }} htmlFor={labelId}>
+        Label text...
+      </label>
+    ),
+    field: <Select id={labelId} searchable options={options} />,
   },
 };

src/components/Form/Select/Select.tsx

@@ -44,24 +44,24 @@ function filterOptionByText<T>(text: string) {
 }
 
 const useHideOnClickedOutside = ({
-  id,
+  uid,
   setVisible,
 }: {
-  id: string;
+  uid: string;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }): void => {
   // hide options list when clicked outside
   useEffect(() => {
     const handleDocumentClick = (event: MouseEvent): void => {
-      if (!isAscendantEvenTargetByID(event, id)) {
+      if (!isAscendantEvenTargetByID(event, uid)) {
         setVisible(false);
       }
     };
     window.document.body.addEventListener('click', handleDocumentClick);
     return () => {
       window.document.body.removeEventListener('click', handleDocumentClick);
     };
-  }, [id, setVisible]);
+  }, [uid, setVisible]);
 };
 
 const useHideOnTriggerDOMRectChange = ({
@@ -185,16 +185,17 @@ function Select<T>({
   className = '',
   cleanable = false,
   disabled = false,
+  id,
   noResultsElement,
   onChange,
   onClean,
   options,
   placeholder = '',
   searchable = false,
-  value,
   triggerElementRef,
+  value,
 }: SelectProps<T>): JSX.Element {
-  const [id] = useState<string>(uuid());
+  const [uid] = useState<string>(uuid());
   const newTriggerRef = useRef<HTMLInputElement>(null);
   const triggerRef = triggerElementRef ?? newTriggerRef;
   const [selectedLabel, setSelectedLabel] = useState<string>('');
@@ -205,13 +206,13 @@ function Select<T>({
     useState<SelectOption<T>[]>(options);
 
   useEffect(() => {
-    selectInstances.set(id, {
+    selectInstances.set(uid, {
       setVisible,
     });
     return () => {
-      selectInstances.delete(id);
+      selectInstances.delete(uid);
     };
-  }, [id]);
+  }, [uid]);
 
   // set filtered options when options changes
   useEffect(() => {
@@ -277,7 +278,7 @@ function Select<T>({
     if (!disabled && triggerRef.current) {
       // hide other select instances
       selectInstances.forEach((instance, key) => {
-        if (key !== id) {
+        if (key !== uid) {
           instance.setVisible(false);
         }
       });
@@ -304,7 +305,7 @@ function Select<T>({
     }
   }, [disabled]);
 
-  useHideOnClickedOutside({ id, setVisible });
+  useHideOnClickedOutside({ uid, setVisible });
 
   useHideOnTriggerDOMRectChange({
     setVisible,
@@ -315,12 +316,13 @@ function Select<T>({
 
   return (
     <div
-      id={id}
+      id={uid}
       className={c(className, styles.select, disabled ? styles.disabled : '')}
     >
       <div className={c(styles.controls)}>
         <div>
           <InputText
+            id={id}
             title={selectedLabel}
             ref={triggerRef}
             className={c(styles.trigger)}
@@ -352,7 +354,7 @@ function Select<T>({
           visible={visible}
         />,
         document.body,
-        id
+        uid
       )}
     </div>
   );

src/components/Form/Select/SelectProps.ts

@@ -9,12 +9,13 @@ export interface SelectProps<T> {
   className?: string;
   cleanable?: boolean;
   disabled?: boolean;
+  id?: string;
   noResultsElement?: React.ReactNode;
   onChange?: (value?: T) => void;
   onClean?: () => void;
   options: SelectOption<T>[];
   placeholder?: string;
   searchable?: boolean;
-  value?: T;
   triggerElementRef?: React.RefObject<HTMLInputElement>;
+  value?: T;
 }