jamespot-react-components 1.0.3 → 1.0.9

package/build/src/components/Common/JRCConditionalWrapper.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export interface JRCConditionalWrapperProps {
     condition: boolean;
-    wrapper: (children: React.ReactNode) => React.ReactElement;
-    wrapperFalse?: (children: React.ReactNode) => React.ReactElement;
-    children?: React.ReactElement;
+    wrapper: (children: React.ReactNode) => React.ReactNode;
+    wrapperFalse?: (children: React.ReactNode) => React.ReactNode;
+    children?: React.ReactNode;
 }
-export declare const JRCConditionalWrapper: ({ condition, wrapper, wrapperFalse, children, }: JRCConditionalWrapperProps) => React.ReactElement;
+export declare const JRCConditionalWrapper: ({ condition, wrapper, wrapperFalse, children }: JRCConditionalWrapperProps) => JSX.Element;

package/build/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
+import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
 import { DataCy } from '../../../../types/dataAttributes';
 import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
-declare type Value<T> = string | number | T;
 declare type CheckboxOption<TFieldValues> = {
     label: string | JSX.Element;
-    value: Value<TFieldValues>;
+    value: string | number | TFieldValues;
     disabled?: boolean;
 };
 export declare type CheckboxProps<TFieldValues> = DataCy & {
@@ -20,6 +20,9 @@ export declare type CheckboxProps<TFieldValues> = DataCy & {
     valueTypeIsBoolean?: boolean;
 };
 export declare type JRCInputCheckboxProps<TFieldValues> = CheckboxProps<TFieldValues> & JRCInputFieldProps<TFieldValues>;
+export declare type NativeCheckboxProps<TFieldValues> = CheckboxProps<TFieldValues> & Omit<ControllerRenderProps<TFieldValues>, 'value'> & {
+    value: TFieldValues | TFieldValues[];
+};
 export declare function JRCInputCheckbox<TFieldValues>({ name, control, rules, label, htmlFor, labelIsLegend, description, helper, ...props }: JRCInputCheckboxProps<TFieldValues>): JSX.Element;
 export declare namespace JRCInputCheckbox {
     var defaultProps: {

package/build/src/components/Form/Input/JRCInputDate/JRCInputDate.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { DataCy } from '../../../../types/dataAttributes';
+export declare type JRCInputDateProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
+/**
+ * Component used as a <input type="date"/>
+ * @param props JRCInputFieldProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export declare function JRCInputDate<T>(props: JRCInputFieldProps<T>): JSX.Element;

package/build/src/components/Form/Input/JRCInputDate/JRCInputDate.stories.d.ts

@@ -0,0 +1,5 @@
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const InputDate: Story<JRCInputFieldProps<"date">>;

package/build/src/components/Form/Input/JRCInputText/JRCInputText.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
 import { DataCy } from '../../../../types/dataAttributes';
-export declare type InputTextProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
+export declare type JRCInputTextProps = DataCy & React.ComponentPropsWithoutRef<'input'>;
 /**
  * Component used as a <input type="text"/>
  * @param props JRCInputFieldProps

package/build/src/components/Form/Input/JRCInputTextarea/JRCInputTextarea.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { DataCy } from '../../../../types/dataAttributes';
+export declare type JRCInputTextareaProps = DataCy & React.ComponentPropsWithoutRef<'textarea'>;
+export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, DataCy & {
+    error?: boolean | undefined;
+    valid?: boolean | undefined;
+}, never>;
+/**
+ * Component used as a <input type="text"/>
+ * @param props JRCInputFieldProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export declare function JRCInputTextarea<T>(props: JRCInputFieldProps<T>): JSX.Element;

package/build/src/components/Form/Input/JRCInputTextarea/JRCInputTextarea.stories.d.ts

@@ -0,0 +1,5 @@
+import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const InputTextarea: Story<JRCInputFieldProps<"textarea">>;

package/build/src/components/JRCButton/JRCButton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { JRCIconProps } from '../JRCIcon/JRCIcon';
+import { ButtonType } from './JRCButtonConfig';
 import { DataCy } from '../../types/dataAttributes';
 export declare type JRCButtonProps = React.ComponentPropsWithoutRef<'button'> & DataCy & {
     /** Color of the background of the button */
@@ -20,6 +21,30 @@ export declare type JRCButtonProps = React.ComponentPropsWithoutRef<'button'> &
     minWidth?: string;
 };
 export declare const transformColor: (color?: string | undefined) => JRCIconProps['color'];
+/**
+ * Button styling. May be used as a <a> tag
+ */
+export declare const Button: import("styled-components").StyledComponent<"button", any, {
+    themeButton: ButtonType;
+    hasChildren: boolean;
+} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & DataCy & {
+    /** Color of the background of the button */
+    color?: "primary" | "valid" | "danger" | "secondary" | undefined;
+    /** Indicates loading of content on the button */
+    loader?: boolean | undefined;
+    /** This Boolean attribute specifies that the button should have input focus when the page loads */
+    autofocus?: boolean | undefined;
+    /** Defines the value associated with the button’s name when it’s submitted with the form data */
+    value?: string | undefined;
+    /** Enhance your button with an icon */
+    icon?: string | undefined;
+    /** The variant is used to define what type of action the button will take */
+    variant?: "contained" | "outlined" | undefined;
+    /** CSS float attribute */
+    float?: "left" | "right" | undefined;
+    /** CSS min-width attribute */
+    minWidth?: string | undefined;
+}, never>;
 declare const JRCButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & DataCy & {
     /** Color of the background of the button */
     color?: "primary" | "valid" | "danger" | "secondary" | undefined;

package/build/src/components/JRCButton/JRCButtonConfig.d.ts

@@ -1,4 +1,4 @@
-declare const _default: {
+export declare const BUTTON_CONFIG: {
     contained: {
         primary: {
             color: string;
@@ -134,7 +134,6 @@ declare const _default: {
         };
     };
 };
-export default _default;
 export declare type ButtonType = {
     color: string;
     background: string;

package/build/src/components/JRCEllipsis/JRCEllipsis.d.ts

@@ -0,0 +1,5 @@
+export declare type JRCEllipsisProps = {
+    label?: string;
+    length: number;
+};
+export declare const JRCEllipsis: ({ label, length }: JRCEllipsisProps) => JSX.Element;

package/build/src/components/JRCEllipsis/JRCEllipsis.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+import { JRCEllipsisProps } from './JRCEllipsis';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CustomButton: Story<JRCEllipsisProps>;

package/build/src/components/JRCHref/JRCHref.d.ts

@@ -2,20 +2,28 @@ import * as React from 'react';
 import { DataCy } from '../../types/dataAttributes';
 /**
  * Props type for JRCLinkToArticle and JRCLinkToUser
- * @member id number : id of the record
- * @member href string : href for href
- * @member children: enclosed React component
+ * @member idObject number : id of the record
  */
-export interface JRCLinkToProps extends JRCStyledHrefProps {
+export declare type JRCLinkToProps = DataCy & React.ComponentPropsWithoutRef<'a'> & {
     idObject?: number;
-    href?: string;
-    children: React.ReactNode;
-}
+};
+declare type AnchorProps = {
+    as?: 'a';
+};
+declare type ButtonProps = {
+    variant?: 'contained' | 'outlined';
+    color?: 'primary' | 'valid' | 'danger' | 'secondary';
+    float?: 'left' | 'right';
+    children?: React.ReactNode;
+} & {
+    as: 'button';
+};
 /**
  * Props type for JRCStyledHref
- * @see HTML.a default props
+ * @member as render the link styled as a button
  */
-export declare type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'>;
-export declare const JRCStyledHref: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'> & (AnchorProps | ButtonProps);
+export declare const JRCStyledHref: (props: JRCStyledHrefProps) => JSX.Element;
 export declare const JRCLinkToArticle: ({ idObject, href, children, ...props }: JRCLinkToProps) => JSX.Element;
 export declare const JRCLinkToUser: ({ idObject, href, children, ...props }: JRCLinkToProps) => JSX.Element;
+export {};

package/build/src/components/JRCImg/url.util.d.ts

@@ -39,10 +39,10 @@ export declare type ImgUrlProps = {
     format?: string;
     timestamp?: string | number;
 };
-export declare function getFrom(arg: Pick<ImgUrlProps, 'from'>): string | undefined;
+export declare function getFrom(arg: Pick<ImgUrlProps, 'from'>): string;
 export declare function getTimestamp(arg: Timestamp): string;
 export declare function getUri(arg: UriOrTypeId): string;
-export declare function getSize(arg: Size & WidthHeight): string;
+export declare function getSize(arg: Size & WidthHeight, dpr?: number): string;
 export declare function getFormat(arg: Format): string;
 export declare function getUrl(url: string): URL | undefined;
 /**
@@ -58,5 +58,5 @@ export declare function getUrl(url: string): URL | undefined;
  *   The final url is {from}/{size}/{uri}.{format}?_={timestamp}
  * @param arg
  */
-export declare function formatImgUrl(arg: ImgUrlProps): string;
+export declare function formatImgUrl(arg: ImgUrlProps, dpr?: number): string;
 export {};

package/build/src/components/JRCList/JRCList.d.ts

@@ -6,6 +6,7 @@ import type { Orders } from 'jamespot-user-api';
  * @member data default react-table data props
  * @member eventHandlers event handlers: onDrag, onSort and onPage. You Must rearrange the array of data when these events are dispatched
  * @member config config object. See the Type for use
+ * @member className className
  */
 export declare type JRCListProps<T extends Record<string, unknown>> = {
     columns: Array<Column<T>>;
@@ -26,5 +27,6 @@ export declare type JRCListProps<T extends Record<string, unknown>> = {
             nbResults: number;
         };
     };
+    className?: string;
 };
 export declare const JRCList: <T extends Record<string, unknown>>(props: JRCListProps<T>) => JSX.Element;

package/build/src/components/JRCModal/JRCModal.d.ts

@@ -23,6 +23,8 @@ export interface JRCModalButtonType extends ComponentPropsWithoutRef<'button'> {
  * @member enableClickAwayCloseModal boolean to enable the close of the Modal by Click Outside of Modal
  * @member children default ReactNode children in the Modal content
  * @member portalId id attribute for createPortal
+ * @member inPlace if true, does not use a portal
+ * @member className use for overriding the styled-components styles
  */
 export interface JRCModalProps {
     open: boolean;
@@ -35,6 +37,8 @@ export interface JRCModalProps {
     isFull?: boolean;
     headerButtons?: ReactNode;
     portalId?: string;
+    inPlace?: boolean;
+    className?: string;
 }
-declare const JRCModal: ({ open, closeHandler, buttons, children, title, showIconClose, enableClickAwayCloseModal, isFull, headerButtons, portalId, }: JRCModalProps) => React.ReactPortal | null;
+declare const JRCModal: React.ForwardRefExoticComponent<JRCModalProps & React.RefAttributes<HTMLDivElement>>;
 export default JRCModal;

package/build/src/components/JRCModal/JRCModal.styles.d.ts

@@ -4,6 +4,5 @@ export declare const JRCModalContainer: import("styled-components").StyledCompon
 export declare const JRCModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const JRCModalContentScrollbox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const JRCModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const JRCModalHeaderTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const JRCModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const JRCModalClose: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/src/components/JRCTag/JRCTag.d.ts

@@ -13,6 +13,7 @@ import { UriOrTypeId } from 'components/Form/Common/types';
  * @member focusable - whether the element is focusable. Independant of onClick property
  * @member isFocused - whether the element is focused. Property used with variant for styling the component
  * @member tooltipDescription - if present, show a tooltip with the description
+ * @member clickVariant - whether the hover/focus style is a selectable item or a deletable item
  */
 export declare type JRCTagProps<T> = UriOrTypeId & {
     collapsed?: boolean;
@@ -25,5 +26,6 @@ export declare type JRCTagProps<T> = UriOrTypeId & {
     isFocused?: boolean;
     tooltipDescription?: string;
     alt?: string;
+    clickVariant?: 'select' | 'delete';
 };
 export declare function JRCTag<T>(props: JRCTagProps<T>): JSX.Element;

package/build/src/hooks/UseDidMountEffect.d.ts

@@ -1,3 +1,2 @@
 import { DependencyList } from 'react';
-declare const useDidMountEffect: (func: Function, deps: DependencyList) => void;
-export default useDidMountEffect;
+export declare const useDidMountEffect: (func: Function, deps: DependencyList) => void;

package/build/src/index.d.ts

@@ -3,6 +3,8 @@
  */
 declare global {
     interface Window {
+        React: any;
+        ReactDOM: any;
         jamespotUserApi: any;
         reactRedux: any;
         redux: any;
@@ -45,6 +47,7 @@ import JRCColumnRight from './components/JRCColumnRight/JRCColumnRight';
 export { JRCColumnRight };
 export { JRCConditionalWrapper } from './components/Common/JRCConditionalWrapper';
 export { JRCDate } from './components/JRCDate/JRCDate';
+export { JRCEllipsis } from './components/JRCEllipsis/JRCEllipsis';
 export { JRCFormCheckbox } from './components/Form/Input/JRCFormCheckbox/JRCFormCheckbox';
 export { JRCFormColorField } from './components/Form/Input/JRCFormColor/JRCFormColor';
 export { JRCFormDatetimeField } from './components/Form/Input/JRCFormDateTime/JRCFormDateTime';
@@ -94,13 +97,11 @@ export { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, JRCText };
 import { JRCTypography } from './components/JRCTypography/JRCTypography';
 export { JRCTypography };
 export { JRCValidationButton } from './components/JRCButton/JRCValidationButton';
-import Theme from './styles/theme';
-export { Theme };
-import Resources from './translation';
+export { default as Theme } from './styles/theme';
+export { default as Resources } from './translation';
 export { useTimeout } from './hooks/UseTimeout';
 export { useDebounce } from './hooks/UseDebounce';
-export { default as useDidMountEffect } from './hooks/UseDidMountEffect';
-export { Resources };
+export { useDidMountEffect } from './hooks/UseDidMountEffect';
 export { StyledInput } from './components/Form/Input/JRCStyledInput';
 export { JRCInputCheckbox } from './components/Form/Input/JRCInputCheckbox/JRCInputCheckbox';
 export { JRCInputEmail } from './components/Form/Input/JRCFormEmail/JRCInputEmail';
@@ -108,6 +109,8 @@ export { JRCInputSelect } from './components/Form/Input/JRCSelect/JRCInputSelect
 export { JRCInputAutocomplete } from './components/Form/Input/JRCSelect/JRCInputAutocomplete';
 export { JRCInputCommunity } from './components/Form/Input/JRCSelect/JRCAutocompleteCommunity';
 export { JRCInputText } from './components/Form/Input/JRCInputText/JRCInputText';
+export { JRCInputTextarea } from './components/Form/Input/JRCInputTextarea/JRCInputTextarea';
+export { JRCInputDate } from './components/Form/Input/JRCInputDate/JRCInputDate';
 /****
  *
  * PLEASE RESPECT ALPHABETICAL ORDER

package/build/src/styles/theme.d.ts

@@ -30,6 +30,7 @@ export declare type FontWeight = {
     bold: number;
 };
 export declare type ThemeType = {
+    dpr: number;
     font: {
         family: string;
         color: string;

package/build/src/types.d.ts

@@ -39,6 +39,7 @@ import { JRCColumnRightProps } from './components/JRCColumnRight/JRCColumnRight'
 export { JRCColumnRightProps };
 export { JRCDateProps } from './components/JRCDate/JRCDate';
 export { JRCDropDownProps } from './components/JRCDropDown/JRCDropDown';
+export { JRCEllipsisProps } from './components/JRCEllipsis/JRCEllipsis';
 export { JRCFileOpenProps } from './components/JRCFileOpen/JRCFileOpen';
 import { JRCGridProps } from './components/JRCGrid/JRCGrid';
 export { JRCGridProps };
@@ -80,6 +81,9 @@ import { JRCTypographyProps } from './components/JRCTypography/JRCTypography.d';
 export { JRCTypographyProps };
 export { JRCValidationButtonProps } from './components/JRCButton/JRCValidationButton';
 export * from './components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.types';
+export { JRCInputDateProps } from './components/Form/Input/JRCInputDate/JRCInputDate';
+export { JRCInputTextProps } from './components/Form/Input/JRCInputText/JRCInputText';
+export { JRCInputTextareaProps } from './components/Form/Input/JRCInputTextarea/JRCInputTextarea';
 export { JRCInputFieldProps } from './components/Form/Input/Common/JRCFormFieldRenderer.types';
 export { JRCInputSelectProps } from './components/Form/Input/JRCSelect/JRCInputSelect.types';
 export { JRCAutocompleteProps } from './components/Form/Input/JRCSelect/JRCInputSelect.types';

package/externals.json

@@ -11,5 +11,6 @@
     "react-intl": "reactIntl",
     "styled-components": "styledComponents",
     "react-dnd": "reactDnd",
-    "react-dnd-html5-backend": "reactDndHtml5Backend"
+    "react-dnd-html5-backend": "reactDndHtml5Backend",
+    "jamespot-react-core": "ReactCore"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jamespot-react-components",
-    "version": "1.0.3",
+    "version": "1.0.9",
     "description": "",
     "main": "./build/jamespot-react-components.js",
     "types": "./build/src/index.d.ts",
@@ -96,7 +96,7 @@
         "@types/redux-logger": "^3.0.8",
         "chroma-js": "^2.1.1",
         "classnames": "^2.3.1",
-        "jamespot-user-api": "file:../jamespot-user-api",
+        "jamespot-user-api": "1.0.13",
         "moment": "^2.29.1",
         "react": "^17.x",
         "react-dnd": "^14.0.4",

package/src/components/Common/JRCConditionalWrapper.tsx

@@ -2,18 +2,11 @@ import * as React from 'react';
 
 export interface JRCConditionalWrapperProps {
     condition: boolean;
-    wrapper: (children: React.ReactNode) => React.ReactElement;
-    wrapperFalse?: (children: React.ReactNode) => React.ReactElement;
-    children?: React.ReactElement;
+    wrapper: (children: React.ReactNode) => React.ReactNode;
+    wrapperFalse?: (children: React.ReactNode) => React.ReactNode;
+    children?: React.ReactNode;
 }
 
-export const JRCConditionalWrapper = ({
-    condition,
-    wrapper,
-    wrapperFalse,
-    children,
-}: JRCConditionalWrapperProps): React.ReactElement =>
-    // FIXME TYPESCRIPT-STRICT
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    condition ? wrapper(children) : wrapperFalse ? wrapperFalse(children) : children;
+export const JRCConditionalWrapper = ({ condition, wrapper, wrapperFalse, children }: JRCConditionalWrapperProps) => (
+    <>{condition ? wrapper(children) : wrapperFalse ? wrapperFalse(children) : children}</>
+);

package/src/components/Form/Input/JRCFormColor/JRCFormColor.tsx

@@ -8,32 +8,32 @@ import { ClickAwayListener } from '../../Common/ClickAwayListener';
 
 const StyledInputColor = styled.input.attrs(() => ({ type: 'color' }))<FormInputProps>`
     &&& {
-        padding: 8px;
-        margin: 0px;
         width: 40px;
         height: 40px;
+        border: none;
+        padding: 0;
+        margin: 0;
         cursor: pointer;
-        border-radius: 4px;
-        text-align: center;
+        border-radius: 8px;
         box-sizing: border-box;
         ::-webkit-color-swatch {
             border-color: transparent;
+            border: none;
         }
         ::-moz-color-swatch {
             border-color: transparent;
+            border: none;
+        }
+        ::-webkit-color-swatch-wrapper {
+            padding: 0;
         }
     }
 `;
 
 const Container = styled.div`
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 0px;
-    padding: 5px;
-    border-radius: 4px;
+    display: inline-flex;
+    border-radius: 8px;
+    overflow: hidden;
 `;
 
 const JRCFormColorFieldRender = (input: WrappedFieldInputProps, props: JRCWritableFormInputProps) => {

package/src/components/Form/Input/JRCFormEmail/JRCInputEmail.tsx

@@ -2,15 +2,11 @@ import * as React from 'react';
 import { StyledInput } from '../JRCStyledInput';
 import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
 import { JRCFormFieldRenderer } from '../Common/JRCFormFieldRenderer';
+import { JRCInputTextProps } from '../JRCInputText/JRCInputText';
 
-const RenderInput = React.forwardRef(
-    // FIXME TYPESCRIPT-STRICT
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    (props: React.ComponentPropsWithoutRef<'input'>, ref: React.RefCallback<HTMLInputElement>) => {
-        return <StyledInput type="text" id={props.name} {...props} ref={ref} />;
-    },
-);
+const RenderInput = React.forwardRef((props: JRCInputTextProps, ref: React.ForwardedRef<HTMLInputElement>) => {
+    return <StyledInput type="text" id={props.name} {...props} ref={ref} />;
+});
 
 /**
  * Component used as a <input type="text"/>

package/src/components/Form/Input/JRCFormSelect/JRCFormSelect.tsx

@@ -150,7 +150,11 @@ export const JRCFormSelectInput = (props: any) => {
     const intl = useIntl();
     const { selectedOption, onInputChange, components, placeholder, options, ...otherProps } = props;
 
-    const [loadedOptions, setLoadedOptions] = React.useState(options);
+    const [loadedOptions, setLoadedOptions] = React.useState([]);
+
+    React.useEffect(() => {
+        if (!props.asyncPromise) setLoadedOptions(options);
+    }, [options]);
 
     React.useEffect(() => {
         if (props.frontFiltering && props.asyncPromise) {

package/src/components/Form/Input/JRCFormSelect/JRCFormSelectTag.tsx

@@ -49,6 +49,7 @@ const JRCFormSelectTagRenderer = <T,>(
                         onMouseDown={props.removeProps.onMouseDown}
                         onClick={(e) => props.removeProps.onClick(e)}
                         focusable={true}
+                        clickVariant="delete"
                         isFocused={props.isFocused}
                         uri={props.data.uri}
                         label={getOptionLabel(props)}
@@ -60,7 +61,7 @@ const JRCFormSelectTagRenderer = <T,>(
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 SingleValue: (props: SingleValueProps<OptionTypeBase>) => (
-                    <JRCTag uri={props.data.uri} label={getOptionLabel(props)} />
+                    <JRCTag uri={props.data.uri} label={getOptionLabel(props)} clickVariant="delete" />
                 ),
                 // FIXME TYPESCRIPT-STRICT
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -88,6 +89,7 @@ const Option = <isMulti extends boolean>(props: OptionProps<OptionTypeBase, isMu
                 <JRCTag
                     uri={props.data.uri}
                     focusable={true}
+                    clickVariant="select"
                     isFocused={props.isFocused}
                     label={getOptionLabel(props)}
                 />

package/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.stories.tsx

@@ -13,7 +13,7 @@ export default {
 const Template: Story<JRCInputCheckboxProps<any>> = (args) => {
     const { handleSubmit, control } = useForm({
         defaultValues: {
-            [args.name]: [],
+            checkbox: [],
         },
         criteriaMode: 'all',
     });
@@ -23,9 +23,6 @@ const Template: Story<JRCInputCheckboxProps<any>> = (args) => {
     };
 
     return (
-        // FIXME TYPESCRIPT-STRICT
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         <form onSubmit={handleSubmit(onSubmit)}>
             <JRCInputCheckbox {...args} control={control as any} />
             <input type="submit" />

package/src/components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.tsx

@@ -12,12 +12,11 @@ import { deepEqual } from '../../../../utils/utils.object';
 import { DataCy } from '../../../../types/dataAttributes';
 import { JRCInputFieldProps } from '../Common/JRCFormFieldRenderer.types';
 import { CheckboxValue } from './JRCInputCheckbox.types';
-
-type Value<T> = string | number | T;
+import { RefCallBack } from 'react-hook-form';
 
 type CheckboxOption<TFieldValues> = {
     label: string | JSX.Element;
-    value: Value<TFieldValues>;
+    value: string | number | TFieldValues;
     disabled?: boolean;
 };
 
@@ -35,18 +34,19 @@ export type CheckboxProps<TFieldValues> = DataCy & {
 };
 
 export type JRCInputCheckboxProps<TFieldValues> = CheckboxProps<TFieldValues> & JRCInputFieldProps<TFieldValues>;
+export type NativeCheckboxProps<TFieldValues> = CheckboxProps<TFieldValues> &
+    Omit<ControllerRenderProps<TFieldValues>, 'value'> & { value: TFieldValues | TFieldValues[] };
 
-function RenderInput<TFieldValues>({
-    variant = 'default',
-    ...props
-}: CheckboxProps<TFieldValues> &
-    Omit<ControllerRenderProps<TFieldValues>, 'value'> & { value: TFieldValues | TFieldValues[] }) {
+const RenderInput = React.forwardRef(function <TFieldValues>(
+    { variant = 'default', ...props }: NativeCheckboxProps<TFieldValues>,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
     const field = {
         onChange: props.onChange,
         onBlur: props.onBlur,
         value: props.value,
         name: props.name,
-        ref: props.ref,
+        ref: ref as RefCallBack,
     };
 
     const [valueTypeIsBoolean, setValueTypeIsBoolean] = React.useState(
@@ -98,6 +98,7 @@ function RenderInput<TFieldValues>({
                         {props.checkboxMode === 'radio' ? (
                             <JRCRadio
                                 name={props.name}
+                                ref={(index === 0 && ref) || undefined}
                                 data-cy={props.dataCy && `${props.dataCy}-option-${index}`}
                                 disabled={props.disabled || option.disabled}
                                 checked={checked}
@@ -109,6 +110,7 @@ function RenderInput<TFieldValues>({
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                 // @ts-ignore
                                 checkboxMode={props.checkboxMode}
+                                ref={(index === 0 && ref) || undefined}
                                 name={props.name}
                                 data-cy={props.dataCy && `${props.dataCy}-option-${index}`}
                                 disabled={props.disabled || option.disabled}
@@ -147,7 +149,7 @@ function RenderInput<TFieldValues>({
             })}
         </DirectionContainer>
     );
-}
+}) as unknown as <T>(props: NativeCheckboxProps<T>) => JSX.Element;
 
 export function JRCInputCheckbox<TFieldValues>({
     name,