@apia/components 1.0.4 → 2.0.1

package/dist/components/accordion/defaultElements/DefaultAccordionItemButton.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import { TIconName } from '@apia/icons';
+import { ISimpleButton } from '../../forms/buttons/SimpleButton.js';
+import '../../forms/DateInput.js';
+import '../../forms/NumberInput.js';
+
+interface IAccordionItemButton {
+    ariaLabel: string;
+    /**
+     * Si checked !== undefined => se mostrará un checkbox.
+     */
+    checked?: boolean;
+    /**
+     * Solamente se utiliza en conjunto con el checkbox y permite evitar que el
+     * usuario pueda marcar o desmarcar el checkbox.
+     */
+    className?: string;
+    disableSelection?: boolean;
+    domButtonProps?: ISimpleButton;
+    label: string;
+    /**
+     * Evento que se dispara cuando el usuario hace click en el checkbox o
+     * presiona espacio sobre el botón del acordeón.
+     */
+    onChange?: (checked: boolean) => unknown;
+    onClick?: (ev: MouseEvent) => unknown;
+    onUserPressEnter?: (ev: KeyboardEvent) => unknown;
+    rightButtons?: ReactNode;
+    rightIcons?: TIconName[] | TIconName;
+    tabIndex?: number;
+    /**
+     * Si no se pasa title se usará ariaLabel.
+     */
+    title?: string;
+}
+declare const DefaultAccordionItemButton: (props: IAccordionItemButton) => React.JSX.Element;
+
+export { DefaultAccordionItemButton, type IAccordionItemButton };
+//# sourceMappingURL=DefaultAccordionItemButton.d.ts.map

package/dist/components/accordion/defaultElements/DefaultAccordionItemButton.d.ts.map

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

package/dist/components/accordion/defaultElements/DefaultAccordionItemButton.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { Icon } from '@apia/icons';
+import { useAccordionContext } from '../context.js';
+import { Checkbox } from './Checkbox.js';
+import { useIsChecked } from './useIsChecked.js';
+import { useCallback } from 'react';
+import { AutoEllipsis } from '../../responsive/AutoEllipsis.js';
+import { SimpleButton } from '../../forms/buttons/SimpleButton.js';
+
+const DefaultAccordionItemButton = (props) => {
+  const handler = useAccordionContext();
+  const { isExpanded } = handler.hooks.useItemStateSelector((props2) => props2);
+  const id = handler.hooks.useItemId();
+  const [isChecked, setIsChecked] = useIsChecked(props);
+  const handleClick = useCallback(
+    (ev) => {
+      props.onClick?.(ev);
+      if (!ev.isDefaultPrevented())
+        handler.udpateItem(id, (current) => ({
+          isExpanded: !current.isExpanded
+        }));
+    },
+    [handler, id, props]
+  );
+  const handleKeyDown = useCallback(
+    (ev) => {
+      if (ev.code === "Enter") {
+        props.onUserPressEnter?.(ev);
+        if (!ev.isDefaultPrevented() && props.rightButtons)
+          handler.udpateItem(id, (current) => ({
+            isExpanded: !current.isExpanded
+          }));
+      }
+    },
+    [handler, id, props]
+  );
+  return /* @__PURE__ */ jsxs(
+    SimpleButton,
+    {
+      ...props.domButtonProps,
+      className: `accordion__item__button ${props.className ?? ""} ${props.domButtonProps?.className ?? ""}`,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "aria-expanded": isExpanded,
+      "aria-controls": `accordion__${handler.id}__${id}`,
+      title: props.title,
+      "aria-label": props.ariaLabel,
+      tabIndex: props.tabIndex,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__leftGroup", children: [
+          props.checked !== void 0 && /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isChecked,
+              disabled: props.disableSelection,
+              onChange: setIsChecked
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { as: "h3", className: "accordion__item__button__label", children: /* @__PURE__ */ jsx(AutoEllipsis, { overrideStyles: () => ({ textAlign: "left" }), children: props.label ?? props.title ?? props.ariaLabel }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__rightGroup", children: [
+          props.rightButtons,
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: isExpanded ? "ArrowUpThin" : "ArrowDownThin",
+              title: props.title ?? props.ariaLabel,
+              size: 23
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { DefaultAccordionItemButton };
+//# sourceMappingURL=DefaultAccordionItemButton.js.map

package/dist/components/accordion/defaultElements/DefaultAccordionItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultAccordionItemButton.js","sources":["../../../../src/components/accordion/defaultElements/DefaultAccordionItemButton.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { Icon, type TIconName } from '@apia/icons';\nimport { useAccordionContext } from '../context';\nimport { ISimpleButton, SimpleButton } from '../../forms';\nimport { Checkbox } from './Checkbox';\nimport { useIsChecked } from './useIsChecked';\nimport { KeyboardEvent, MouseEvent, ReactNode, useCallback } from 'react';\nimport { AutoEllipsis } from '../../responsive';\n\nexport interface IAccordionItemButton {\n  ariaLabel: string;\n  /**\n   * Si checked !== undefined => se mostrará un checkbox.\n   */\n  checked?: boolean;\n  /**\n   * Solamente se utiliza en conjunto con el checkbox y permite evitar que el\n   * usuario pueda marcar o desmarcar el checkbox.\n   */\n  className?: string;\n  disableSelection?: boolean;\n  domButtonProps?: ISimpleButton;\n  label: string;\n  /**\n   * Evento que se dispara cuando el usuario hace click en el checkbox o\n   * presiona espacio sobre el botón del acordeón.\n   */\n  onChange?: (checked: boolean) => unknown;\n  onClick?: (ev: MouseEvent) => unknown;\n  onUserPressEnter?: (ev: KeyboardEvent) => unknown;\n  rightButtons?: ReactNode;\n  rightIcons?: TIconName[] | TIconName;\n  tabIndex?: number;\n  /**\n   * Si no se pasa title se usará ariaLabel.\n   */\n  title?: string;\n}\n\nexport const DefaultAccordionItemButton = (props: IAccordionItemButton) => {\n  const handler = useAccordionContext();\n  const { isExpanded } = handler.hooks.useItemStateSelector((props) => props);\n  const id = handler.hooks.useItemId();\n  const [isChecked, setIsChecked] = useIsChecked(props);\n  const handleClick = useCallback(\n    (ev: MouseEvent) => {\n      props.onClick?.(ev);\n      if (!ev.isDefaultPrevented())\n        handler.udpateItem(id, (current) => ({\n          isExpanded: !current.isExpanded,\n        }));\n    },\n    [handler, id, props],\n  );\n  const handleKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.code === 'Enter') {\n        props.onUserPressEnter?.(ev);\n        if (!ev.isDefaultPrevented() && props.rightButtons)\n          handler.udpateItem(id, (current) => ({\n            isExpanded: !current.isExpanded,\n          }));\n      }\n    },\n    [handler, id, props],\n  );\n\n  return (\n    <SimpleButton\n      {...props.domButtonProps}\n      className={`accordion__item__button ${props.className ?? ''} ${\n        props.domButtonProps?.className ?? ''\n      }`}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      aria-expanded={isExpanded}\n      aria-controls={`accordion__${handler.id}__${id}`}\n      title={props.title}\n      aria-label={props.ariaLabel}\n      tabIndex={props.tabIndex}\n    >\n      <Box className=\"accordion__item__button__leftGroup\">\n        {props.checked !== undefined && (\n          <Checkbox\n            checked={isChecked}\n            disabled={props.disableSelection}\n            onChange={setIsChecked}\n          />\n        )}\n        <Box as=\"h3\" className=\"accordion__item__button__label\">\n          <AutoEllipsis overrideStyles={() => ({ textAlign: 'left' })}>\n            {props.label ?? props.title ?? props.ariaLabel}\n          </AutoEllipsis>\n        </Box>\n      </Box>\n      <Box className=\"accordion__item__button__rightGroup\">\n        {props.rightButtons}\n        <Icon\n          name={isExpanded ? 'ArrowUpThin' : 'ArrowDownThin'}\n          title={props.title ?? props.ariaLabel}\n          size={23}\n        />\n      </Box>\n    </SimpleButton>\n  );\n};\n"],"names":["props"],"mappings":"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"}

package/dist/components/accordion/defaultElements/useIsChecked.js

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+import { useAccordionContext } from '../context.js';
+
+function useIsChecked(props) {
+  const handler = useAccordionContext();
+  const isChecked = handler.hooks.useItemStateSelector(
+    (current) => current.isChecked
+  );
+  const id = handler.hooks.useItemId();
+  const previousPropsChecked = useRef(props.checked);
+  if (previousPropsChecked.current !== props.checked && props.checked !== void 0) {
+    previousPropsChecked.current = props.checked;
+    handler.udpateItem(id, { isChecked: props.checked });
+  }
+  return [
+    isChecked,
+    (isChecked2) => {
+      handler.udpateItem(id, { isChecked: isChecked2 });
+      props.onChange?.(isChecked2);
+    }
+  ];
+}
+
+export { useIsChecked };
+//# sourceMappingURL=useIsChecked.js.map

package/dist/components/accordion/defaultElements/useIsChecked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsChecked.js","sources":["../../../../src/components/accordion/defaultElements/useIsChecked.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useAccordionContext } from '../context';\nimport { IAccordionItemButton } from './DefaultAccordionItemButton';\n\nexport function useIsChecked(\n  props: IAccordionItemButton,\n): [boolean, (isChecked: boolean) => void] {\n  const handler = useAccordionContext();\n  const isChecked = handler.hooks.useItemStateSelector(\n    (current) => current.isChecked,\n  );\n  const id = handler.hooks.useItemId();\n\n  const previousPropsChecked = useRef(props.checked);\n  if (\n    previousPropsChecked.current !== props.checked &&\n    props.checked !== undefined\n  ) {\n    previousPropsChecked.current = props.checked;\n    handler.udpateItem(id, { isChecked: props.checked });\n  }\n\n  return [\n    isChecked,\n    (isChecked) => {\n      handler.udpateItem(id, { isChecked });\n      props.onChange?.(isChecked);\n    },\n  ];\n}\n"],"names":["isChecked"],"mappings":";;;AAIO,SAAS,aACd,KACyC,EAAA;AACzC,EAAA,MAAM,UAAU,mBAAoB,EAAA,CAAA;AACpC,EAAM,MAAA,SAAA,GAAY,QAAQ,KAAM,CAAA,oBAAA;AAAA,IAC9B,CAAC,YAAY,OAAQ,CAAA,SAAA;AAAA,GACvB,CAAA;AACA,EAAM,MAAA,EAAA,GAAK,OAAQ,CAAA,KAAA,CAAM,SAAU,EAAA,CAAA;AAEnC,EAAM,MAAA,oBAAA,GAAuB,MAAO,CAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AACjD,EAAA,IACE,qBAAqB,OAAY,KAAA,KAAA,CAAM,OACvC,IAAA,KAAA,CAAM,YAAY,KAClB,CAAA,EAAA;AACA,IAAA,oBAAA,CAAqB,UAAU,KAAM,CAAA,OAAA,CAAA;AACrC,IAAA,OAAA,CAAQ,WAAW,EAAI,EAAA,EAAE,SAAW,EAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AAAA,GACrD;AAEA,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,CAACA,UAAc,KAAA;AACb,MAAA,OAAA,CAAQ,UAAW,CAAA,EAAA,EAAI,EAAE,SAAA,EAAAA,YAAW,CAAA,CAAA;AACpC,MAAA,KAAA,CAAM,WAAWA,UAAS,CAAA,CAAA;AAAA,KAC5B;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/accordion/handler.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { TId } from '@apia/util';
+import { TItemState, TItemStateListener, TPropsListener } from './types.js';
+import { IAccordionProps } from './Accordion.js';
+
+type TSelectionComparator<T> = (prev: T, next: T) => boolean;
+type TItemUpdater = Partial<TItemState> | ((currentProps: TItemState) => Partial<TItemState>);
+declare class AccordionHandler {
+    id: string;
+    props: IAccordionProps;
+    itemsState: Record<TId, TItemState>;
+    itemsStateListeners: Record<TId, TItemStateListener[]>;
+    propsListeners: TPropsListener[];
+    constructor(id: string, props: IAccordionProps);
+    registerItem(itemId: TId, initialState: TItemState): void;
+    toggleItem(itemId: TId, isExpanded: boolean): void;
+    unregisterItem(itemId: TId): void;
+    /**
+     * Permite actualizar parcialmente el estado de un item
+     */
+    udpateItem(itemId: TId, updater: TItemUpdater): void;
+    updateProps(props: IAccordionProps): void;
+    hooks: {
+        useAccordionContextProvider: () => ({ children }: {
+            children: ReactNode;
+        }) => React.JSX.Element;
+        useItemContextProvider: (itemId: TId) => ({ children }: {
+            children: ReactNode;
+        }) => React.JSX.Element;
+        useItemId: () => TId;
+        useItemStateSelector: <T>(selector: (props: TItemState) => T, comparator?: TSelectionComparator<T>) => T;
+        useItemStateUpdate: (cb: TItemStateListener) => void;
+        usePropsSelector: <T_1>(selector: (props: IAccordionProps) => T_1, comparator?: TSelectionComparator<T_1>) => T_1;
+        usePropsUpdate: (cb: TPropsListener) => void;
+    };
+}
+
+export { AccordionHandler };
+//# sourceMappingURL=handler.d.ts.map

package/dist/components/accordion/handler.d.ts.map

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

package/dist/components/accordion/handler.js

@@ -0,0 +1,118 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useMemo, useContext, useEffect, useState } from 'react';
+import { AccordionContext, AccordionItemContext } from './context.js';
+import { shallowEqual } from '@apia/store';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+function makeItemStateSelectorHook(handler) {
+  return function useItemStateSelector(selector, comparator = shallowEqual) {
+    const id = handler.hooks.useItemId();
+    const [state, setState] = useState(selector(handler.itemsState[id]));
+    handler.hooks.useItemStateUpdate((props) => {
+      const newState = selector(props);
+      if (!comparator(state, newState)) {
+        setState(newState);
+      }
+    });
+    return state;
+  };
+}
+function makePropsSelectorHook(handler) {
+  return function usePropsSelector(selector, comparator = shallowEqual) {
+    const [state, setState] = useState(selector(handler.props));
+    handler.hooks.usePropsUpdate((props) => {
+      const newState = selector(props);
+      if (!comparator(state, newState)) {
+        setState(newState);
+      }
+    });
+    return state;
+  };
+}
+class AccordionHandler {
+  constructor(id, props) {
+    this.id = id;
+    this.props = props;
+    __publicField(this, "itemsState", {});
+    __publicField(this, "itemsStateListeners", {});
+    __publicField(this, "propsListeners", []);
+    __publicField(this, "hooks", {
+      useAccordionContextProvider: () => {
+        const Provider = useMemo(
+          () => ({ children }) => /* @__PURE__ */ jsx(AccordionContext.Provider, { value: this, children }),
+          []
+        );
+        return Provider;
+      },
+      useItemContextProvider: (itemId) => {
+        const Provider = useMemo(
+          () => ({ children }) => /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: itemId, children }),
+          [itemId]
+        );
+        return Provider;
+      },
+      useItemId: () => {
+        const id = useContext(AccordionItemContext);
+        if (id === null)
+          throw new Error("There is no AccordionItemContext");
+        return id;
+      },
+      useItemStateSelector: makeItemStateSelectorHook(this),
+      useItemStateUpdate: (cb) => {
+        const itemId = this.hooks.useItemId();
+        useEffect(() => {
+          if (!this.itemsStateListeners[itemId])
+            this.itemsStateListeners[itemId] = [];
+          this.itemsStateListeners[itemId].push(cb);
+          return () => {
+            this.itemsStateListeners[itemId] = this.itemsStateListeners[itemId].filter((current) => current != cb);
+          };
+        }, [cb, itemId]);
+      },
+      usePropsSelector: makePropsSelectorHook(this),
+      usePropsUpdate: (cb) => {
+        useEffect(() => {
+          this.propsListeners.push(cb);
+          return () => {
+            this.propsListeners = this.propsListeners.filter(
+              (current) => current !== cb
+            );
+          };
+        }, [cb]);
+      }
+    });
+  }
+  registerItem(itemId, initialState) {
+    if (!this.itemsState[itemId])
+      this.itemsState[itemId] = initialState;
+  }
+  toggleItem(itemId, isExpanded) {
+    this.itemsState[itemId].isExpanded = isExpanded;
+  }
+  unregisterItem(itemId) {
+    delete this.itemsState[itemId];
+    delete this.itemsStateListeners[itemId];
+  }
+  /**
+   * Permite actualizar parcialmente el estado de un item
+   */
+  udpateItem(itemId, updater) {
+    const newProps = updater instanceof Function ? updater(this.itemsState[itemId]) : updater;
+    Object.assign(this.itemsState[itemId], newProps);
+    this.itemsStateListeners[itemId].forEach(
+      (current) => current(this.itemsState[itemId])
+    );
+  }
+  updateProps(props) {
+    this.props = props;
+    this.propsListeners.forEach((current) => current(props));
+  }
+}
+
+export { AccordionHandler };
+//# sourceMappingURL=handler.js.map

package/dist/components/accordion/handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handler.js","sources":["../../../src/components/accordion/handler.tsx"],"sourcesContent":["import { TId } from '@apia/util';\nimport { ReactNode, useContext, useEffect, useMemo, useState } from 'react';\nimport { AccordionContext, AccordionItemContext } from './context';\nimport { TItemState, TItemStateListener, TPropsListener } from './types';\nimport { shallowEqual } from '@apia/store';\nimport { IAccordionProps } from './Accordion';\n\ntype TSelectionComparator<T> = (prev: T, next: T) => boolean;\n\ntype TItemUpdater =\n  | Partial<TItemState>\n  | ((currentProps: TItemState) => Partial<TItemState>);\n\nfunction makeItemStateSelectorHook(handler: AccordionHandler) {\n  return function useItemStateSelector<T>(\n    selector: (props: TItemState) => T,\n    comparator: TSelectionComparator<T> = shallowEqual,\n  ) {\n    const id = handler.hooks.useItemId();\n    const [state, setState] = useState<T>(selector(handler.itemsState[id]));\n\n    handler.hooks.useItemStateUpdate((props) => {\n      const newState = selector(props);\n      if (!comparator(state, newState)) {\n        setState(newState);\n      }\n    });\n\n    return state;\n  };\n}\n\nfunction makePropsSelectorHook(handler: AccordionHandler) {\n  return function usePropsSelector<T>(\n    selector: (props: IAccordionProps) => T,\n    comparator: TSelectionComparator<T> = shallowEqual,\n  ) {\n    const [state, setState] = useState<T>(selector(handler.props));\n\n    handler.hooks.usePropsUpdate((props) => {\n      const newState = selector(props);\n      if (!comparator(state, newState)) {\n        setState(newState);\n      }\n    });\n\n    return state;\n  };\n}\n\nexport class AccordionHandler {\n  itemsState: Record<TId, TItemState> = {};\n  itemsStateListeners: Record<TId, TItemStateListener[]> = {};\n\n  propsListeners: TPropsListener[] = [];\n\n  constructor(public id: string, public props: IAccordionProps) {}\n\n  registerItem(itemId: TId, initialState: TItemState) {\n    if (!this.itemsState[itemId]) this.itemsState[itemId] = initialState;\n  }\n\n  toggleItem(itemId: TId, isExpanded: boolean) {\n    this.itemsState[itemId].isExpanded = isExpanded;\n  }\n\n  unregisterItem(itemId: TId) {\n    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n    delete this.itemsState[itemId];\n    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n    delete this.itemsStateListeners[itemId];\n  }\n\n  /**\n   * Permite actualizar parcialmente el estado de un item\n   */\n  udpateItem(itemId: TId, updater: TItemUpdater) {\n    const newProps =\n      updater instanceof Function ? updater(this.itemsState[itemId]) : updater;\n\n    Object.assign(this.itemsState[itemId], newProps);\n    this.itemsStateListeners[itemId].forEach((current) =>\n      current(this.itemsState[itemId]),\n    );\n  }\n\n  updateProps(props: IAccordionProps) {\n    this.props = props;\n    this.propsListeners.forEach((current) => current(props));\n  }\n\n  hooks = {\n    useAccordionContextProvider: () => {\n      const Provider = useMemo(\n        () =>\n          ({ children }: { children: ReactNode }) =>\n            (\n              <AccordionContext.Provider value={this}>\n                {children}\n              </AccordionContext.Provider>\n            ),\n        [],\n      );\n      return Provider;\n    },\n    useItemContextProvider: (itemId: TId) => {\n      const Provider = useMemo(\n        () =>\n          ({ children }: { children: ReactNode }) =>\n            (\n              <AccordionItemContext.Provider value={itemId}>\n                {children}\n              </AccordionItemContext.Provider>\n            ),\n        [itemId],\n      );\n      return Provider;\n    },\n    useItemId: () => {\n      const id = useContext(AccordionItemContext);\n      if (id === null) throw new Error('There is no AccordionItemContext');\n      return id;\n    },\n    useItemStateSelector: makeItemStateSelectorHook(this),\n    useItemStateUpdate: (cb: TItemStateListener) => {\n      const itemId = this.hooks.useItemId();\n      useEffect(() => {\n        if (!this.itemsStateListeners[itemId])\n          this.itemsStateListeners[itemId] = [];\n        this.itemsStateListeners[itemId].push(cb);\n\n        return () => {\n          this.itemsStateListeners[itemId] = this.itemsStateListeners[\n            itemId\n          ].filter((current) => current != cb);\n        };\n      }, [cb, itemId]);\n    },\n    usePropsSelector: makePropsSelectorHook(this),\n    usePropsUpdate: (cb: TPropsListener) => {\n      useEffect(() => {\n        this.propsListeners.push(cb);\n        return () => {\n          this.propsListeners = this.propsListeners.filter(\n            (current) => current !== cb,\n          );\n        };\n      }, [cb]);\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,8 @@
+import '../forms/DateInput.js';
+import '../forms/NumberInput.js';
+import { AccordionHandler } from './handler.js';
+
+type TAccordionHandler = AccordionHandler;
+
+export type { TAccordionHandler };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

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

package/dist/components/accordion/types.d.ts

@@ -0,0 +1,11 @@
+import { IAccordionProps } from './Accordion.js';
+
+type TItemState = {
+    isChecked: boolean;
+    isExpanded: boolean;
+};
+type TItemStateListener = (state: TItemState) => unknown;
+type TPropsListener = (props: IAccordionProps) => unknown;
+
+export type { TItemState, TItemStateListener, TPropsListener };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/accordion/types.d.ts.map

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

package/dist/components/apia/ApiaDateFilter.js

@@ -0,0 +1,57 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useUpdateEffect } from 'ahooks';
+import * as React from 'react';
+import { DateInput } from '../forms/DateInput.js';
+import { getFieldErrorStyles } from '../forms/util/style.js';
+
+const NoMemoApiaDateFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
+  const [value, setValue] = React.useState(String(filter.currentValue));
+  const [lastDispatchedValue, setLastDispatchedValue] = React.useState(
+    String(filter.currentValue)
+  );
+  const handleClick = React.useCallback((ev) => {
+    ev.stopPropagation();
+  }, []);
+  useUpdateEffect(() => {
+    setValue(filter.currentValue);
+  }, [filter.currentValue]);
+  return /* @__PURE__ */ jsx(
+    DateInput,
+    {
+      value,
+      sx: getFieldErrorStyles(!filter.error),
+      "aria-label": filter.toolTip,
+      ref,
+      placeholder: filter.placeholder,
+      onChange: (ev) => {
+        if (onChange) {
+          const result = onChange(String(ev));
+          if (result === true) {
+            setValue(ev);
+            return true;
+          }
+          return result;
+        }
+        return false;
+      },
+      onClick: handleClick,
+      onBlur: () => {
+        if (value !== lastDispatchedValue && onBlur) {
+          setLastDispatchedValue(value);
+          setValue(value);
+          onBlur(value);
+        }
+      },
+      onKeyDown: (ev) => {
+        if (ev.key.toLowerCase() === "enter" && onPressEnter) {
+          setLastDispatchedValue(value);
+          onPressEnter(value);
+        }
+      }
+    }
+  );
+};
+const ApiaDateFilter = React.forwardRef(NoMemoApiaDateFilter);
+
+export { ApiaDateFilter };
+//# sourceMappingURL=ApiaDateFilter.js.map

package/dist/components/apia/ApiaDateFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiaDateFilter.js","sources":["../../../src/components/apia/ApiaDateFilter.tsx"],"sourcesContent":["import { useUpdateEffect } from 'ahooks';\nimport * as React from 'react';\nimport { IApiaFilter } from './ApiaFilter';\nimport { DateInput, getFieldErrorStyles } from '../forms';\n\nconst NoMemoApiaDateFilter = (\n  { filter, onChange, onBlur, onPressEnter }: IApiaFilter,\n  ref: React.Ref<HTMLInputElement | HTMLSelectElement>,\n) => {\n  const [value, setValue] = React.useState<string>(String(filter.currentValue));\n  const [lastDispatchedValue, setLastDispatchedValue] = React.useState<string>(\n    String(filter.currentValue),\n  );\n\n  const handleClick = React.useCallback((ev: React.MouseEvent) => {\n    ev.stopPropagation();\n  }, []);\n\n  useUpdateEffect(() => {\n    setValue(filter.currentValue as string);\n  }, [filter.currentValue]);\n\n  return (\n    <DateInput\n      value={value}\n      sx={getFieldErrorStyles(!filter.error)}\n      aria-label={filter.toolTip}\n      ref={ref as React.Ref<HTMLInputElement>}\n      placeholder={filter.placeholder}\n      onChange={(ev) => {\n        if (onChange) {\n          const result = onChange(String(ev));\n          if (result === true) {\n            setValue(ev);\n            return true;\n          }\n          return result as string | false | void;\n        }\n        return false;\n      }}\n      onClick={handleClick}\n      onBlur={() => {\n        if (value !== lastDispatchedValue && onBlur) {\n          setLastDispatchedValue(value);\n          setValue(value);\n          onBlur(value);\n        }\n      }}\n      onKeyDown={(ev) => {\n        if (ev.key.toLowerCase() === 'enter' && onPressEnter) {\n          setLastDispatchedValue(value);\n          onPressEnter(value);\n        }\n      }}\n    />\n  );\n};\n\nexport const ApiaDateFilter = React.forwardRef(NoMemoApiaDateFilter);\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,oBAAA,GAAuB,CAC3B,EAAE,MAAA,EAAQ,UAAU,MAAQ,EAAA,YAAA,IAC5B,GACG,KAAA;AACH,EAAM,MAAA,CAAC,OAAO,QAAQ,CAAA,GAAI,MAAM,QAAiB,CAAA,MAAA,CAAO,MAAO,CAAA,YAAY,CAAC,CAAA,CAAA;AAC5E,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IAC1D,MAAA,CAAO,OAAO,YAAY,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,WAAY,CAAA,CAAC,EAAyB,KAAA;AAC9D,IAAA,EAAA,CAAG,eAAgB,EAAA,CAAA;AAAA,GACrB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,QAAA,CAAS,OAAO,YAAsB,CAAA,CAAA;AAAA,GACrC,EAAA,CAAC,MAAO,CAAA,YAAY,CAAC,CAAA,CAAA;AAExB,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,EAAI,EAAA,mBAAA,CAAoB,CAAC,MAAA,CAAO,KAAK,CAAA;AAAA,MACrC,cAAY,MAAO,CAAA,OAAA;AAAA,MACnB,GAAA;AAAA,MACA,aAAa,MAAO,CAAA,WAAA;AAAA,MACpB,QAAA,EAAU,CAAC,EAAO,KAAA;AAChB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,MAAM,MAAS,GAAA,QAAA,CAAS,MAAO,CAAA,EAAE,CAAC,CAAA,CAAA;AAClC,UAAA,IAAI,WAAW,IAAM,EAAA;AACnB,YAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AACX,YAAO,OAAA,IAAA,CAAA;AAAA,WACT;AACA,UAAO,OAAA,MAAA,CAAA;AAAA,SACT;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,QAAQ,MAAM;AACZ,QAAI,IAAA,KAAA,KAAU,uBAAuB,MAAQ,EAAA;AAC3C,UAAA,sBAAA,CAAuB,KAAK,CAAA,CAAA;AAC5B,UAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AACd,UAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AAAA,SACd;AAAA,OACF;AAAA,MACA,SAAA,EAAW,CAAC,EAAO,KAAA;AACjB,QAAA,IAAI,EAAG,CAAA,GAAA,CAAI,WAAY,EAAA,KAAM,WAAW,YAAc,EAAA;AACpD,UAAA,sBAAA,CAAuB,KAAK,CAAA,CAAA;AAC5B,UAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,SACpB;AAAA,OACF;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,cAAA,GAAiB,KAAM,CAAA,UAAA,CAAW,oBAAoB;;;;"}

package/dist/components/apia/ApiaFilter.d.ts

@@ -0,0 +1,13 @@
+import { TApiaFilter, TApiaFilterValue } from '@apia/util';
+import * as React from 'react';
+
+interface IApiaFilter {
+    filter: TApiaFilter;
+    onBlur?: (ev: TApiaFilterValue) => void;
+    onChange?: (ev: TApiaFilterValue) => void | boolean | string | Promise<boolean | string>;
+    onPressEnter?: (ev: TApiaFilterValue) => void;
+}
+declare const ApiaFilter: React.MemoExoticComponent<React.ForwardRefExoticComponent<IApiaFilter & React.RefAttributes<HTMLInputElement | HTMLSelectElement>>>;
+
+export { ApiaFilter, type IApiaFilter };
+//# sourceMappingURL=ApiaFilter.d.ts.map

package/dist/components/apia/ApiaFilter.d.ts.map

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

package/dist/components/apia/ApiaFilter.js

@@ -0,0 +1,128 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import * as React from 'react';
+import { getVariant, Select, Input } from '@apia/theme';
+import { ApiaDateFilter } from './ApiaDateFilter.js';
+import { NumberInput } from '../forms/NumberInput.js';
+import { getFieldErrorStyles } from '../forms/util/style.js';
+
+const NoMemoApiaFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
+  const [value, setValue] = React.useState(
+    filter.currentValue ?? ""
+  );
+  const handleClick = React.useCallback((ev) => {
+    ev.stopPropagation();
+  }, []);
+  const [lastEmittedValue, setLastEmittedValue] = React.useState(filter.currentValue);
+  const filterCurrentValue = filter?.currentValue;
+  React.useEffect(() => {
+    if (filterCurrentValue === "") {
+      setValue(String(filterCurrentValue));
+      setLastEmittedValue(String(filterCurrentValue));
+    }
+  }, [filter?.deleteFiltersTimestamp]);
+  if (filter) {
+    const handleChange = (ev) => {
+      if (onChange && onChange(String(ev.target.value)) !== false || !onChange)
+        setValue(String(ev.target.value));
+    };
+    const handleNumberChange = (ev) => {
+      if (onChange && onChange(String(ev.value)) !== false || !onChange)
+        setValue(String(ev.value));
+    };
+    const handleBlur = (ev) => {
+      if (onBlur && lastEmittedValue !== value) {
+        setLastEmittedValue(value);
+        onBlur(ev.target.value);
+      }
+    };
+    const sortedOptions = filter.sortCombo ? [...filter.options ?? []].sort((a, b) => a.label > b.label ? 1 : -1) : filter.options;
+    const options = sortedOptions?.map((option) => {
+      return /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value ?? option.label ?? " ");
+    });
+    if (filter.type === "date" || filter.type === "D")
+      return /* @__PURE__ */ jsx(
+        ApiaDateFilter,
+        {
+          filter,
+          onChange,
+          onBlur,
+          onPressEnter,
+          ref
+        }
+      );
+    if (filter.type === "apiaNumber") {
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          "aria-readonly": filter.readonly,
+          readOnly: filter.readonly,
+          value,
+          placeholder: filter.placeholder,
+          onChange: handleNumberChange,
+          onKeyDown: (ev) => {
+            if (ev.key.toLowerCase() === "enter") {
+              handleBlur(ev);
+              if (onPressEnter)
+                onPressEnter(ev.target.value);
+            }
+          },
+          onClick: handleClick,
+          ...getVariant("input"),
+          className: `filter ${filter.error ? "requiredFilter__Border" : ""}`,
+          title: filter.title ?? filter.toolTip ?? String(filter.id),
+          ref,
+          "aria-label": filter.title ?? filter.toolTip ?? String(filter.id),
+          name: filter.id
+        }
+      );
+    }
+    return filter.options ? /* @__PURE__ */ jsx(
+      Select,
+      {
+        "aria-readonly": filter.readonly,
+        disabled: filter.readonly,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        value,
+        className: `"filter" ${filter.error ? "requiredFilter__Border" : ""}`,
+        title: filter.title ?? filter.toolTip ?? String(filter.id),
+        ref,
+        "aria-label": filter.title ?? filter.toolTip ?? String(filter.id),
+        onClick: handleClick,
+        sx: getFieldErrorStyles(!filter.error),
+        name: filter.id,
+        children: options
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-readonly": filter.readonly,
+        readOnly: filter.readonly,
+        value,
+        type: (filter.type === "N" ? "number" : filter.type) ?? "text",
+        placeholder: filter.placeholder,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onKeyDown: (ev) => {
+          if (ev.key.toLowerCase() === "enter") {
+            handleBlur(ev);
+            if (onPressEnter)
+              onPressEnter(ev.target.value);
+          }
+        },
+        onClick: handleClick,
+        ...getVariant("input"),
+        className: `filter ${filter.error ? "requiredFilter__Border" : ""}`,
+        title: filter.title ?? filter.toolTip ?? String(filter.id),
+        ref,
+        "aria-label": filter.title ?? filter.toolTip ?? String(filter.id),
+        name: filter.id
+      }
+    );
+  }
+  return null;
+};
+const ApiaFilter = React.memo(React.forwardRef(NoMemoApiaFilter));
+
+export { ApiaFilter };
+//# sourceMappingURL=ApiaFilter.js.map

package/dist/components/apia/ApiaFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiaFilter.js","sources":["../../../src/components/apia/ApiaFilter.tsx"],"sourcesContent":["import { TApiaFilter, TApiaFilterValue } from '@apia/util';\nimport { ForwardedRef } from 'react';\nimport * as React from 'react';\nimport { Input, Select } from '@apia/theme';\nimport { getVariant } from '@apia/theme';\nimport {\n  TNumberInputChangeEvent,\n  NumberInput,\n  getFieldErrorStyles,\n} from '../forms';\nimport { ApiaDateFilter } from './ApiaDateFilter';\n\nexport interface IApiaFilter {\n  filter: TApiaFilter;\n  onBlur?: (ev: TApiaFilterValue) => void;\n  onChange?: (\n    ev: TApiaFilterValue,\n  ) => void | boolean | string | Promise<boolean | string>;\n  onPressEnter?: (ev: TApiaFilterValue) => void;\n}\n\nconst NoMemoApiaFilter = (\n  { filter, onChange, onBlur, onPressEnter }: IApiaFilter,\n  ref: React.Ref<HTMLInputElement | HTMLSelectElement>,\n) => {\n  const [value, setValue] = React.useState<TApiaFilterValue>(\n    filter.currentValue ?? '',\n  );\n\n  const handleClick = React.useCallback((ev: React.MouseEvent) => {\n    ev.stopPropagation();\n  }, []);\n\n  const [lastEmittedValue, setLastEmittedValue] =\n    React.useState<TApiaFilterValue>(filter.currentValue);\n\n  const filterCurrentValue = filter?.currentValue;\n  React.useEffect(() => {\n    if (filterCurrentValue === '') {\n      setValue(String(filterCurrentValue));\n      setLastEmittedValue(String(filterCurrentValue));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filter?.deleteFiltersTimestamp]);\n\n  if (filter) {\n    const handleChange = (\n      ev: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,\n    ) => {\n      if (\n        (onChange && onChange(String(ev.target.value)) !== false) ||\n        !onChange\n      )\n        setValue(String(ev.target.value));\n    };\n    const handleNumberChange = (ev: TNumberInputChangeEvent) => {\n      if ((onChange && onChange(String(ev.value)) !== false) || !onChange)\n        setValue(String(ev.value));\n    };\n    const handleBlur = (\n      ev:\n        | React.ChangeEvent<HTMLInputElement | HTMLSelectElement>\n        | React.KeyboardEvent,\n    ) => {\n      if (onBlur && lastEmittedValue !== value) {\n        setLastEmittedValue(value);\n        onBlur((ev.target as HTMLInputElement).value);\n      }\n    };\n\n    const sortedOptions = filter.sortCombo\n      ? [...(filter.options ?? [])].sort((a, b) => (a.label > b.label ? 1 : -1))\n      : filter.options;\n    const options = sortedOptions?.map((option) => {\n      return (\n        <option value={option.value} key={option.value ?? option.label ?? ' '}>\n          {option.label}\n        </option>\n      );\n    });\n\n    if (filter.type === 'date' || filter.type === 'D')\n      return (\n        <ApiaDateFilter\n          filter={filter}\n          onChange={onChange}\n          onBlur={onBlur}\n          onPressEnter={onPressEnter}\n          ref={ref}\n        />\n      );\n\n    if (filter.type === 'apiaNumber') {\n      return (\n        <NumberInput\n          aria-readonly={filter.readonly}\n          readOnly={filter.readonly}\n          value={value as string}\n          placeholder={filter.placeholder}\n          onChange={handleNumberChange}\n          onKeyDown={(ev) => {\n            if (ev.key.toLowerCase() === 'enter') {\n              handleBlur(ev);\n              if (onPressEnter)\n                onPressEnter((ev.target as HTMLInputElement).value);\n            }\n          }}\n          onClick={handleClick}\n          {...getVariant('input')}\n          className={`filter ${filter.error ? 'requiredFilter__Border' : ''}`}\n          title={filter.title ?? filter.toolTip ?? String(filter.id)}\n          ref={ref as ForwardedRef<HTMLInputElement>}\n          aria-label={filter.title ?? filter.toolTip ?? String(filter.id)}\n          name={filter.id as string}\n        />\n      );\n    }\n\n    return filter.options ? (\n      <Select\n        aria-readonly={filter.readonly}\n        disabled={filter.readonly}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        value={value}\n        className={`\"filter\" ${filter.error ? 'requiredFilter__Border' : ''}`}\n        title={filter.title ?? filter.toolTip ?? String(filter.id)}\n        ref={ref as ForwardedRef<HTMLSelectElement>}\n        aria-label={filter.title ?? filter.toolTip ?? String(filter.id)}\n        onClick={handleClick}\n        sx={getFieldErrorStyles(!filter.error)}\n        name={filter.id as string}\n      >\n        {options}\n      </Select>\n    ) : (\n      <Input\n        aria-readonly={filter.readonly}\n        readOnly={filter.readonly}\n        value={value}\n        type={(filter.type === 'N' ? 'number' : filter.type) ?? 'text'}\n        placeholder={filter.placeholder}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={(ev) => {\n          if (ev.key.toLowerCase() === 'enter') {\n            handleBlur(ev);\n            if (onPressEnter)\n              onPressEnter((ev.target as HTMLInputElement).value);\n          }\n        }}\n        onClick={handleClick}\n        {...getVariant('input')}\n        className={`filter ${filter.error ? 'requiredFilter__Border' : ''}`}\n        title={filter.title ?? filter.toolTip ?? String(filter.id)}\n        ref={ref as ForwardedRef<HTMLInputElement>}\n        aria-label={filter.title ?? filter.toolTip ?? String(filter.id)}\n        name={filter.id as string}\n      />\n    );\n  }\n  return null;\n};\n\nexport const ApiaFilter = React.memo(React.forwardRef(NoMemoApiaFilter));\n"],"names":[],"mappings":"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"}

package/dist/components/buttons/useOtherTagButton.d.ts

@@ -0,0 +1,28 @@
+import React__default from 'react';
+
+/**
+ * Este hook está pensado para crear un botón utilizando un tag cualquiera.
+ *
+ * @example
+ *
+ * const buttonProps = useOtherTagButton(React.useMemo(()=>({
+ *   onClick(ev) { console.log(ev.target) },
+ *   onKeyDown(ev) { console.log(ev.code) }
+ * }),[])
+ *
+ * return <div {...buttonProps}>Esto es un botón</div>
+ */
+declare function useOtherTagButton(props?: Partial<{
+    className?: string;
+    onClick: React__default.MouseEventHandler;
+    onKeyDown: React__default.KeyboardEventHandler;
+}>): {
+    className: string;
+    onClick: (ev: React__default.MouseEvent) => void;
+    onKeyDown: (ev: React__default.KeyboardEvent) => void;
+    role: string;
+    tabIndex: number;
+};
+
+export { useOtherTagButton };
+//# sourceMappingURL=useOtherTagButton.d.ts.map

package/dist/components/buttons/useOtherTagButton.d.ts.map

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