@apia/components 2.0.9 → 2.0.11

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

@@ -0,0 +1,22 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { Icon } from '@apia/icons';
+
+const Checkbox = (props) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "accordion__item__button__check",
+      onClick: (ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (!props.disabled)
+          props.onChange?.(!props.checked);
+      },
+      children: props.checked && /* @__PURE__ */ jsx(Icon, { title: "", name: "Check" })
+    }
+  );
+};
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/accordion/defaultElements/Checkbox.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { Icon } from '@apia/icons';\r\n\r\nexport interface ICheckbox {\r\n  checked: boolean;\r\n  disabled?: boolean;\r\n  onChange: (checked: boolean) => unknown;\r\n}\r\n\r\nexport const Checkbox = (props: ICheckbox) => {\r\n  return (\r\n    <Box\r\n      className=\"accordion__item__button__check\"\r\n      onClick={(ev) => {\r\n        ev.stopPropagation();\r\n        ev.preventDefault();\r\n        if (!props.disabled) props.onChange?.(!props.checked);\r\n      }}\r\n    >\r\n      {props.checked && <Icon title=\"\" name=\"Check\" />}\r\n    </Box>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;AASa,MAAA,QAAA,GAAW,CAAC,KAAqB,KAAA;AAC5C,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,gCAAA;AAAA,MACV,OAAA,EAAS,CAAC,EAAO,KAAA;AACf,QAAA,EAAA,CAAG,eAAgB,EAAA,CAAA;AACnB,QAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,QAAA,IAAI,CAAC,KAAM,CAAA,QAAA;AAAU,UAAM,KAAA,CAAA,QAAA,GAAW,CAAC,KAAA,CAAM,OAAO,CAAA,CAAA;AAAA,OACtD;AAAA,MAEC,gBAAM,OAAW,oBAAA,GAAA,CAAC,QAAK,KAAM,EAAA,EAAA,EAAG,MAAK,OAAQ,EAAA,CAAA;AAAA,KAAA;AAAA,GAChD,CAAA;AAEJ;;;;"}

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,77 @@
+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.toggleItem(id);
+    },
+    [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';\r\nimport { Icon, type TIconName } from '@apia/icons';\r\nimport { useAccordionContext } from '../context';\r\nimport { ISimpleButton, SimpleButton } from '../../forms';\r\nimport { Checkbox } from './Checkbox';\r\nimport { useIsChecked } from './useIsChecked';\r\nimport { KeyboardEvent, MouseEvent, ReactNode, useCallback } from 'react';\r\nimport { AutoEllipsis } from '../../responsive';\r\n\r\nexport interface IAccordionItemButton {\r\n  ariaLabel: string;\r\n  /**\r\n   * Si checked !== undefined => se mostrará un checkbox.\r\n   */\r\n  checked?: boolean;\r\n  /**\r\n   * Solamente se utiliza en conjunto con el checkbox y permite evitar que el\r\n   * usuario pueda marcar o desmarcar el checkbox.\r\n   */\r\n  className?: string;\r\n  disableSelection?: boolean;\r\n  domButtonProps?: ISimpleButton;\r\n  label: string;\r\n  /**\r\n   * Evento que se dispara cuando el usuario hace click en el checkbox o\r\n   * presiona espacio sobre el botón del acordeón.\r\n   */\r\n  onChange?: (checked: boolean) => unknown;\r\n  onClick?: (ev: MouseEvent) => unknown;\r\n  onUserPressEnter?: (ev: KeyboardEvent) => unknown;\r\n  rightButtons?: ReactNode;\r\n  rightIcons?: TIconName[] | TIconName;\r\n  tabIndex?: number;\r\n  /**\r\n   * Si no se pasa title se usará ariaLabel.\r\n   */\r\n  title?: string;\r\n}\r\n\r\nexport const DefaultAccordionItemButton = (props: IAccordionItemButton) => {\r\n  const handler = useAccordionContext();\r\n  const { isExpanded } = handler.hooks.useItemStateSelector((props) => props);\r\n  const id = handler.hooks.useItemId();\r\n  const [isChecked, setIsChecked] = useIsChecked(props);\r\n  const handleClick = useCallback(\r\n    (ev: MouseEvent) => {\r\n      props.onClick?.(ev);\r\n      if (!ev.isDefaultPrevented()) handler.toggleItem(id);\r\n    },\r\n    [handler, id, props],\r\n  );\r\n  const handleKeyDown = useCallback(\r\n    (ev: KeyboardEvent) => {\r\n      if (ev.code === 'Enter') {\r\n        props.onUserPressEnter?.(ev);\r\n        if (!ev.isDefaultPrevented() && props.rightButtons)\r\n          handler.udpateItem(id, (current) => ({\r\n            isExpanded: !current.isExpanded,\r\n          }));\r\n      }\r\n    },\r\n    [handler, id, props],\r\n  );\r\n\r\n  return (\r\n    <SimpleButton\r\n      {...props.domButtonProps}\r\n      className={`accordion__item__button ${props.className ?? ''} ${\r\n        props.domButtonProps?.className ?? ''\r\n      }`}\r\n      onClick={handleClick}\r\n      onKeyDown={handleKeyDown}\r\n      aria-expanded={isExpanded}\r\n      aria-controls={`accordion__${handler.id}__${id}`}\r\n      title={props.title}\r\n      aria-label={props.ariaLabel}\r\n      tabIndex={props.tabIndex}\r\n    >\r\n      <Box className=\"accordion__item__button__leftGroup\">\r\n        {props.checked !== undefined && (\r\n          <Checkbox\r\n            checked={isChecked}\r\n            disabled={props.disableSelection}\r\n            onChange={setIsChecked}\r\n          />\r\n        )}\r\n        <Box as=\"h3\" className=\"accordion__item__button__label\">\r\n          <AutoEllipsis overrideStyles={() => ({ textAlign: 'left' })}>\r\n            {props.label ?? props.title ?? props.ariaLabel}\r\n          </AutoEllipsis>\r\n        </Box>\r\n      </Box>\r\n      <Box className=\"accordion__item__button__rightGroup\">\r\n        {props.rightButtons}\r\n        <Icon\r\n          name={isExpanded ? 'ArrowUpThin' : 'ArrowDownThin'}\r\n          title={props.title ?? props.ariaLabel}\r\n          size={23}\r\n        />\r\n      </Box>\r\n    </SimpleButton>\r\n  );\r\n};\r\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';\r\nimport { useAccordionContext } from '../context';\r\nimport { IAccordionItemButton } from './DefaultAccordionItemButton';\r\n\r\nexport function useIsChecked(\r\n  props: IAccordionItemButton,\r\n): [boolean, (isChecked: boolean) => void] {\r\n  const handler = useAccordionContext();\r\n  const isChecked = handler.hooks.useItemStateSelector(\r\n    (current) => current.isChecked,\r\n  );\r\n  const id = handler.hooks.useItemId();\r\n\r\n  const previousPropsChecked = useRef(props.checked);\r\n  if (\r\n    previousPropsChecked.current !== props.checked &&\r\n    props.checked !== undefined\r\n  ) {\r\n    previousPropsChecked.current = props.checked;\r\n    handler.udpateItem(id, { isChecked: props.checked });\r\n  }\r\n\r\n  return [\r\n    isChecked,\r\n    (isChecked) => {\r\n      handler.udpateItem(id, { isChecked });\r\n      props.onChange?.(isChecked);\r\n    },\r\n  ];\r\n}\r\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, expanded?: 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,126 @@
+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, expanded) {
+    const isExpanded = expanded ?? !this.itemsState[itemId].isExpanded;
+    if (this.props.singleExpand && isExpanded) {
+      Object.keys(this.itemsState).forEach((current) => {
+        if (current !== itemId) {
+          this.udpateItem(current, { isExpanded: false });
+        }
+      });
+    }
+    this.udpateItem(itemId, { 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 = { ...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';\r\nimport { ReactNode, useContext, useEffect, useMemo, useState } from 'react';\r\nimport { AccordionContext, AccordionItemContext } from './context';\r\nimport { TItemState, TItemStateListener, TPropsListener } from './types';\r\nimport { shallowEqual } from '@apia/store';\r\nimport { IAccordionProps } from './Accordion';\r\n\r\ntype TSelectionComparator<T> = (prev: T, next: T) => boolean;\r\n\r\ntype TItemUpdater =\r\n  | Partial<TItemState>\r\n  | ((currentProps: TItemState) => Partial<TItemState>);\r\n\r\nfunction makeItemStateSelectorHook(handler: AccordionHandler) {\r\n  return function useItemStateSelector<T>(\r\n    selector: (props: TItemState) => T,\r\n    comparator: TSelectionComparator<T> = shallowEqual,\r\n  ) {\r\n    const id = handler.hooks.useItemId();\r\n    const [state, setState] = useState<T>(selector(handler.itemsState[id]));\r\n\r\n    handler.hooks.useItemStateUpdate((props) => {\r\n      const newState = selector(props);\r\n      if (!comparator(state, newState)) {\r\n        setState(newState);\r\n      }\r\n    });\r\n\r\n    return state;\r\n  };\r\n}\r\n\r\nfunction makePropsSelectorHook(handler: AccordionHandler) {\r\n  return function usePropsSelector<T>(\r\n    selector: (props: IAccordionProps) => T,\r\n    comparator: TSelectionComparator<T> = shallowEqual,\r\n  ) {\r\n    const [state, setState] = useState<T>(selector(handler.props));\r\n\r\n    handler.hooks.usePropsUpdate((props) => {\r\n      const newState = selector(props);\r\n      if (!comparator(state, newState)) {\r\n        setState(newState);\r\n      }\r\n    });\r\n\r\n    return state;\r\n  };\r\n}\r\n\r\nexport class AccordionHandler {\r\n  itemsState: Record<TId, TItemState> = {};\r\n  itemsStateListeners: Record<TId, TItemStateListener[]> = {};\r\n\r\n  propsListeners: TPropsListener[] = [];\r\n\r\n  constructor(\r\n    public id: string,\r\n    public props: IAccordionProps,\r\n  ) {}\r\n\r\n  registerItem(itemId: TId, initialState: TItemState) {\r\n    if (!this.itemsState[itemId]) this.itemsState[itemId] = initialState;\r\n  }\r\n\r\n  toggleItem(itemId: TId, expanded?: boolean) {\r\n    const isExpanded = expanded ?? !this.itemsState[itemId].isExpanded;\r\n    if (this.props.singleExpand && isExpanded) {\r\n      Object.keys(this.itemsState).forEach((current) => {\r\n        if (current !== itemId) {\r\n          this.udpateItem(current, { isExpanded: false });\r\n        }\r\n      });\r\n    }\r\n    this.udpateItem(itemId, { isExpanded });\r\n  }\r\n\r\n  unregisterItem(itemId: TId) {\r\n    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\r\n    delete this.itemsState[itemId];\r\n    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\r\n    delete this.itemsStateListeners[itemId];\r\n  }\r\n\r\n  /**\r\n   * Permite actualizar parcialmente el estado de un item\r\n   */\r\n  udpateItem(itemId: TId, updater: TItemUpdater) {\r\n    const newProps =\r\n      updater instanceof Function ? updater(this.itemsState[itemId]) : updater;\r\n\r\n    Object.assign(this.itemsState[itemId], newProps);\r\n    this.itemsStateListeners[itemId].forEach((current) =>\r\n      current(this.itemsState[itemId]),\r\n    );\r\n  }\r\n\r\n  updateProps(props: IAccordionProps) {\r\n    this.props = { ...this.props, ...props };\r\n    this.propsListeners.forEach((current) => current(props));\r\n  }\r\n\r\n  hooks = {\r\n    useAccordionContextProvider: () => {\r\n      const Provider = useMemo(\r\n        () =>\r\n          ({ children }: { children: ReactNode }) => (\r\n            <AccordionContext.Provider value={this}>\r\n              {children}\r\n            </AccordionContext.Provider>\r\n          ),\r\n        [],\r\n      );\r\n      return Provider;\r\n    },\r\n    useItemContextProvider: (itemId: TId) => {\r\n      const Provider = useMemo(\r\n        () =>\r\n          ({ children }: { children: ReactNode }) => (\r\n            <AccordionItemContext.Provider value={itemId}>\r\n              {children}\r\n            </AccordionItemContext.Provider>\r\n          ),\r\n        [itemId],\r\n      );\r\n      return Provider;\r\n    },\r\n    useItemId: () => {\r\n      const id = useContext(AccordionItemContext);\r\n      if (id === null) throw new Error('There is no AccordionItemContext');\r\n      return id;\r\n    },\r\n    useItemStateSelector: makeItemStateSelectorHook(this),\r\n    useItemStateUpdate: (cb: TItemStateListener) => {\r\n      const itemId = this.hooks.useItemId();\r\n      useEffect(() => {\r\n        if (!this.itemsStateListeners[itemId])\r\n          this.itemsStateListeners[itemId] = [];\r\n        this.itemsStateListeners[itemId].push(cb);\r\n\r\n        return () => {\r\n          this.itemsStateListeners[itemId] = this.itemsStateListeners[\r\n            itemId\r\n          ].filter((current) => current != cb);\r\n        };\r\n      }, [cb, itemId]);\r\n    },\r\n    usePropsSelector: makePropsSelectorHook(this),\r\n    usePropsUpdate: (cb: TPropsListener) => {\r\n      useEffect(() => {\r\n        this.propsListeners.push(cb);\r\n        return () => {\r\n          this.propsListeners = this.propsListeners.filter(\r\n            (current) => current !== cb,\r\n          );\r\n        };\r\n      }, [cb]);\r\n    },\r\n  };\r\n}\r\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';\r\nimport * as React from 'react';\r\nimport { IApiaFilter } from './ApiaFilter';\r\nimport { DateInput, getFieldErrorStyles } from '../forms';\r\n\r\nconst NoMemoApiaDateFilter = (\r\n  { filter, onChange, onBlur, onPressEnter }: IApiaFilter,\r\n  ref: React.Ref<HTMLInputElement | HTMLSelectElement>,\r\n) => {\r\n  const [value, setValue] = React.useState<string>(String(filter.currentValue));\r\n  const [lastDispatchedValue, setLastDispatchedValue] = React.useState<string>(\r\n    String(filter.currentValue),\r\n  );\r\n\r\n  const handleClick = React.useCallback((ev: React.MouseEvent) => {\r\n    ev.stopPropagation();\r\n  }, []);\r\n\r\n  useUpdateEffect(() => {\r\n    setValue(filter.currentValue as string);\r\n  }, [filter.currentValue]);\r\n\r\n  return (\r\n    <DateInput\r\n      value={value}\r\n      sx={getFieldErrorStyles(!filter.error)}\r\n      aria-label={filter.toolTip}\r\n      ref={ref as React.Ref<HTMLInputElement>}\r\n      placeholder={filter.placeholder}\r\n      onChange={(ev) => {\r\n        if (onChange) {\r\n          const result = onChange(String(ev));\r\n          if (result === true) {\r\n            setValue(ev);\r\n            return true;\r\n          }\r\n          return result as string | false | void;\r\n        }\r\n        return false;\r\n      }}\r\n      onClick={handleClick}\r\n      onBlur={() => {\r\n        if (value !== lastDispatchedValue && onBlur) {\r\n          setLastDispatchedValue(value);\r\n          setValue(value);\r\n          onBlur(value);\r\n        }\r\n      }}\r\n      onKeyDown={(ev) => {\r\n        if (ev.key.toLowerCase() === 'enter' && onPressEnter) {\r\n          setLastDispatchedValue(value);\r\n          onPressEnter(value);\r\n        }\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nexport const ApiaDateFilter = React.forwardRef(NoMemoApiaDateFilter);\r\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