@inceptionbg/iui 2.0.7 → 2.0.10

package/src/components/Inputs/DateInput/DateInput.tsx

@@ -7,7 +7,7 @@ import { DatePartInput } from './components/DatePartInput';
 import { faCalendarPlus } from '../../../assets/icons/light/faCalendarPlus';
 import dayjs from 'dayjs';
 import { IMenuPlacement } from '../../../types/IMenu';
-import { formatDateYMD } from '../../../utils/DateUtils';
+import { formatDateYMD } from '../../../utils/dateUtils';
 import { useTranslation } from 'react-i18next';
 
 export interface IDateInputProps {
@@ -21,6 +21,7 @@ export interface IDateInputProps {
   helperText?: string;
   errorText?: string;
   isClearable?: boolean;
+  onClear?: () => void;
   className?: string;
   calendarPlacement?: IMenuPlacement;
 }
@@ -36,6 +37,7 @@ export const DateInput: FC<IDateInputProps> = ({
   helperText,
   errorText,
   isClearable = true,
+  onClear,
   className,
   calendarPlacement,
 }) => {
@@ -70,108 +72,113 @@ export const DateInput: FC<IDateInputProps> = ({
   }, [date]);
 
   return (
-    <InputWrapper
-      label={label}
-      focus={isCalendarOpen}
-      required={required}
-      className={className}
-      disabled={disabled}
-      onClearInput={
-        isClearable && (day || month || year) && !disabled
-          ? () => {
-              setDay('');
-              setMonth('');
-              setYear('');
-              setDate('');
+    <Menu
+      isOpen={isCalendarOpen}
+      onClose={() => setIsCalendarOpen(false)}
+      placement={calendarPlacement ?? 'bottom-left'}
+      renderButton={ref => (
+        <div ref={ref} className="full-width">
+          <InputWrapper
+            label={label}
+            focus={isCalendarOpen}
+            required={required}
+            className={className}
+            disabled={disabled}
+            onClearInput={
+              isClearable && (day || month || year) && !disabled
+                ? () => {
+                    setDay('');
+                    setMonth('');
+                    setYear('');
+                    setDate('');
+                    onClear?.();
+                  }
+                : undefined
             }
-          : undefined
-      }
-      helperText={helperText}
-      error={error}
-      errorText={errorText}
-    >
-      <div className="date-input">
-        <Menu
-          isOpen={isCalendarOpen}
-          onClose={() => setIsCalendarOpen(false)}
-          placement={calendarPlacement ?? 'bottom-left'}
-          renderButton={ref => (
-            <div
-              ref={ref}
-              className="calendar-btn"
-              onClick={() => !disabled && setIsCalendarOpen(!isCalendarOpen)}
-            >
-              <FontAwesomeIcon icon={faCalendarPlus} className="icon" />
+            helperText={helperText}
+            error={error}
+            errorText={errorText}
+          >
+            <div className="date-input">
+              <div
+                // ref={ref}
+                className="calendar-btn"
+                onClick={() => !disabled && setIsCalendarOpen(!isCalendarOpen)}
+              >
+                <FontAwesomeIcon icon={faCalendarPlus} className="icon" />
+              </div>
+              <div
+                ref={inputsRef}
+                className="inputs"
+                onClick={() => dayRef.current?.focus()}
+              >
+                <DatePartInput
+                  ref={dayRef}
+                  value={day}
+                  setValue={setDay}
+                  setDate={setDate}
+                  values={{ day, month, year }}
+                  required={required || !!month || !!year}
+                  disabled={disabled}
+                  autoFocus={autoFocus}
+                  max={maxDay}
+                  part="day"
+                  nextInput={monthRef.current}
+                />
+                <span>.</span>
+                <DatePartInput
+                  ref={monthRef}
+                  value={month}
+                  setValue={setMonth}
+                  setDate={setDate}
+                  values={{ day, month, year }}
+                  required={required || !!day || !!year}
+                  disabled={disabled}
+                  max={12}
+                  part="month"
+                  previousInput={dayRef.current}
+                  nextInput={yearRef.current}
+                />
+                <span>.</span>
+                <DatePartInput
+                  ref={yearRef}
+                  value={year}
+                  setValue={setYear}
+                  setDate={setDate}
+                  values={{ day, month, year }}
+                  required={required || !!day || !!month}
+                  disabled={disabled}
+                  min={1500}
+                  max={2500}
+                  part="year"
+                  previousInput={monthRef.current}
+                />
+              </div>
             </div>
-          )}
-        >
-          <Calendar
-            value={
-              date && dayjs(date, 'YYYY-MM-DD', true).isValid()
-                ? new Date(date)
-                : new Date()
-            }
-            onChange={e => {
-              const newDate = formatDateYMD(e as Date);
-              setDate(newDate);
-              setIsCalendarOpen(false);
-            }}
-            locale={
-              i18n.language === 'sr_RS_Latn'
-                ? 'sr-Latn-RS'
-                : i18n.language === 'sr_RS_Cyrl'
-                ? 'sr-RS'
-                : i18n.language
-            }
-            formatShortWeekday={(locale, date) =>
-              new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)
-            }
-          />
-        </Menu>
-        <div ref={inputsRef} className="inputs" onClick={() => dayRef.current?.focus()}>
-          <DatePartInput
-            ref={dayRef}
-            value={day}
-            setValue={setDay}
-            setDate={setDate}
-            values={{ day, month, year }}
-            required={required || !!month || !!year}
-            disabled={disabled}
-            autoFocus={autoFocus}
-            max={maxDay}
-            part="day"
-            nextInput={monthRef.current}
-          />
-          <span>.</span>
-          <DatePartInput
-            ref={monthRef}
-            value={month}
-            setValue={setMonth}
-            setDate={setDate}
-            values={{ day, month, year }}
-            required={required || !!day || !!year}
-            disabled={disabled}
-            max={12}
-            part="month"
-            previousInput={dayRef.current}
-            nextInput={yearRef.current}
-          />
-          <span>.</span>
-          <DatePartInput
-            ref={yearRef}
-            value={year}
-            setValue={setYear}
-            setDate={setDate}
-            values={{ day, month, year }}
-            required={required || !!day || !!month}
-            disabled={disabled}
-            min={1500}
-            max={2500}
-            part="year"
-            previousInput={monthRef.current}
-          />
+          </InputWrapper>
         </div>
-      </div>
-    </InputWrapper>
+      )}
+    >
+      <Calendar
+        value={
+          date && dayjs(date, 'YYYY-MM-DD', true).isValid() ? new Date(date) : new Date()
+        }
+        onChange={e => {
+          const newDate = formatDateYMD(e as Date);
+          setDate(newDate);
+          setIsCalendarOpen(false);
+        }}
+        locale={
+          i18n.language === 'sr_RS_Latn'
+            ? 'sr-Latn-RS'
+            : i18n.language === 'sr_RS_Cyrl'
+              ? 'sr-RS'
+              : i18n.language
+        }
+        formatShortWeekday={(locale, date) =>
+          new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)
+        }
+      />
+    </Menu>
   );
 };

package/src/components/Inputs/DateInput/components/DatePartInput.tsx

@@ -19,15 +19,15 @@ interface Props {
 
 const options = {
   day: {
-    placeholder: 'dd',
+    placeholder: '31',
     regex: `^[0-9]{2}`,
   },
   month: {
-    placeholder: 'mm',
+    placeholder: '12',
     regex: `^[0-9]{2}`,
   },
   year: {
-    placeholder: 'yyyy',
+    placeholder: '2000',
     regex: `^[0-9]{4}`,
   },
 };
@@ -115,15 +115,19 @@ export const DatePartInput: FC<Props> = ({
       onKeyDown={e => {
         if (e.key === 'ArrowLeft') {
           e.preventDefault();
+          e.stopPropagation();
           previousInput?.select();
         } else if (e.key === 'ArrowRight') {
           e.preventDefault();
+          e.stopPropagation();
           nextInput?.select();
         } else if (e.key === 'ArrowUp') {
           e.preventDefault();
+          e.stopPropagation();
           +value < max && setValueHandler(`${value ? +value + 1 : min}`);
         } else if (e.key === 'ArrowDown') {
           e.preventDefault();
+          e.stopPropagation();
           +value > min && setValueHandler(`${value ? +value - 1 : min}`);
         }
       }}

package/src/components/Inputs/InputWrapper.tsx

@@ -1,7 +1,7 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, Ref } from 'react';
 import { faCircleXmark } from '../../assets/icons';
 
 interface Props {
@@ -22,6 +22,7 @@ interface Props {
   error?: boolean;
   focus?: boolean;
   heightAuto?: boolean;
+  inputFieldRef?: Ref<HTMLDivElement>;
   children: ReactNode;
 }
 export const InputWrapper: FC<Props> = ({
@@ -38,6 +39,7 @@ export const InputWrapper: FC<Props> = ({
   error,
   focus,
   heightAuto,
+  inputFieldRef,
   children,
 }) => {
   const withEndSection = !!(endText || endButton || onClearInput);
@@ -53,6 +55,7 @@ export const InputWrapper: FC<Props> = ({
     >
       {label && <p className={clsx('input-label', { required })}>{label}</p>}
       <div
+        ref={inputFieldRef}
         className={clsx('iui-input-wrapper-field', {
           'with-end-section': withEndSection,
           'height-auto': heightAuto,
@@ -74,6 +77,8 @@ export const InputWrapper: FC<Props> = ({
                 className={clsx('icon', { disabled: endButton.disabled })}
                 icon={endButton.icon}
                 onClick={!endButton.disabled ? endButton.onClick : undefined}
+                role="button"
+                type="button"
               />
             )}
           </div>

package/src/components/Inputs/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, Ref, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextInput } from './TextInput';
 import { faMagnifyingGlass } from '../../assets/icons';
@@ -6,15 +6,16 @@ import { faMagnifyingGlass } from '../../assets/icons';
 interface IProps {
   label?: string;
   onSearch: (searchText: string) => void;
-  onClear?: () => void;
   className?: string;
+  ref?: Ref<HTMLInputElement>;
 }
-export const SearchInput: FC<IProps> = ({ label, onSearch, onClear, className }) => {
+export const SearchInput: FC<IProps> = ({ label, onSearch, className, ref }) => {
   const [text, setText] = useState('');
   const { t } = useTranslation();
 
   return (
     <TextInput
+      ref={ref}
       className={className}
       inputProps={{
         'aria-label': 'search',
@@ -23,6 +24,10 @@ export const SearchInput: FC<IProps> = ({ label, onSearch, onClear, className })
             e.stopPropagation();
             e.preventDefault();
             onSearch(e.target.value);
+          } else if (e.key === 'Escape') {
+            !!text && e.stopPropagation();
+            setText('');
+            onSearch('');
           }
         },
       }}
@@ -30,7 +35,7 @@ export const SearchInput: FC<IProps> = ({ label, onSearch, onClear, className })
       placeholder={t('Search')}
       value={text}
       setValue={setText}
-      onClear={onClear}
+      onClear={() => onSearch('')}
       endButton={{
         icon: faMagnifyingGlass,
         onClick: () => onSearch(text),

package/src/components/Inputs/Select2/Select.tsx

@@ -3,6 +3,10 @@ import './select.scss';
 import { useState, useRef, useEffect, ChangeEvent, FC, UIEvent } from 'react';
 import clsx from 'clsx';
 import { InputWrapper } from '../InputWrapper';
+import { createPortal } from 'react-dom';
+import { rootDir } from '../../../utils/rootDir';
+import { useMenuPosition } from '../../Menu/hooks/useMenuPosition';
+import { IMenuPlacement } from '../../../types/IMenu';
 
 export interface OptionType {
   label: string;
@@ -26,18 +30,24 @@ interface CustomSelectProps {
   setValue: (option: OptionType | null) => void;
   required?: boolean;
   disabled?: boolean;
-  // isMulti?: boolean;
+  isMulti?: boolean;
   isAsync?: boolean;
   isCreatable?: boolean;
   options?: OptionType[];
+  placeholder?: string;
   loadOptions?: (
     inputValue: string,
     loadedOptions: OptionType[],
     params: { page: number }
   ) => Promise<LoadOptionsResponse>;
   onCreateOption?: (inputValue: string) => Promise<OptionType>;
-  placeholder?: string;
   isClearable: boolean;
+  onClearInput?: () => void;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  menuPlacement?: IMenuPlacement;
+  className?: string;
   // minWidth?: number;
 }
 
@@ -50,12 +60,18 @@ export const Select: FC<CustomSelectProps> = ({
   disabled,
   options = [],
   loadOptions,
+  placeholder = 'Select...',
+  isMulti,
   isAsync = false,
   isCreatable = false,
   isClearable = true,
-  // isMulti,
+  onClearInput,
+  helperText,
+  errorText,
+  error,
+  menuPlacement = 'bottom-left',
+  className,
   // minWidth,
-  placeholder = 'Select...',
 }) => {
   const [inputValue, setInputValue] = useState<string | null>(null);
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -64,8 +80,17 @@ export const Select: FC<CustomSelectProps> = ({
   const [index, setIndex] = useState<number | null>(null);
   const [hasMore, setHasMore] = useState(true);
 
+  const containerRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  const menuStyle = useMenuPosition({
+    isOpen: dropdownVisible,
+    placement: menuPlacement,
+    containerRef,
+    menuRef: dropdownRef,
+    withMinWidth: true,
+  });
+
   useEffect(() => {
     if (!isAsync) {
       const filtered = inputValue
@@ -94,7 +119,7 @@ export const Select: FC<CustomSelectProps> = ({
     setInputValue(null);
     setTimeout(() => {
       setIndex(null);
-      setDropdownVisible(false);
+      // setDropdownVisible(false);
     });
   };
 
@@ -103,7 +128,7 @@ export const Select: FC<CustomSelectProps> = ({
     setInputValue(
       e.target.defaultValue === value?.label
         ? // @ts-ignore
-          e.nativeEvent?.data ?? ''
+          (e.nativeEvent?.data ?? '')
         : inputValue
     );
     // setFilteredOptions([]);
@@ -133,6 +158,7 @@ export const Select: FC<CustomSelectProps> = ({
     }
   };
 
+  console.log(menuStyle);
   return (
     <div
       className="customSelect"
@@ -157,10 +183,11 @@ export const Select: FC<CustomSelectProps> = ({
               }
             : undefined
         }
-        // helperText={helperText}
-        // errorText={errorText}
-        // error={error}
-        // className={className}
+        helperText={helperText}
+        errorText={errorText}
+        error={error}
+        inputFieldRef={containerRef}
+        className={className}
       >
         <input
           value={inputValue ?? value?.label ?? ''}
@@ -189,7 +216,7 @@ export const Select: FC<CustomSelectProps> = ({
             } else if (e.key === 'Enter' && index !== null) {
               e.preventDefault();
               e.currentTarget.blur();
-              handleOptionClick(options[index]);
+              handleOptionClick(filteredOptions[index]);
             } else if (e.key === 'Escape') {
               e.preventDefault();
               e.currentTarget.blur();
@@ -198,27 +225,35 @@ export const Select: FC<CustomSelectProps> = ({
         />
       </InputWrapper>
 
-      {dropdownVisible && (
-        <div ref={dropdownRef} className="dropdown" onScroll={handleScroll}>
-          {filteredOptions.map((option, i) => (
+      {dropdownVisible
+        ? createPortal(
             <div
-              key={i}
-              className={clsx('option', { hover: index === i })}
-              onMouseDown={() => handleOptionClick(option)}
+              ref={dropdownRef}
+              className="select-dropdown"
+              onScroll={handleScroll}
+              style={menuStyle}
             >
-              {option.label}
-            </div>
-          ))}
-          {!filteredOptions.length && <div className="option">No options</div>}
-          {isCreatable &&
-            inputValue &&
-            !filteredOptions.some(opt => opt.label === inputValue) && (
-              <div className="option createOption" onClick={handleCreate}>
-                {`Create ${inputValue}`}
-              </div>
-            )}
-        </div>
-      )}
+              {filteredOptions.map((option, i) => (
+                <div
+                  key={i}
+                  className={clsx('option', { hover: index === i })}
+                  onMouseDown={() => handleOptionClick(option)}
+                >
+                  {option.label}
+                </div>
+              ))}
+              {!filteredOptions.length && <div className="option">No options</div>}
+              {isCreatable &&
+                inputValue &&
+                !filteredOptions.some(opt => opt.label === inputValue) && (
+                  <div className="option createOption" onClick={handleCreate}>
+                    {`Create ${inputValue}`}
+                  </div>
+                )}
+            </div>,
+            rootDir
+          )
+        : null}
     </div>
   );
 };

package/src/components/Inputs/Select2/select.scss

@@ -12,20 +12,20 @@
       font-size: 14px;
     }
   }
+}
 
-  .dropdown {
-    position: absolute;
-    z-index: 1000;
-    width: 100%;
-    max-height: 200px;
-    overflow-y: auto;
-    background: #fff;
-    border: var(--border);
-    border-radius: 8px;
-    // border-radius: 0 0 8px 8px;
-    margin-top: 2px;
-  }
-
+.select-dropdown {
+  position: absolute;
+  z-index: 1000;
+  // width: 100%;
+  min-width: 200px;
+  max-height: 200px;
+  overflow-y: auto;
+  background: #fff;
+  border: var(--border);
+  border-radius: 8px;
+  // border-radius: 0 0 8px 8px;
+  margin-top: 2px;
   .option {
     padding: 8px 12px;
     cursor: pointer;
@@ -35,7 +35,6 @@
       background-color: #f5f5f5;
     }
   }
-
   .createOption {
     font-weight: bold;
     color: #007bff;

package/src/components/Inputs/Selects/components/SelectWrapper.tsx

@@ -11,6 +11,7 @@ import type {
   BasicSelectProps,
   CreatableSelectProps,
 } from '../../../../types/ISelect';
+import clsx from 'clsx';
 
 export type ISelectProps = BasicSelectProps | AsyncSelectProps | CreatableSelectProps;
 
@@ -42,6 +43,7 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
     autoFocus,
     closeMenuOnSelect,
     noOptionsMessage,
+    size,
   } = props;
 
   const commonProps = {
@@ -49,7 +51,7 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
     components: CustomSelectComponents,
     onChange,
     placeholder,
-    styles: createSelectStyles({ menuWidth }),
+    styles: createSelectStyles({ menuWidth, fontSize: size === 's' ? 12 : 16, size }),
     isDisabled: disabled,
     isOptionDisabled: (option: any) => option.disabled,
     isClearable,
@@ -103,7 +105,7 @@ export const SelectWrapper = forwardRef<any, ISelectProps>((props, forwardedRef)
       helperText={helperText}
       error={error}
       errorText={errorText}
-      className={className}
+      className={clsx('select-wrapper', size, className)}
       minWidth={minWidth}
       heightAuto
     >

package/src/components/Inputs/Selects/utils/selectStyles.ts

@@ -3,8 +3,10 @@ import { StylesConfig } from 'react-select';
 export const createSelectStyles = ({
   fontSize = 16,
   menuWidth,
+  size,
 }: {
   fontSize?: number;
+  size?: 's' | 'm';
   menuWidth?: 'fit-content' | 'max-content' | number;
 }) =>
   ({
@@ -14,7 +16,7 @@ export const createSelectStyles = ({
       borderWidth: 0,
       boxShadow: 'none',
       width: '100%',
-      // minHeight: size === 's' ? 12 : 36,
+      minHeight: size === 's' ? 12 : 36,
     }),
     container: provided => ({
       ...provided,
@@ -23,9 +25,7 @@ export const createSelectStyles = ({
     valueContainer: provided => ({
       ...provided,
       fontSize,
-      padding: '6px 0 6px 12px',
-      // fontSize: /*size === 's' ? 12 : */ 14,
-      // padding: /*size === 's' ? '0 4px' : */ state.isMulti ? '8px 14px' : '10px 14px',
+      padding: size === 's' ? '0 4px 0 8px' : '6px 0 6px 12px',
       gap: 4,
       width: '100%',
     }),
@@ -64,23 +64,20 @@ export const createSelectStyles = ({
       ...provided,
       padding: 0,
       margin: 0,
-      // height: size === 's' ? 24 : 36,
     }),
     option: (provided, state) => ({
       ...provided,
       fontSize,
-      // fontSize: /*size === 's' ? 12 : */ 14,
-      // padding: size === 's' ? 4 : provided.padding,
+      padding: size === 's' ? 4 : provided.padding,
       backgroundColor: state.isSelected
         ? 'var(--primary) !important'
         : state.isFocused
-        ? '#eee !important'
-        : 'inherit',
+          ? '#eee !important'
+          : 'inherit',
     }),
     noOptionsMessage: provided => ({
       ...provided,
       fontSize,
-      // fontSize: /*size === 's' ? 12 : */ 14,
       fontStyle: 'italic',
       textAlign: 'left',
       cursor: 'default',
@@ -97,8 +94,8 @@ export const createSelectStyles = ({
     indicatorSeparator: () => ({ display: 'none' }),
     dropdownIndicator: (provided, state) => ({
       ...provided,
-      // padding: size === 's' ? '4px' : provided.padding,
+      padding: size === 's' ? '4px' : provided.padding,
       transition: 'all .2s ease',
       transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null,
     }),
-  } as StylesConfig);
+  }) as StylesConfig;