@apia/components 1.0.4 → 2.0.0

package/dist/components/forms/DateInput.d.ts

@@ -0,0 +1,44 @@
+import { InputProps } from '@apia/theme';
+import { TModify } from '@apia/util';
+import React__default from 'react';
+import { IIconInput } from './IconInput.js';
+
+declare global {
+    interface Window {
+        LANG_CODE: string;
+        MSG_INVALID_DATE: string;
+        MSG_FEC_FIN_MAY_FEC_INI: string;
+        LBL_PICK_DATE: string;
+    }
+}
+type TDateProps = TModify<InputProps, {
+    allowPickBeforeToday?: boolean;
+    error?: string | null;
+    /**
+     * Con esta propiedad se puede proveer una función que será utilizada para
+     * determinar qué máscara debe utilizar el input
+     */
+    getCustomMask?: () => string;
+    isLoading?: boolean;
+    /**
+     * Recibe la nueva fecha. En caso de devolver
+     * false desde este método, el nuevo valor no
+     * se persistirá.
+     */
+    onChange?: (newValue: string) => boolean | string | void;
+    /**
+     * Es llamado cada vez que alguien presiona el botón de eliminar fecha.
+     */
+    onDelete?: () => void;
+    onError?: (error: string | null) => unknown;
+    /**
+     * Con esta propiedad se puede proveer una función que recibirá como
+     * parámetro el valor actual del cmapo y debe devolver el valor a mostrar.
+     */
+    renderLabel?: (value: string) => string;
+    value?: string;
+}> & Pick<IIconInput, 'buttonProps'>;
+declare const DateInput: React__default.ForwardRefExoticComponent<Omit<TDateProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
+export { DateInput, type TDateProps };
+//# sourceMappingURL=DateInput.d.ts.map

package/dist/components/forms/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/DateInput.js

@@ -0,0 +1,246 @@
+import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
+import { Close, Box, getVariant } from '@apia/theme';
+import { getDateFormat, useUpdateEffect, isChild } from '@apia/util';
+import dayjs from 'dayjs';
+import uniqueId from 'lodash-es/uniqueId';
+import React__default from 'react';
+import { icons } from '@apia/icons';
+import globalFocus from '../../globalFocus.js';
+import { CalendarModal } from '../modals/CalendarModal.js';
+import { FieldErrorMessage } from './FieldErrorMessage.js';
+import { IconInput } from './IconInput.js';
+import { getFieldErrorStyles } from './util/style.js';
+import { useModal } from '../modals/hooks/useModal.js';
+
+const DEFAULT_LOCALE = window.LANG_CODE;
+const DEFAULT_MASK_PLACEHOLDER = "_";
+const dateFormat = getDateFormat();
+const getMaskForDateFormat = () => {
+  if (dateFormat === "YYYY/MM/DD")
+    return "9999/99/99";
+  return "99/99/9999";
+};
+const DateInput = React__default.forwardRef(
+  ({
+    allowPickBeforeToday,
+    buttonProps: outerButtonProps,
+    className,
+    error,
+    getCustomMask,
+    isLoading,
+    onBlur,
+    onChange,
+    onDelete,
+    onError,
+    renderLabel,
+    value: outerValue,
+    ...props
+  }, ref) => {
+    const id = React__default.useMemo(uniqueId, []);
+    const [inputValue, setInputValue] = React__default.useState(outerValue ?? "");
+    const [calValue, setCalValue] = React__default.useState();
+    const boxRef = React__default.useRef(null);
+    const { show, hide, ...modalProps } = useModal({
+      preFetcher() {
+        globalFocus.focus = () => boxRef.current?.querySelector(".iconButton");
+        return new Promise((resolve) => {
+          let currentSelectedDate = dayjs(inputValue, dateFormat);
+          if (!currentSelectedDate.isValid())
+            currentSelectedDate = dayjs(/* @__PURE__ */ new Date());
+          setCalValue(currentSelectedDate.toDate());
+          resolve();
+        });
+      }
+    });
+    const [stateError, setError] = React__default.useState(error ?? null);
+    const lastEmittedValue = React__default.useRef(outerValue ?? "");
+    useUpdateEffect(() => {
+      setInputValue(outerValue ?? "");
+      lastEmittedValue.current = outerValue;
+    }, [outerValue]);
+    useUpdateEffect(() => {
+      setError(error ?? null);
+    }, [error]);
+    useUpdateEffect(() => {
+      if (onError)
+        onError(stateError);
+    }, [stateError]);
+    const shoutOnChange = React__default.useCallback(
+      (newValue) => {
+        if (newValue !== lastEmittedValue.current && onChange) {
+          lastEmittedValue.current = newValue;
+          return onChange(newValue);
+        }
+        return true;
+      },
+      [onChange]
+    );
+    const setCalendarValue = React__default.useCallback(
+      (value, nocheck) => {
+        if (value === "") {
+          void shoutOnChange("");
+          setInputValue("");
+          return;
+        }
+        let newDate;
+        if (value !== "") {
+          newDate = dayjs(value, dateFormat);
+          if (!newDate.isValid())
+            newDate = dayjs(/* @__PURE__ */ new Date());
+        } else {
+          newDate = dayjs(/* @__PURE__ */ new Date());
+        }
+        const formattedDate = newDate.format(dateFormat);
+        const today = /* @__PURE__ */ new Date();
+        today.setHours(0, 0, 0, 0);
+        if (formattedDate !== inputValue && nocheck !== true) {
+          void shoutOnChange("");
+          setInputValue("");
+          setError(window.MSG_INVALID_DATE);
+        } else if (allowPickBeforeToday === false && newDate.isBefore(today)) {
+          void shoutOnChange("");
+          setInputValue("");
+          setError(window.MSG_FEC_FIN_MAY_FEC_INI);
+        } else {
+          const shoutResult = shoutOnChange(value === "" ? "" : formattedDate);
+          if (shoutResult === false) {
+            setInputValue(shoutResult || "");
+            setError(null);
+          } else if (typeof shoutResult === "string") {
+            setInputValue("");
+            setError(shoutResult);
+          } else {
+            setInputValue(formattedDate);
+            setError(null);
+          }
+        }
+      },
+      [allowPickBeforeToday, inputValue, shoutOnChange]
+    );
+    const selectDate = React__default.useCallback(
+      (val) => {
+        hide();
+        const newValue = dayjs(val).format(dateFormat);
+        setCalendarValue(newValue, true);
+      },
+      [hide, setCalendarValue]
+    );
+    const onCloseCalendarModal = React__default.useCallback(() => {
+      hide();
+    }, [hide]);
+    const handleBlur = React__default.useCallback(
+      (ev) => {
+        if (onBlur && !isChild(ev.relatedTarget, (current) => {
+          return current.id === `DateModal${id}` || current.id === `DateInput${id}`;
+        })) {
+          onBlur(ev);
+        }
+      },
+      [id, onBlur]
+    );
+    const inputProps = React__default.useMemo(
+      () => ({
+        ...props,
+        className: "dateInput",
+        value: renderLabel ? renderLabel(inputValue) : inputValue,
+        ref,
+        onChange: (ev) => {
+          setInputValue(ev.target.value);
+          if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "")
+            setError(null);
+        },
+        onBlur: (ev) => {
+          if (!(props.readOnly || getCustomMask))
+            setCalendarValue(ev.target.value);
+          handleBlur(ev);
+        },
+        onKeyDown: (ev) => {
+          if (ev.key === "Enter")
+            setCalendarValue(inputValue);
+        }
+      }),
+      [
+        getCustomMask,
+        handleBlur,
+        inputValue,
+        props,
+        ref,
+        renderLabel,
+        setCalendarValue
+      ]
+    );
+    const buttonProps = React__default.useMemo(
+      () => ({
+        disabled: props.disabled ?? props.readOnly,
+        "aria-label": window.LBL_PICK_DATE,
+        ...outerButtonProps
+      }),
+      [outerButtonProps, props.disabled, props.readOnly]
+    );
+    const additionalButtons = React__default.useMemo(
+      () => /* @__PURE__ */ jsx(
+        Close,
+        {
+          className: "delete_date_button",
+          onClick: () => {
+            setCalendarValue("");
+            onDelete?.();
+            document.querySelector(
+              `#DateInput${id} input`
+            )?.focus();
+          },
+          type: "button"
+        }
+      ),
+      [id, onDelete, setCalendarValue]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CalendarModal,
+        {
+          ...modalProps,
+          calValue,
+          locale: DEFAULT_LOCALE,
+          handleClickDay: selectDate,
+          onCancel: onCloseCalendarModal,
+          id: `DateModal${id}`
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          ...getVariant("forms.dateInput"),
+          className: `${className ?? ""} dateInput`,
+          id: `DateInput${id}`,
+          ref: boxRef,
+          children: [
+            /* @__PURE__ */ jsx(
+              IconInput,
+              {
+                additionalButtons: inputValue && inputValue !== getMaskForDateFormat().replaceAll(
+                  "9",
+                  DEFAULT_MASK_PLACEHOLDER
+                ) && !props.readOnly && !props.disabled ? additionalButtons : void 0,
+                isLoading,
+                maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
+                mask: getCustomMask ? getCustomMask() : getMaskForDateFormat(),
+                icon: icons.Calendar,
+                onBlur: handleBlur,
+                buttonProps,
+                inputProps,
+                readOnly: props.readOnly,
+                sx: getFieldErrorStyles(stateError === null),
+                onClick: show
+              }
+            ),
+            stateError && /* @__PURE__ */ jsx(FieldErrorMessage, { children: stateError })
+          ]
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "DateInput";
+
+export { DateInput };
+//# sourceMappingURL=DateInput.js.map

package/dist/components/forms/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sources":["../../../src/components/forms/DateInput.tsx"],"sourcesContent":["import { getVariant, Box, Close, InputProps } from '@apia/theme';\nimport {\n  getDateFormat,\n  isChild,\n  TDateFormat,\n  TModify,\n  useUpdateEffect,\n} from '@apia/util';\nimport dayjs from 'dayjs';\nimport uniqueId from 'lodash-es/uniqueId';\nimport React from 'react';\nimport { icons } from '@apia/icons';\nimport globalFocus from '../../globalFocus';\nimport { useModal } from '../modals';\nimport { CalendarModal } from '../modals/CalendarModal';\nimport { FieldErrorMessage } from './FieldErrorMessage';\nimport { IconInput, IIconInput } from './IconInput';\nimport { getFieldErrorStyles } from './util/style';\n\ndeclare global {\n  interface Window {\n    LANG_CODE: string;\n    MSG_INVALID_DATE: string;\n    MSG_FEC_FIN_MAY_FEC_INI: string;\n    LBL_PICK_DATE: string;\n  }\n}\n\nconst DEFAULT_LOCALE = window.LANG_CODE;\nconst DEFAULT_MASK_PLACEHOLDER = '_';\n\nconst dateFormat: TDateFormat = getDateFormat();\n\nconst getMaskForDateFormat = (): string => {\n  if (dateFormat === 'YYYY/MM/DD') return '9999/99/99';\n  return '99/99/9999';\n};\n\nexport type TDateProps = TModify<\n  InputProps,\n  {\n    allowPickBeforeToday?: boolean;\n    error?: string | null;\n    /**\n     * Con esta propiedad se puede proveer una función que será utilizada para\n     * determinar qué máscara debe utilizar el input\n     */\n    getCustomMask?: () => string;\n    isLoading?: boolean;\n    /**\n     * Recibe la nueva fecha. En caso de devolver\n     * false desde este método, el nuevo valor no\n     * se persistirá.\n     */\n    onChange?: (newValue: string) => boolean | string | void;\n    /**\n     * Es llamado cada vez que alguien presiona el botón de eliminar fecha.\n     */\n    onDelete?: () => void;\n    onError?: (error: string | null) => unknown;\n    /**\n     * Con esta propiedad se puede proveer una función que recibirá como\n     * parámetro el valor actual del cmapo y debe devolver el valor a mostrar.\n     */\n    renderLabel?: (value: string) => string;\n    value?: string;\n  }\n> &\n  Pick<IIconInput, 'buttonProps'>;\n\nexport const DateInput = React.forwardRef<HTMLInputElement, TDateProps>(\n  (\n    {\n      allowPickBeforeToday,\n      buttonProps: outerButtonProps,\n      className,\n      error,\n      getCustomMask,\n      isLoading,\n      onBlur,\n      onChange,\n      onDelete,\n      onError,\n      renderLabel,\n      value: outerValue,\n      ...props\n    },\n    ref,\n  ) => {\n    const id = React.useMemo(uniqueId, []);\n    const [inputValue, setInputValue] = React.useState(outerValue ?? '');\n    const [calValue, setCalValue] = React.useState<Date>();\n    const boxRef = React.useRef<HTMLElement | null>(null);\n    const { show, hide, ...modalProps } = useModal({\n      preFetcher() {\n        globalFocus.focus = () =>\n          boxRef.current?.querySelector('.iconButton') as HTMLElement;\n        return new Promise((resolve) => {\n          let currentSelectedDate = dayjs(inputValue, dateFormat);\n          if (!currentSelectedDate.isValid())\n            currentSelectedDate = dayjs(new Date());\n          setCalValue(currentSelectedDate.toDate());\n          resolve();\n        });\n      },\n    });\n    const [stateError, setError] = React.useState<null | string>(error ?? null);\n\n    const lastEmittedValue = React.useRef(outerValue ?? '');\n    useUpdateEffect(() => {\n      setInputValue(outerValue ?? '');\n      lastEmittedValue.current = outerValue as string;\n    }, [outerValue]);\n\n    useUpdateEffect(() => {\n      setError(error ?? null);\n    }, [error]);\n\n    useUpdateEffect(() => {\n      if (onError) onError(stateError);\n    }, [stateError]);\n\n    const shoutOnChange = React.useCallback(\n      (newValue: string) => {\n        if (newValue !== lastEmittedValue.current && onChange) {\n          lastEmittedValue.current = newValue;\n          return onChange(newValue);\n        }\n        return true;\n      },\n      [onChange],\n    );\n\n    const setCalendarValue = React.useCallback(\n      (value: string, nocheck?: boolean) => {\n        if (value === '') {\n          void shoutOnChange('');\n          setInputValue('');\n          return;\n        }\n        let newDate: dayjs.Dayjs;\n        if (value !== '') {\n          // format cal needs: Tue Feb 09 2021 00:00:00 GMT-0300\n          newDate = dayjs(value, dateFormat);\n          if (!newDate.isValid()) newDate = dayjs(new Date());\n        } else {\n          newDate = dayjs(new Date());\n        }\n        const formattedDate = newDate.format(dateFormat);\n        const today = new Date();\n        today.setHours(0, 0, 0, 0);\n        if (formattedDate !== inputValue && nocheck !== true) {\n          void shoutOnChange('');\n          setInputValue('');\n          setError(window.MSG_INVALID_DATE);\n        } else if (allowPickBeforeToday === false && newDate.isBefore(today)) {\n          void shoutOnChange('');\n          setInputValue('');\n          setError(window.MSG_FEC_FIN_MAY_FEC_INI);\n        } else {\n          const shoutResult = shoutOnChange(value === '' ? '' : formattedDate);\n          if (shoutResult === false) {\n            setInputValue(shoutResult || '');\n            setError(null);\n          } else if (typeof shoutResult === 'string') {\n            setInputValue('');\n            setError(shoutResult);\n          } else {\n            setInputValue(formattedDate);\n            setError(null);\n          }\n        }\n      },\n      [allowPickBeforeToday, inputValue, shoutOnChange],\n    );\n\n    const selectDate = React.useCallback(\n      (val: Date): void => {\n        hide();\n        const newValue = dayjs(val).format(dateFormat);\n        setCalendarValue(newValue, true);\n      },\n      [hide, setCalendarValue],\n    );\n\n    const onCloseCalendarModal = React.useCallback(() => {\n      hide();\n    }, [hide]);\n\n    const handleBlur = React.useCallback(\n      (ev: React.FocusEvent<HTMLInputElement>) => {\n        if (\n          onBlur &&\n          !isChild(ev.relatedTarget as HTMLElement, (current) => {\n            return (\n              current.id === `DateModal${id}` || current.id === `DateInput${id}`\n            );\n          })\n        ) {\n          onBlur(ev);\n        }\n      },\n      [id, onBlur],\n    );\n\n    const inputProps = React.useMemo(\n      () => ({\n        ...props,\n        className: 'dateInput',\n        value: renderLabel ? renderLabel(inputValue) : inputValue,\n        ref,\n        onChange: (ev: React.ChangeEvent<HTMLInputElement>) => {\n          setInputValue(ev.target.value);\n          if (\n            getMaskForDateFormat().replaceAll('9', DEFAULT_MASK_PLACEHOLDER) !==\n              ev.target.value &&\n            ev.target.value !== ''\n          )\n            setError(null);\n        },\n        onBlur: (ev: React.FocusEvent<HTMLInputElement>) => {\n          if (!(props.readOnly || getCustomMask))\n            setCalendarValue(ev.target.value);\n          handleBlur(ev);\n        },\n        onKeyDown: (ev: React.KeyboardEvent) => {\n          if (ev.key === 'Enter') setCalendarValue(inputValue);\n        },\n      }),\n      [\n        getCustomMask,\n        handleBlur,\n        inputValue,\n        props,\n        ref,\n        renderLabel,\n        setCalendarValue,\n      ],\n    );\n\n    const buttonProps = React.useMemo(\n      () => ({\n        disabled: props.disabled ?? props.readOnly,\n        'aria-label': window.LBL_PICK_DATE,\n        ...outerButtonProps,\n      }),\n      [outerButtonProps, props.disabled, props.readOnly],\n    );\n\n    const additionalButtons = React.useMemo(\n      () => (\n        <Close\n          className=\"delete_date_button\"\n          onClick={() => {\n            setCalendarValue('');\n            onDelete?.();\n            (\n              document.querySelector(\n                `#DateInput${id} input`,\n              ) as HTMLInputElement\n            )?.focus();\n          }}\n          type=\"button\"\n        />\n      ),\n      [id, onDelete, setCalendarValue],\n    );\n\n    return (\n      <>\n        <CalendarModal\n          {...modalProps}\n          calValue={calValue}\n          locale={DEFAULT_LOCALE}\n          handleClickDay={selectDate}\n          onCancel={onCloseCalendarModal}\n          id={`DateModal${id}`}\n        />\n        <Box\n          {...getVariant('forms.dateInput')}\n          className={`${className ?? ''} dateInput`}\n          id={`DateInput${id}`}\n          ref={boxRef}\n        >\n          <IconInput\n            additionalButtons={\n              inputValue &&\n              inputValue !==\n                getMaskForDateFormat().replaceAll(\n                  '9',\n                  DEFAULT_MASK_PLACEHOLDER,\n                ) &&\n              !props.readOnly &&\n              !props.disabled\n                ? additionalButtons\n                : undefined\n            }\n            isLoading={isLoading}\n            maskPlaceholder={DEFAULT_MASK_PLACEHOLDER}\n            mask={getCustomMask ? getCustomMask() : getMaskForDateFormat()}\n            icon={icons.Calendar}\n            onBlur={handleBlur}\n            buttonProps={buttonProps}\n            inputProps={inputProps}\n            readOnly={props.readOnly}\n            sx={getFieldErrorStyles(stateError === null)}\n            onClick={show}\n          />\n          {stateError && <FieldErrorMessage>{stateError}</FieldErrorMessage>}\n        </Box>\n      </>\n    );\n  },\n);\n\nDateInput.displayName = 'DateInput';\n"],"names":["React"],"mappings":"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"}

package/dist/components/forms/FieldErrorMessage.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface IFieldErrorMessage {
+    children: React.ReactNode | string;
+    name?: string;
+}
+declare const FieldErrorMessage: ({ children, name }: IFieldErrorMessage) => React.JSX.Element | null;
+
+export { FieldErrorMessage, type IFieldErrorMessage };
+//# sourceMappingURL=FieldErrorMessage.d.ts.map

package/dist/components/forms/FieldErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrorMessage.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/FieldErrorMessage.js

@@ -0,0 +1,34 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { customEvents } from '@apia/util';
+import * as React from 'react';
+import { Box } from '@apia/theme';
+
+const FieldErrorMessage = ({ children, name }) => {
+  const [ref, setRef] = React.useState(null);
+  React.useEffect(() => {
+    if (children) {
+      const event = new CustomEvent(customEvents.focus, { bubbles: true });
+      ref?.dispatchEvent(event);
+    }
+  }, [children, ref]);
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: setRef,
+        role: "alert",
+        "data-testid": name ? `err_${name}` : null,
+        sx: {
+          mb: "0",
+          color: "danger",
+          pt: "2"
+        },
+        children
+      }
+    );
+  }
+  return null;
+};
+
+export { FieldErrorMessage };
+//# sourceMappingURL=FieldErrorMessage.js.map

package/dist/components/forms/FieldErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrorMessage.js","sources":["../../../src/components/forms/FieldErrorMessage.tsx"],"sourcesContent":["import { customEvents } from '@apia/util';\nimport * as React from 'react';\nimport { Box } from '@apia/theme';\n\nexport interface IFieldErrorMessage {\n  children: React.ReactNode | string;\n  name?: string;\n}\n\nexport const FieldErrorMessage = ({ children, name }: IFieldErrorMessage) => {\n  const [ref, setRef] = React.useState<null | HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (children) {\n      const event = new CustomEvent(customEvents.focus, { bubbles: true });\n      ref?.dispatchEvent(event);\n    }\n  }, [children, ref]);\n\n  if (children) {\n    return (\n      <Box\n        ref={setRef}\n        role=\"alert\"\n        data-testid={name ? `err_${name}` : null}\n        sx={{\n          mb: '0',\n          color: 'danger',\n          pt: '2',\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n  return null;\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,iBAAoB,GAAA,CAAC,EAAE,QAAA,EAAU,MAA+B,KAAA;AAC3E,EAAA,MAAM,CAAC,GAAK,EAAA,MAAM,CAAI,GAAA,KAAA,CAAM,SAAgC,IAAI,CAAA,CAAA;AAEhE,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,KAAA,GAAQ,IAAI,WAAY,CAAA,YAAA,CAAa,OAAO,EAAE,OAAA,EAAS,MAAM,CAAA,CAAA;AACnE,MAAA,GAAA,EAAK,cAAc,KAAK,CAAA,CAAA;AAAA,KAC1B;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,GAAG,CAAC,CAAA,CAAA;AAElB,EAAA,IAAI,QAAU,EAAA;AACZ,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,MAAA;AAAA,QACL,IAAK,EAAA,OAAA;AAAA,QACL,aAAa,EAAA,IAAA,GAAO,CAAO,IAAA,EAAA,IAAI,CAAK,CAAA,GAAA,IAAA;AAAA,QACpC,EAAI,EAAA;AAAA,UACF,EAAI,EAAA,GAAA;AAAA,UACJ,KAAO,EAAA,QAAA;AAAA,UACP,EAAI,EAAA,GAAA;AAAA,SACN;AAAA,QAEC,QAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/components/forms/FieldLabel.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { BoxProps } from '@apia/theme';
+
+type TFieldLabel = {
+    avoidSemicolon?: boolean;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string;
+    hideRequiredMark?: boolean;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean;
+    requiredMarkPosition?: 'before' | 'after';
+} & BoxProps;
+declare const FieldLabel: React.ForwardRefExoticComponent<{
+    avoidSemicolon?: boolean | undefined;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string | undefined;
+    hideRequiredMark?: boolean | undefined;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean | undefined;
+    requiredMarkPosition?: "after" | "before" | undefined;
+} & BoxProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FieldLabel, type TFieldLabel };
+//# sourceMappingURL=FieldLabel.d.ts.map

package/dist/components/forms/FieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/FieldLabel.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { injectStyles, Box, getVariant } from '@apia/theme';
+import { forwardRef } from 'react';
+import { RequiredMark } from './RequiredMark.js';
+
+injectStyles("layout.common.components.fieldLabel", {
+  display: "flex",
+  flexDirection: "column",
+  gap: 1,
+  ".fieldLabel__label": {
+    fontWeight: "bold"
+  }
+});
+const FieldLabel = forwardRef(
+  ({
+    as,
+    avoidSemicolon,
+    children,
+    error,
+    hideRequiredMark,
+    label,
+    required,
+    requiredMarkPosition = "after",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        as: as ?? "label",
+        ...props,
+        className: `fieldLabel ${props.className ?? ""}`,
+        ...getVariant("layout.common.components.fieldLabel"),
+        "aria-label": props["aria-label"] ?? label,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: "fieldLabel__label", children: [
+            requiredMarkPosition === "before" && /* @__PURE__ */ jsx(
+              RequiredMark,
+              {
+                isRequired: required,
+                isReadonly: hideRequiredMark,
+                isFormReadonly: hideRequiredMark
+              }
+            ),
+            label,
+            requiredMarkPosition === "after" && /* @__PURE__ */ jsx(
+              RequiredMark,
+              {
+                isRequired: required,
+                isReadonly: hideRequiredMark,
+                isFormReadonly: hideRequiredMark
+              }
+            ),
+            !avoidSemicolon && ":"
+          ] }),
+          /* @__PURE__ */ jsx(Box, { children }),
+          error && /* @__PURE__ */ jsx(Box, { className: "fieldLabel__error", children: error })
+        ]
+      }
+    );
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+
+export { FieldLabel };
+//# sourceMappingURL=FieldLabel.js.map

package/dist/components/forms/FieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.js","sources":["../../../src/components/forms/FieldLabel.tsx"],"sourcesContent":["import { injectStyles, getVariant, Box, BoxProps } from '@apia/theme';\nimport { forwardRef } from 'react';\nimport { RequiredMark } from './RequiredMark';\n\nexport type TFieldLabel = {\n  avoidSemicolon?: boolean;\n  /**\n   * Permite mostrar un mensaje de error debajo del campo\n   */\n  error?: string;\n  hideRequiredMark?: boolean;\n  label: string;\n  /**\n   * La propiedad required se utiliza para mostrar el * de requerido.\n   *\n   * @see requiredMarkPosition\n   * @see hideRequiredMark\n   */\n  required?: boolean;\n  requiredMarkPosition?: 'before' | 'after';\n} & BoxProps;\n\ninjectStyles('layout.common.components.fieldLabel', {\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n\n  '.fieldLabel__label': {\n    fontWeight: 'bold',\n  },\n});\n\nexport const FieldLabel = forwardRef<HTMLDivElement, TFieldLabel>(\n  (\n    {\n      as,\n      avoidSemicolon,\n      children,\n      error,\n      hideRequiredMark,\n      label,\n      required,\n      requiredMarkPosition = 'after',\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Box\n        as={as ?? 'label'}\n        {...props}\n        className={`fieldLabel ${props.className ?? ''}`}\n        {...getVariant('layout.common.components.fieldLabel')}\n        aria-label={props['aria-label'] ?? label}\n        ref={ref}\n      >\n        <Box className=\"fieldLabel__label\">\n          {requiredMarkPosition === 'before' && (\n            <RequiredMark\n              isRequired={required}\n              isReadonly={hideRequiredMark}\n              isFormReadonly={hideRequiredMark}\n            />\n          )}\n          {label}\n          {requiredMarkPosition === 'after' && (\n            <RequiredMark\n              isRequired={required}\n              isReadonly={hideRequiredMark}\n              isFormReadonly={hideRequiredMark}\n            />\n          )}\n          {!avoidSemicolon && ':'}\n        </Box>\n        <Box>{children}</Box>\n        {error && <Box className=\"fieldLabel__error\">{error}</Box>}\n      </Box>\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;AAsBA,YAAA,CAAa,qCAAuC,EAAA;AAAA,EAClD,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,CAAA;AAAA,EAEL,oBAAsB,EAAA;AAAA,IACpB,UAAY,EAAA,MAAA;AAAA,GACd;AACF,CAAC,CAAA,CAAA;AAEM,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,EAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,oBAAuB,GAAA,OAAA;AAAA,IACvB,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IACE,uBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,IAAI,EAAM,IAAA,OAAA;AAAA,QACT,GAAG,KAAA;AAAA,QACJ,SAAW,EAAA,CAAA,WAAA,EAAc,KAAM,CAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,QAC7C,GAAG,WAAW,qCAAqC,CAAA;AAAA,QACpD,YAAA,EAAY,KAAM,CAAA,YAAY,CAAK,IAAA,KAAA;AAAA,QACnC,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,GAAA,EAAA,EAAI,WAAU,mBACZ,EAAA,QAAA,EAAA;AAAA,YAAA,oBAAA,KAAyB,QACxB,oBAAA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,UAAY,EAAA,QAAA;AAAA,gBACZ,UAAY,EAAA,gBAAA;AAAA,gBACZ,cAAgB,EAAA,gBAAA;AAAA,eAAA;AAAA,aAClB;AAAA,YAED,KAAA;AAAA,YACA,yBAAyB,OACxB,oBAAA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,UAAY,EAAA,QAAA;AAAA,gBACZ,UAAY,EAAA,gBAAA;AAAA,gBACZ,cAAgB,EAAA,gBAAA;AAAA,eAAA;AAAA,aAClB;AAAA,YAED,CAAC,cAAkB,IAAA,GAAA;AAAA,WACtB,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,OAAK,QAAS,EAAA,CAAA;AAAA,UACd,KAAS,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAU,qBAAqB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACtD,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/components/forms/IconInput.d.ts

@@ -0,0 +1,28 @@
+import { InputProps } from '@apia/theme';
+import React__default from 'react';
+import { TIconType, TIconName } from '@apia/icons';
+import { IconButton } from './buttons/IconButton.js';
+
+interface IField {
+    className?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    readOnly?: boolean;
+}
+interface IIconInput extends IField {
+    additionalButtons?: React__default.ReactNode;
+    additionalButtonsPosition?: 'before' | 'after';
+    buttonProps?: Partial<React__default.ComponentProps<typeof IconButton>>;
+    buttonRef?: React__default.RefObject<HTMLButtonElement>;
+    hideButton?: boolean;
+    icon?: TIconType | TIconName;
+    inputProps?: Partial<InputProps>;
+    inputRef?: React__default.RefObject<HTMLInputElement>;
+    onClick?: (ev: React__default.MouseEvent) => void;
+    onBlur?: React__default.FocusEventHandler;
+    [key: string]: unknown;
+}
+declare const IconInput: ({ additionalButtons, additionalButtonsPosition, buttonProps, buttonRef, className, disabled, hideButton, icon, inputProps, inputRef, isLoading, mask, onClick, onBlur, readOnly, ...rest }: IIconInput) => React__default.JSX.Element;
+
+export { type IField, type IIconInput, IconInput };
+//# sourceMappingURL=IconInput.d.ts.map

package/dist/components/forms/IconInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconInput.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/IconInput.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Box, getVariant, Input } from '@apia/theme';
+import { useCombinedRefs, isChild } from '@apia/util';
+import React__default from 'react';
+import { IconButton } from './buttons/IconButton.js';
+
+const IconInput = ({
+  additionalButtons,
+  additionalButtonsPosition = "before",
+  buttonProps,
+  buttonRef,
+  className,
+  disabled,
+  hideButton,
+  icon = "Search",
+  inputProps,
+  inputRef,
+  isLoading,
+  mask,
+  onClick,
+  onBlur,
+  readOnly,
+  ...rest
+}) => {
+  const { sx: inputSx, ...actualInputProps } = inputProps ?? {};
+  const innerButtonRef = React__default.useRef(null);
+  const assignButtonRef = useCombinedRefs(buttonRef, innerButtonRef);
+  const innerInputRef = React__default.useRef(null);
+  const assignInputRef = useCombinedRefs(inputRef, innerInputRef);
+  const parentRef = React__default.useRef(null);
+  const handleBlur = React__default.useCallback(
+    (ev) => {
+      if (onBlur && (!ev.relatedTarget || ev.relatedTarget && !isChild(
+        ev.relatedTarget,
+        (current) => current === parentRef.current
+      )))
+        onBlur(ev);
+    },
+    [onBlur]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...getVariant("forms.iconInput"),
+      className: `${className ?? ""} iconInput`,
+      ref: parentRef,
+      onBlur: handleBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            disabled: isLoading ?? disabled,
+            ref: assignInputRef,
+            readOnly,
+            sx: { variant: "forms.input", ...inputSx },
+            "data-variant": "forms.input",
+            ...rest,
+            ...actualInputProps
+          }
+        ),
+        additionalButtonsPosition === "before" && additionalButtons,
+        !hideButton && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick,
+            icon,
+            disabled: readOnly ?? disabled,
+            isLoading,
+            ref: assignButtonRef,
+            ...buttonProps
+          }
+        ),
+        additionalButtonsPosition === "after" && additionalButtons
+      ]
+    }
+  );
+};
+
+export { IconInput };
+//# sourceMappingURL=IconInput.js.map

package/dist/components/forms/IconInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconInput.js","sources":["../../../src/components/forms/IconInput.tsx"],"sourcesContent":["import { getVariant, Box, Input, InputProps } from '@apia/theme';\nimport { isChild, useCombinedRefs } from '@apia/util';\nimport React from 'react';\nimport { TIconName, TIconType } from '@apia/icons';\nimport { IconButton } from './buttons';\n\nexport interface IField {\n  className?: string;\n  disabled?: boolean;\n  isLoading?: boolean;\n  readOnly?: boolean;\n}\n\nexport interface IIconInput extends IField {\n  additionalButtons?: React.ReactNode;\n  additionalButtonsPosition?: 'before' | 'after';\n  buttonProps?: Partial<React.ComponentProps<typeof IconButton>>;\n  buttonRef?: React.RefObject<HTMLButtonElement>;\n  hideButton?: boolean;\n  icon?: TIconType | TIconName;\n  inputProps?: Partial<InputProps>;\n  inputRef?: React.RefObject<HTMLInputElement>;\n  onClick?: (ev: React.MouseEvent) => void;\n  onBlur?: React.FocusEventHandler;\n  [key: string]: unknown;\n}\n\nexport const IconInput = ({\n  additionalButtons,\n  additionalButtonsPosition = 'before',\n  buttonProps,\n  buttonRef,\n  className,\n  disabled,\n  hideButton,\n  icon = 'Search',\n  inputProps,\n  inputRef,\n  isLoading,\n  mask,\n  onClick,\n  onBlur,\n  readOnly,\n  ...rest\n}: IIconInput) => {\n  const { sx: inputSx, ...actualInputProps } = inputProps ?? {};\n  const innerButtonRef = React.useRef<HTMLButtonElement>(null);\n  const assignButtonRef = useCombinedRefs(buttonRef, innerButtonRef);\n\n  const innerInputRef = React.useRef<HTMLInputElement>(null);\n  const assignInputRef = useCombinedRefs(inputRef, innerInputRef);\n\n  const parentRef = React.useRef<HTMLElement | null>(null);\n  const handleBlur = React.useCallback(\n    (ev: React.FocusEvent) => {\n      if (\n        onBlur &&\n        (!ev.relatedTarget ||\n          (ev.relatedTarget &&\n            !isChild(\n              ev.relatedTarget as HTMLElement,\n              (current) => current === parentRef.current,\n            )))\n      )\n        onBlur(ev);\n    },\n    [onBlur],\n  );\n\n  return (\n    <Box\n      {...getVariant('forms.iconInput')}\n      className={`${className ?? ''} iconInput`}\n      ref={parentRef}\n      onBlur={handleBlur}\n    >\n      <Input\n        disabled={isLoading ?? disabled}\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any\n        ref={assignInputRef as any}\n        readOnly={readOnly}\n        sx={{ variant: 'forms.input', ...inputSx }}\n        data-variant=\"forms.input\"\n        {...rest}\n        {...actualInputProps}\n      />\n      {additionalButtonsPosition === 'before' && additionalButtons}\n      {!hideButton && (\n        <IconButton\n          onClick={onClick}\n          icon={icon}\n          disabled={readOnly ?? disabled}\n          isLoading={isLoading}\n          ref={assignButtonRef as React.Ref<HTMLButtonElement>}\n          {...buttonProps}\n        />\n      )}\n      {additionalButtonsPosition === 'after' && additionalButtons}\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AA2BO,MAAM,YAAY,CAAC;AAAA,EACxB,iBAAA;AAAA,EACA,yBAA4B,GAAA,QAAA;AAAA,EAC5B,WAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAO,GAAA,QAAA;AAAA,EACP,UAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAkB,KAAA;AAChB,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,EAAS,GAAG,gBAAiB,EAAA,GAAI,cAAc,EAAC,CAAA;AAC5D,EAAM,MAAA,cAAA,GAAiBA,cAAM,CAAA,MAAA,CAA0B,IAAI,CAAA,CAAA;AAC3D,EAAM,MAAA,eAAA,GAAkB,eAAgB,CAAA,SAAA,EAAW,cAAc,CAAA,CAAA;AAEjE,EAAM,MAAA,aAAA,GAAgBA,cAAM,CAAA,MAAA,CAAyB,IAAI,CAAA,CAAA;AACzD,EAAM,MAAA,cAAA,GAAiB,eAAgB,CAAA,QAAA,EAAU,aAAa,CAAA,CAAA;AAE9D,EAAM,MAAA,SAAA,GAAYA,cAAM,CAAA,MAAA,CAA2B,IAAI,CAAA,CAAA;AACvD,EAAA,MAAM,aAAaA,cAAM,CAAA,WAAA;AAAA,IACvB,CAAC,EAAyB,KAAA;AACxB,MAAA,IACE,WACC,CAAC,EAAA,CAAG,aACF,IAAA,EAAA,CAAG,iBACF,CAAC,OAAA;AAAA,QACC,EAAG,CAAA,aAAA;AAAA,QACH,CAAC,OAAY,KAAA,OAAA,KAAY,SAAU,CAAA,OAAA;AAAA,OACrC,CAAA;AAEJ,QAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA,KACb;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAW,iBAAiB,CAAA;AAAA,MAChC,SAAA,EAAW,CAAG,EAAA,SAAA,IAAa,EAAE,CAAA,UAAA,CAAA;AAAA,MAC7B,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA,UAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,UAAU,SAAa,IAAA,QAAA;AAAA,YAEvB,GAAK,EAAA,cAAA;AAAA,YACL,QAAA;AAAA,YACA,EAAI,EAAA,EAAE,OAAS,EAAA,aAAA,EAAe,GAAG,OAAQ,EAAA;AAAA,YACzC,cAAa,EAAA,aAAA;AAAA,YACZ,GAAG,IAAA;AAAA,YACH,GAAG,gBAAA;AAAA,WAAA;AAAA,SACN;AAAA,QACC,8BAA8B,QAAY,IAAA,iBAAA;AAAA,QAC1C,CAAC,UACA,oBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,UAAU,QAAY,IAAA,QAAA;AAAA,YACtB,SAAA;AAAA,YACA,GAAK,EAAA,eAAA;AAAA,YACJ,GAAG,WAAA;AAAA,WAAA;AAAA,SACN;AAAA,QAED,8BAA8B,OAAW,IAAA,iBAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC5C,CAAA;AAEJ;;;;"}