@apia/components 2.0.9 → 2.0.10

package/dist/components/IconsList/store/operations.js

@@ -0,0 +1,138 @@
+import { noNaN } from '@apia/util';
+import { makeCellKey } from './keysMaker.js';
+
+function assignSelectedIndexId(state) {
+  const element = document.querySelector(
+    `#${state.storeId} [aria-rowindex="${state.focusedRow}"] [aria-colindex="${state.focusedColumn}"]`
+  );
+  if (element instanceof HTMLElement) {
+    state.focusedId = element.dataset.id;
+  }
+}
+const arrowDown = (state, _, keys) => {
+  if (!document.querySelector(
+    `#${state.storeId} [aria-rowindex="${state.focusedRow + 1}"] [aria-colindex="${state.focusedColumn}"]`
+  ))
+    return;
+  keys.set([
+    makeCellKey({
+      columnIndex: state.focusedColumn,
+      rowIndex: state.focusedRow
+    }),
+    makeCellKey({
+      columnIndex: state.focusedColumn,
+      rowIndex: state.focusedRow + 1
+    }),
+    "grid"
+  ]);
+  state.focusedRow++;
+  assignSelectedIndexId(state);
+};
+const arrowUp = (state, _, keys) => {
+  if (state.focusedRow > 1) {
+    keys.set([
+      makeCellKey({
+        columnIndex: state.focusedColumn,
+        rowIndex: state.focusedRow
+      }),
+      makeCellKey({
+        columnIndex: state.focusedColumn,
+        rowIndex: state.focusedRow - 1
+      }),
+      "grid"
+    ]);
+    state.focusedRow--;
+    assignSelectedIndexId(state);
+  }
+};
+const arrowLeft = (state, _, keys) => {
+  if (state.focusedColumn > 1) {
+    keys.set([
+      makeCellKey({
+        columnIndex: state.focusedColumn,
+        rowIndex: state.focusedRow
+      }),
+      makeCellKey({
+        columnIndex: state.focusedColumn - 1,
+        rowIndex: state.focusedRow
+      }),
+      "grid"
+    ]);
+    state.focusedColumn--;
+    assignSelectedIndexId(state);
+  }
+};
+const arrowRight = (state, _, keys) => {
+  if (!document.querySelector(
+    `#${state.storeId} [aria-rowindex="${state.focusedRow}"] [aria-colindex="${state.focusedColumn + 1}"]`
+  )) {
+    return;
+  }
+  keys.set([
+    makeCellKey({
+      columnIndex: state.focusedColumn,
+      rowIndex: state.focusedRow
+    }),
+    makeCellKey({
+      columnIndex: state.focusedColumn + 1,
+      rowIndex: state.focusedRow
+    }),
+    "grid"
+  ]);
+  state.focusedColumn++;
+  assignSelectedIndexId(state);
+};
+const setFocused = (state, payload, keys) => {
+  if (!document.querySelector(
+    `#${state.storeId} [aria-rowindex="${payload.rowIndex}"] [aria-colindex="${payload.colIndex}"]`
+  ))
+    return;
+  keys.set([
+    makeCellKey({ columnIndex: payload.colIndex, rowIndex: payload.rowIndex }),
+    makeCellKey({
+      columnIndex: state.focusedColumn,
+      rowIndex: state.focusedRow
+    }),
+    "grid"
+  ]);
+  state.focusedColumn = payload.colIndex;
+  state.focusedRow = payload.rowIndex;
+  assignSelectedIndexId(state);
+};
+const recalculateIndexByResize = (state, _, keys) => {
+  const element = document.querySelector(
+    `#${state.storeId} [data-id="${state.focusedId}"]`
+  );
+  if (element instanceof HTMLElement) {
+    const rowIndex = noNaN(
+      element.closest("[aria-rowindex]")?.ariaRowIndex,
+      -1
+    );
+    const colIndex = noNaN(
+      element.closest("[aria-colindex]")?.ariaColIndex,
+      -1
+    );
+    if (rowIndex !== -1 && colIndex !== -1) {
+      keys.set([
+        makeCellKey({
+          columnIndex: state.focusedColumn,
+          rowIndex: state.focusedRow
+        }),
+        makeCellKey({ columnIndex: colIndex, rowIndex })
+      ]);
+      state.focusedColumn = colIndex;
+      state.focusedRow = rowIndex;
+    }
+  }
+};
+const operations = {
+  arrowDown,
+  arrowLeft,
+  arrowRight,
+  arrowUp,
+  setFocused,
+  recalculateIndexByResize
+};
+
+export { operations };
+//# sourceMappingURL=operations.js.map

package/dist/components/IconsList/store/operations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"operations.js","sources":["../../../../src/components/IconsList/store/operations.ts"],"sourcesContent":["import { noNaN } from '@apia/util';\r\nimport { makeCellKey } from './keysMaker';\r\nimport { TIconsListOperation, TState } from './types';\r\n\r\nfunction assignSelectedIndexId(state: TState) {\r\n  const element = document.querySelector(\r\n    `#${state.storeId} [aria-rowindex=\"${state.focusedRow}\"] [aria-colindex=\"${state.focusedColumn}\"]`,\r\n  );\r\n\r\n  if (element instanceof HTMLElement) {\r\n    state.focusedId = element.dataset.id as string;\r\n  }\r\n}\r\n\r\nconst arrowDown: TIconsListOperation<void> = (state: TState, _: void, keys) => {\r\n  if (\r\n    !document.querySelector(\r\n      `#${state.storeId} [aria-rowindex=\"${\r\n        state.focusedRow + 1\r\n      }\"] [aria-colindex=\"${state.focusedColumn}\"]`,\r\n    )\r\n  )\r\n    return;\r\n\r\n  keys.set([\r\n    makeCellKey({\r\n      columnIndex: state.focusedColumn,\r\n      rowIndex: state.focusedRow,\r\n    }),\r\n    makeCellKey({\r\n      columnIndex: state.focusedColumn,\r\n      rowIndex: state.focusedRow + 1,\r\n    }),\r\n    'grid',\r\n  ]);\r\n  state.focusedRow++;\r\n\r\n  assignSelectedIndexId(state);\r\n};\r\nconst arrowUp: TIconsListOperation<void> = (state, _: void, keys) => {\r\n  if (state.focusedRow > 1) {\r\n    keys.set([\r\n      makeCellKey({\r\n        columnIndex: state.focusedColumn,\r\n        rowIndex: state.focusedRow,\r\n      }),\r\n      makeCellKey({\r\n        columnIndex: state.focusedColumn,\r\n        rowIndex: state.focusedRow - 1,\r\n      }),\r\n      'grid',\r\n    ]);\r\n    state.focusedRow--;\r\n\r\n    assignSelectedIndexId(state);\r\n  }\r\n};\r\nconst arrowLeft: TIconsListOperation<void> = (state, _: void, keys) => {\r\n  if (state.focusedColumn > 1) {\r\n    keys.set([\r\n      makeCellKey({\r\n        columnIndex: state.focusedColumn,\r\n        rowIndex: state.focusedRow,\r\n      }),\r\n      makeCellKey({\r\n        columnIndex: state.focusedColumn - 1,\r\n        rowIndex: state.focusedRow,\r\n      }),\r\n      'grid',\r\n    ]);\r\n    state.focusedColumn--;\r\n\r\n    assignSelectedIndexId(state);\r\n  }\r\n  /**\r\n   * Este bloque agrega el comportamiento de que, al presionar la flecha\r\n   * derecha estando en el último ícono de una fila, salta a la fila\r\n   * siguiente. El problema es que solamente funciona cuando las ids son\r\n   * secuenciales, lo cual no siempre es cierto. Habría que agregar un sistema\r\n   * de doble id para garantizar la secuencialidad de las ids usadas por este\r\n   * método, independientemente de las ids provistas por el usuario del\r\n   * componente.\r\n   */\r\n  /* else if (state.focusedRow > 1) {\r\n    const focusedRow = document.querySelector(\r\n      `#${state.storeId} [aria-rowindex=\"${state.focusedRow - 1}\"]`,\r\n    );\r\n\r\n    if (focusedRow instanceof HTMLElement) {\r\n      const colIndex = noNaN(\r\n        focusedRow.querySelector('[aria-colIndex]:last-of-type')?.ariaColIndex,\r\n        -1,\r\n      );\r\n\r\n      if (colIndex !== -1) {\r\n        keys.set([\r\n          makeCellKey({\r\n            columnIndex: state.focusedColumn,\r\n            rowIndex: state.focusedRow,\r\n          }),\r\n          makeCellKey({\r\n            columnIndex: colIndex,\r\n            rowIndex: state.focusedRow - 1,\r\n          }),\r\n          'grid',\r\n        ]);\r\n\r\n        state.focusedRow--;\r\n        state.focusedColumn = colIndex;\r\n\r\n        assignSelectedIndexId(state);\r\n      }\r\n    }\r\n  } */\r\n};\r\nconst arrowRight: TIconsListOperation<void> = (state, _: void, keys) => {\r\n  if (\r\n    !document.querySelector(\r\n      `#${state.storeId} [aria-rowindex=\"${\r\n        state.focusedRow\r\n      }\"] [aria-colindex=\"${state.focusedColumn + 1}\"]`,\r\n    )\r\n  ) {\r\n    /**\r\n     * Este bloque agrega el comportamiento de que, al presionar la flecha\r\n     * derecha estando en el último ícono de una fila, salta a la fila\r\n     * siguiente. El problema es que solamente funciona cuando las ids son\r\n     * secuenciales, lo cual no siempre es cierto. Habría que agregar un sistema\r\n     * de doble id para garantizar la secuencialidad de las ids usadas por este\r\n     * método, independientemente de las ids provistas por el usuario del\r\n     * componente.\r\n     */\r\n    /* const newFocusedId = noNaN(state.focusedId) + 1;\r\n    const element = document.querySelector(\r\n      `#${state.storeId} [data-id=\"${newFocusedId}\"]`,\r\n    );\r\n\r\n    if (element instanceof HTMLElement) {\r\n      const rowIndex = noNaN(\r\n        element.closest('[aria-rowindex]')?.ariaRowIndex,\r\n        -1,\r\n      );\r\n      const colIndex = noNaN(\r\n        element.closest('[aria-colindex]')?.ariaColIndex,\r\n        -1,\r\n      );\r\n\r\n      if (rowIndex !== -1 && colIndex !== -1) {\r\n        keys.set([\r\n          makeCellKey({\r\n            columnIndex: state.focusedColumn,\r\n            rowIndex: state.focusedRow,\r\n          }),\r\n          makeCellKey({\r\n            columnIndex: colIndex,\r\n            rowIndex: rowIndex,\r\n          }),\r\n          'grid',\r\n        ]);\r\n\r\n        state.focusedColumn = colIndex;\r\n        state.focusedRow = rowIndex;\r\n\r\n        assignSelectedIndexId(state);\r\n      }\r\n    } */\r\n\r\n    return;\r\n  }\r\n  keys.set([\r\n    makeCellKey({\r\n      columnIndex: state.focusedColumn,\r\n      rowIndex: state.focusedRow,\r\n    }),\r\n    makeCellKey({\r\n      columnIndex: state.focusedColumn + 1,\r\n      rowIndex: state.focusedRow,\r\n    }),\r\n    'grid',\r\n  ]);\r\n  state.focusedColumn++;\r\n  assignSelectedIndexId(state);\r\n};\r\nconst setFocused: TIconsListOperation<{\r\n  rowIndex: number;\r\n  colIndex: number;\r\n}> = (state, payload, keys) => {\r\n  if (\r\n    !document.querySelector(\r\n      `#${state.storeId} [aria-rowindex=\"${payload.rowIndex}\"] [aria-colindex=\"${payload.colIndex}\"]`,\r\n    )\r\n  )\r\n    return;\r\n\r\n  keys.set([\r\n    makeCellKey({ columnIndex: payload.colIndex, rowIndex: payload.rowIndex }),\r\n    makeCellKey({\r\n      columnIndex: state.focusedColumn,\r\n      rowIndex: state.focusedRow,\r\n    }),\r\n    'grid',\r\n  ]);\r\n\r\n  state.focusedColumn = payload.colIndex;\r\n  state.focusedRow = payload.rowIndex;\r\n\r\n  assignSelectedIndexId(state);\r\n};\r\n\r\nconst recalculateIndexByResize: TIconsListOperation<void> = (\r\n  state: TState,\r\n  _: void,\r\n  keys,\r\n) => {\r\n  const element = document.querySelector(\r\n    `#${state.storeId} [data-id=\"${state.focusedId}\"]`,\r\n  );\r\n\r\n  if (element instanceof HTMLElement) {\r\n    const rowIndex = noNaN(\r\n      element.closest('[aria-rowindex]')?.ariaRowIndex,\r\n      -1,\r\n    );\r\n    const colIndex = noNaN(\r\n      element.closest('[aria-colindex]')?.ariaColIndex,\r\n      -1,\r\n    );\r\n\r\n    if (rowIndex !== -1 && colIndex !== -1) {\r\n      keys.set([\r\n        makeCellKey({\r\n          columnIndex: state.focusedColumn,\r\n          rowIndex: state.focusedRow,\r\n        }),\r\n        makeCellKey({ columnIndex: colIndex, rowIndex }),\r\n      ]);\r\n\r\n      state.focusedColumn = colIndex;\r\n      state.focusedRow = rowIndex;\r\n    }\r\n  }\r\n};\r\n\r\nexport const operations = {\r\n  arrowDown,\r\n  arrowLeft,\r\n  arrowRight,\r\n  arrowUp,\r\n  setFocused,\r\n  recalculateIndexByResize,\r\n};\r\n"],"names":[],"mappings":"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"}

package/dist/components/IconsList/store/state.js

@@ -0,0 +1,9 @@
+const getInitialState = (props) => ({
+  focusedColumn: 1,
+  focusedRow: 1,
+  focusedId: 0,
+  ...props
+});
+
+export { getInitialState };
+//# sourceMappingURL=state.js.map

package/dist/components/IconsList/store/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sources":["../../../../src/components/IconsList/store/state.ts"],"sourcesContent":["import { TState } from './types';\r\n\r\nexport const getInitialState = (props: Pick<TState, 'storeId'>): TState => ({\r\n  focusedColumn: 1,\r\n  focusedRow: 1,\r\n  focusedId: 0,\r\n  ...props,\r\n});\r\n"],"names":[],"mappings":"AAEa,MAAA,eAAA,GAAkB,CAAC,KAA4C,MAAA;AAAA,EAC1E,aAAe,EAAA,CAAA;AAAA,EACf,UAAY,EAAA,CAAA;AAAA,EACZ,SAAW,EAAA,CAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA;;;;"}

package/dist/components/IconsList/store/useStore.js

@@ -0,0 +1,52 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { createFAsomeStore } from '@apia/dom-store';
+import { useMemo, useCallback } from 'react';
+import { distinctors } from './distinctors.js';
+import { operations } from './operations.js';
+import { keysMakers } from './keysMaker.js';
+import { getInitialState } from './state.js';
+import { StoreContext } from './context.js';
+
+const useStore = ({
+  storeId
+}) => {
+  const [actions, useProps, getState, registerStateChangeListener] = useMemo(
+    () => createFAsomeStore({
+      initialState: getInitialState({
+        storeId
+      }),
+      distinctors,
+      keysMakers,
+      operations
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const ContextProvider = useCallback(
+    ({ children }) => {
+      return /* @__PURE__ */ jsx(
+        StoreContext.Provider,
+        {
+          value: {
+            actions,
+            useProps,
+            getState,
+            registerStateChangeListener
+          },
+          children
+        }
+      );
+    },
+    [actions, getState, registerStateChangeListener, useProps]
+  );
+  return [
+    actions,
+    useProps,
+    getState,
+    registerStateChangeListener,
+    ContextProvider
+  ];
+};
+
+export { useStore };
+//# sourceMappingURL=useStore.js.map

package/dist/components/IconsList/store/useStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStore.js","sources":["../../../../src/components/IconsList/store/useStore.tsx"],"sourcesContent":["import { createFAsomeStore } from '@apia/dom-store';\r\nimport { ReactNode, useCallback, useMemo } from 'react';\r\nimport { distinctors } from './distinctors';\r\nimport { operations } from './operations';\r\nimport { keysMakers } from './keysMaker';\r\nimport { getInitialState } from './state';\r\nimport { StoreContext, TStoreContext } from './context';\r\nimport { TState } from './types';\r\n\r\nexport const useStore = ({\r\n  storeId,\r\n}: Pick<TState, 'storeId'>): [\r\n  TStoreContext['actions'],\r\n  TStoreContext['useProps'],\r\n  TStoreContext['getState'],\r\n  TStoreContext['registerStateChangeListener'],\r\n  ({ children }: { children: ReactNode }) => JSX.Element,\r\n] => {\r\n  const [actions, useProps, getState, registerStateChangeListener] = useMemo(\r\n    () =>\r\n      createFAsomeStore({\r\n        initialState: getInitialState({\r\n          storeId,\r\n        }),\r\n        distinctors,\r\n        keysMakers,\r\n        operations,\r\n      }),\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [],\r\n  );\r\n\r\n  const ContextProvider = useCallback(\r\n    ({ children }: { children: ReactNode }) => {\r\n      return (\r\n        <StoreContext.Provider\r\n          value={{\r\n            actions,\r\n            useProps,\r\n            getState,\r\n            registerStateChangeListener,\r\n          }}\r\n        >\r\n          {children}\r\n        </StoreContext.Provider>\r\n      );\r\n    },\r\n    [actions, getState, registerStateChangeListener, useProps],\r\n  );\r\n\r\n  return [\r\n    actions,\r\n    useProps,\r\n    getState,\r\n    registerStateChangeListener,\r\n    ContextProvider,\r\n  ];\r\n};\r\n"],"names":[],"mappings":";;;;;;;;;AASO,MAAM,WAAW,CAAC;AAAA,EACvB,OAAA;AACF,CAMK,KAAA;AACH,EAAA,MAAM,CAAC,OAAA,EAAS,QAAU,EAAA,QAAA,EAAU,2BAA2B,CAAI,GAAA,OAAA;AAAA,IACjE,MACE,iBAAkB,CAAA;AAAA,MAChB,cAAc,eAAgB,CAAA;AAAA,QAC5B,OAAA;AAAA,OACD,CAAA;AAAA,MACD,WAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,KACD,CAAA;AAAA;AAAA,IAEH,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,EAAE,QAAA,EAAwC,KAAA;AACzC,MACE,uBAAA,GAAA;AAAA,QAAC,YAAa,CAAA,QAAA;AAAA,QAAb;AAAA,UACC,KAAO,EAAA;AAAA,YACL,OAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,2BAAA;AAAA,WACF;AAAA,UAEC,QAAA;AAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAEJ;AAAA,IACA,CAAC,OAAA,EAAS,QAAU,EAAA,2BAAA,EAA6B,QAAQ,CAAA;AAAA,GAC3D,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,2BAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/components/IconsList/styles.js

@@ -0,0 +1,48 @@
+import { focusOutline } from '@apia/theme';
+
+const styles = {
+  "&, *": {
+    textAlign: "center"
+  },
+  ".iconsList__icon__image__wrapper": {
+    boxShadow: "1px 1px 3px #0001",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  ".iconsList__icon__image": {
+    maxWidth: "calc(100% - 4px)"
+  },
+  ".iconsList__icon__wrapper": {
+    p: 2,
+    display: "flex",
+    flexDirection: "column",
+    gap: 3,
+    "&:hover": (theme) => {
+      return {
+        ...theme.palette.getOneState(
+          { backgroundColor: "palette.background.paper" },
+          "hover"
+        )
+      };
+    }
+  },
+  ".iconsList__icon__label": {
+    wordBreak: "break-word",
+    display: "-webkit-box",
+    WebkitLineClamp: "3",
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    lineHeight: "20px"
+  },
+  ".iconsList__keyHandler:focus": {
+    outline: "none",
+    ".focused .iconsList__icon__wrapper": {
+      ...focusOutline
+    }
+  }
+};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/components/IconsList/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/IconsList/styles.ts"],"sourcesContent":["import { focusOutline } from '@apia/theme';\r\nimport { ThemeUICSSObject } from '@apia/theme';\r\n\r\nexport const styles: ThemeUICSSObject = {\r\n  '&, *': {\r\n    textAlign: 'center',\r\n  },\r\n\r\n  '.iconsList__icon__image__wrapper': {\r\n    boxShadow: '1px 1px 3px #0001',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n\r\n  '.iconsList__icon__image': {\r\n    maxWidth: 'calc(100% - 4px)',\r\n  },\r\n\r\n  '.iconsList__icon__wrapper': {\r\n    p: 2,\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: 3,\r\n\r\n    '&:hover': (theme) => {\r\n      return {\r\n        ...theme.palette.getOneState(\r\n          { backgroundColor: 'palette.background.paper' },\r\n          'hover',\r\n        ),\r\n      };\r\n    },\r\n  },\r\n\r\n  '.iconsList__icon__label': {\r\n    wordBreak: 'break-word',\r\n    display: '-webkit-box',\r\n    WebkitLineClamp: '3',\r\n    WebkitBoxOrient: 'vertical',\r\n    overflow: 'hidden',\r\n    textOverflow: 'ellipsis',\r\n    lineHeight: '20px',\r\n  },\r\n\r\n  '.iconsList__keyHandler:focus': {\r\n    outline: 'none',\r\n\r\n    '.focused .iconsList__icon__wrapper': {\r\n      ...focusOutline,\r\n    },\r\n  },\r\n};\r\n"],"names":[],"mappings":";;AAGO,MAAM,MAA2B,GAAA;AAAA,EACtC,MAAQ,EAAA;AAAA,IACN,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,kCAAoC,EAAA;AAAA,IAClC,SAAW,EAAA,mBAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,GAClB;AAAA,EAEA,yBAA2B,EAAA;AAAA,IACzB,QAAU,EAAA,kBAAA;AAAA,GACZ;AAAA,EAEA,2BAA6B,EAAA;AAAA,IAC3B,CAAG,EAAA,CAAA;AAAA,IACH,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,GAAK,EAAA,CAAA;AAAA,IAEL,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,MAAO,OAAA;AAAA,QACL,GAAG,MAAM,OAAQ,CAAA,WAAA;AAAA,UACf,EAAE,iBAAiB,0BAA2B,EAAA;AAAA,UAC9C,OAAA;AAAA,SACF;AAAA,OACF,CAAA;AAAA,KACF;AAAA,GACF;AAAA,EAEA,yBAA2B,EAAA;AAAA,IACzB,SAAW,EAAA,YAAA;AAAA,IACX,OAAS,EAAA,aAAA;AAAA,IACT,eAAiB,EAAA,GAAA;AAAA,IACjB,eAAiB,EAAA,UAAA;AAAA,IACjB,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,UAAY,EAAA,MAAA;AAAA,GACd;AAAA,EAEA,8BAAgC,EAAA;AAAA,IAC9B,OAAS,EAAA,MAAA;AAAA,IAET,oCAAsC,EAAA;AAAA,MACpC,GAAG,YAAA;AAAA,KACL;AAAA,GACF;AACF;;;;"}

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

@@ -0,0 +1,98 @@
+import { TIconName, TIconType } from '@apia/icons';
+import { TId } from '@apia/util';
+import { MouseEvent, ReactNode, KeyboardEvent, FunctionComponent } from 'react';
+
+type TIcon<P = Record<string, unknown>> = {
+    /**
+     * Permite el pasaje de propoiedades arbitrarias a cada nodo. Se podría usar
+     * por ejemplo para almacenar la url que debe ser llamada cuando se hace doble
+     * click en un ícono.
+     */
+    additionalProps?: P;
+    /**
+     * Se pide un ariaLabel como requerido por motivos de accesibilidad.
+     */
+    ariaLabel: string;
+    /**
+     * Permite el pasaje de clases arbitrarias a cada ícono.
+     */
+    className?: string;
+    id: TId;
+    icon?: TIconName | TIconType;
+    imageUrl?: string;
+    /**
+     * Es el texto que se mostrará debajo de la imagen.
+     */
+    label: string;
+    /**
+     * Permite modificar el color individual de un ícono.
+     */
+    textColor?: string;
+};
+type TIconsList<P = Record<string, unknown>> = {
+    /**
+     * Listado de íconos
+     */
+    icons: TIcon<P>[];
+    iconRenderer?: TIconRenderer<P>;
+    /**
+     * Por defecto se usa iconWidth=100.
+     *
+     * El iconSize indica el ancho del contenedor del ícono.
+     */
+    iconWidth?: number;
+    /**
+     * Si bien el gap horizontal es calculado automáticamente, es posible
+     * especificar cuál es el mínimo gap que debe mostrarse. *Por defecto se usará
+     * 30*
+     */
+    minHorizontalGap?: number;
+    /**
+     * Este callback es llamado cuando se hace click en un ícono
+     */
+    onIconClick?: (ev: MouseEvent<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Este callback es llamado cuando se hace doble click en un ícono
+     */
+    onIconDoubleClick?: (ev: MouseEvent<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Este método se usa para obtener detalles de un ícono. Es llamado cuando se
+     * hace foco o cuando se posiciona el mouse en un ícono. Si no está declarado
+     * los íconos no mostrarán detalles. Si está declarado deberá devolver un
+     *
+     * Record<string, ReactNode> y cada entrada será mostrada como una fila de
+     * detalle.
+     */
+    onIconGetDetails?: (icon: TIcon<P>) => ReactNode;
+    /**
+     * Permite agregar comportamiento personalizado a los eventos de teclado.
+     */
+    onIconKeyDown?: (ev: KeyboardEvent<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Normalmente el listado coloca padding horizontal para distribuir
+     * uniformemente los íconos, de forma que la distancia entre ellos sea la
+     * misma que la existente en la izquierda y derecha. Si se pasa esta
+     * propiedad, el primer y úlitmo ícono estarán colocados sobre los bordes y el
+     * espacio restante se distribuirá entre los gaps existnetes
+     */
+    removeHorizontalPadding?: boolean;
+    /**
+     * El espaciado horizontal se calcula automáticamente, sin embargo si es
+     * posible definir el vertical. Por defecto se usa 0.
+     */
+    verticalGap?: number;
+};
+/**
+ * Por defecto se usa DefaultIconRenderer. El pasaje de un nuevo IconRenderer
+ * permite modificar la forma en que se distribuyen en pantalla los distintos
+ * atributos de cada ícono.
+ *
+ * Una particularidad es cómo se definen los estilos cuando el ícono está en
+ * foco: Se usa el selector **'.iconsList__keyHandler:focus .focused
+ * .iconsList__icon__wrapper'**, que es donde se aplican los estilos
+ * correspondientes al foco.
+ */
+type TIconRenderer<P = Record<string, unknown>> = FunctionComponent<TIcon<P>>;
+
+export type { TIcon, TIconRenderer, TIconsList };
+//# sourceMappingURL=types.d.ts.map

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

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

package/dist/components/IconsList/util.js

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+function getBreakpoints(blockWidth) {
+  return Array(Math.floor(4e3 / blockWidth)).fill(1).map((_, i) => (i + 1) * blockWidth);
+}
+function useStyles({
+  containerWidth,
+  iconWidth,
+  breakPoint,
+  verticalGap,
+  removeHorizontalPadding
+}) {
+  const gap = (containerWidth - iconWidth * breakPoint) / (breakPoint + (removeHorizontalPadding ? -1 : 1));
+  const sx = useMemo(
+    () => ({
+      justifyContent: "space-evenly",
+      gridTemplateColumns: `repeat(${breakPoint}, 1fr)`,
+      rowGap: verticalGap ?? 0,
+      columnGap: `${gap}px`,
+      px: removeHorizontalPadding ? 0 : `${gap}px`
+    }),
+    [removeHorizontalPadding, breakPoint, gap, verticalGap]
+  );
+  return sx;
+}
+const justToFillTheRow = "JUST TO FILL THE ROW";
+function getRowIcons({
+  breakPoint,
+  icons,
+  i
+}) {
+  const actualIcons = icons.slice(
+    i * breakPoint,
+    (i + 1) * breakPoint
+  );
+  if (actualIcons.length < breakPoint)
+    actualIcons.push(
+      ...Array(breakPoint - actualIcons.length).fill(
+        justToFillTheRow
+      )
+    );
+  return actualIcons;
+}
+
+export { getBreakpoints, getRowIcons, justToFillTheRow, useStyles };
+//# sourceMappingURL=util.js.map

package/dist/components/IconsList/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../src/components/IconsList/util.ts"],"sourcesContent":["import { useMemo } from 'react';\r\nimport { TIcon } from './types';\r\n\r\nexport function getBreakpoints(blockWidth: number) {\r\n  return Array(Math.floor(4000 / blockWidth))\r\n    .fill(1)\r\n    .map((_, i) => (i + 1) * blockWidth);\r\n}\r\n\r\nexport function useStyles({\r\n  containerWidth,\r\n  iconWidth,\r\n  breakPoint,\r\n  verticalGap,\r\n  removeHorizontalPadding,\r\n}: {\r\n  containerWidth: number;\r\n  iconWidth: number;\r\n  breakPoint: number;\r\n  verticalGap?: number;\r\n  removeHorizontalPadding?: boolean;\r\n}) {\r\n  const gap =\r\n    (containerWidth - iconWidth * breakPoint) /\r\n    (breakPoint + (removeHorizontalPadding ? -1 : 1));\r\n  const sx = useMemo(\r\n    () => ({\r\n      justifyContent: 'space-evenly',\r\n      gridTemplateColumns: `repeat(${breakPoint}, 1fr)`,\r\n      rowGap: verticalGap ?? 0,\r\n      columnGap: `${gap}px`,\r\n      px: removeHorizontalPadding ? 0 : `${gap}px`,\r\n    }),\r\n    [removeHorizontalPadding, breakPoint, gap, verticalGap],\r\n  );\r\n\r\n  return sx;\r\n}\r\n\r\nexport const justToFillTheRow = 'JUST TO FILL THE ROW';\r\n\r\nexport function getRowIcons<P>({\r\n  breakPoint,\r\n  icons,\r\n  i,\r\n}: {\r\n  breakPoint: number;\r\n  icons: TIcon<P>[];\r\n  i: number;\r\n}) {\r\n  const actualIcons: (string | TIcon<P>)[] = icons.slice(\r\n    i * breakPoint,\r\n    (i + 1) * breakPoint,\r\n  );\r\n  if (actualIcons.length < breakPoint)\r\n    actualIcons.push(\r\n      ...(Array(breakPoint - actualIcons.length).fill(\r\n        justToFillTheRow,\r\n      ) as string[]),\r\n    );\r\n\r\n  return actualIcons;\r\n}\r\n"],"names":[],"mappings":";;AAGO,SAAS,eAAe,UAAoB,EAAA;AACjD,EAAA,OAAO,MAAM,IAAK,CAAA,KAAA,CAAM,GAAO,GAAA,UAAU,CAAC,CACvC,CAAA,IAAA,CAAK,CAAC,CAAA,CACN,IAAI,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,GAAI,KAAK,UAAU,CAAA,CAAA;AACvC,CAAA;AAEO,SAAS,SAAU,CAAA;AAAA,EACxB,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,uBAAA;AACF,CAMG,EAAA;AACD,EAAA,MAAM,OACH,cAAiB,GAAA,SAAA,GAAY,UAC7B,KAAA,UAAA,IAAc,0BAA0B,CAAK,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAChD,EAAA,MAAM,EAAK,GAAA,OAAA;AAAA,IACT,OAAO;AAAA,MACL,cAAgB,EAAA,cAAA;AAAA,MAChB,mBAAA,EAAqB,UAAU,UAAU,CAAA,MAAA,CAAA;AAAA,MACzC,QAAQ,WAAe,IAAA,CAAA;AAAA,MACvB,SAAA,EAAW,GAAG,GAAG,CAAA,EAAA,CAAA;AAAA,MACjB,EAAI,EAAA,uBAAA,GAA0B,CAAI,GAAA,CAAA,EAAG,GAAG,CAAA,EAAA,CAAA;AAAA,KAC1C,CAAA;AAAA,IACA,CAAC,uBAAA,EAAyB,UAAY,EAAA,GAAA,EAAK,WAAW,CAAA;AAAA,GACxD,CAAA;AAEA,EAAO,OAAA,EAAA,CAAA;AACT,CAAA;AAEO,MAAM,gBAAmB,GAAA,uBAAA;AAEzB,SAAS,WAAe,CAAA;AAAA,EAC7B,UAAA;AAAA,EACA,KAAA;AAAA,EACA,CAAA;AACF,CAIG,EAAA;AACD,EAAA,MAAM,cAAqC,KAAM,CAAA,KAAA;AAAA,IAC/C,CAAI,GAAA,UAAA;AAAA,IAAA,CACH,IAAI,CAAK,IAAA,UAAA;AAAA,GACZ,CAAA;AACA,EAAA,IAAI,YAAY,MAAS,GAAA,UAAA;AACvB,IAAY,WAAA,CAAA,IAAA;AAAA,MACV,GAAI,KAAA,CAAM,UAAa,GAAA,WAAA,CAAY,MAAM,CAAE,CAAA,IAAA;AAAA,QACzC,gBAAA;AAAA,OACF;AAAA,KACF,CAAA;AAEF,EAAO,OAAA,WAAA,CAAA;AACT;;;;"}

package/dist/components/ListBox/Combobox.js

@@ -0,0 +1,52 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import { useContext, useCallback } from 'react';
+import { ListboxContext } from './ListboxContext.js';
+import { useDebouncedCallback } from '@apia/util';
+import { Input, Box } from '@apia/theme';
+
+const Combobox = ({
+  children,
+  ...props
+}) => {
+  const { id, listboxActions, useListbox } = useContext(ListboxContext);
+  const run = useDebouncedCallback((ev) => {
+    listboxActions.filter({ searchString: ev.target.value });
+  });
+  const ref = useListbox("searchbox", null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "text",
+        id: `${id}__searchbox`,
+        placeholder: "Search...",
+        "aria-autocomplete": "list",
+        "aria-controls": `${id}__list__container`,
+        role: "combobox",
+        "aria-expanded": true,
+        "aria-haspopup": "listbox",
+        onChange: run,
+        autoComplete: "off"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "ul",
+        id: `${id}__list__container`,
+        role: "listbox",
+        className: "listbox__list",
+        ...props,
+        onClick: useCallback(() => {
+          if (document.activeElement !== document.getElementById(`${id}__searchbox`))
+            document.getElementById(`${id}__searchbox`)?.focus();
+        }, [id]),
+        children
+      }
+    )
+  ] });
+};
+
+export { Combobox };
+//# sourceMappingURL=Combobox.js.map

package/dist/components/ListBox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/ListBox/Combobox.tsx"],"sourcesContent":["import { ChangeEvent, FC, ReactNode, useCallback, useContext } from 'react';\r\nimport { ListboxContext } from './ListboxContext';\r\nimport { useDebouncedCallback } from '@apia/util';\r\nimport { Box, BoxProps, Input } from '@apia/theme';\r\n\r\nconst Combobox: FC<{ children: ReactNode } & BoxProps> = ({\r\n  children,\r\n  ...props\r\n}) => {\r\n  const { id, listboxActions, useListbox } = useContext(ListboxContext);\r\n  const run = useDebouncedCallback((ev: ChangeEvent<HTMLInputElement>) => {\r\n    listboxActions.filter({ searchString: ev.target.value });\r\n  });\r\n\r\n  const ref = useListbox<HTMLInputElement>('searchbox', null);\r\n\r\n  return (\r\n    <>\r\n      <Input\r\n        ref={ref}\r\n        type=\"text\"\r\n        id={`${id}__searchbox`}\r\n        placeholder=\"Search...\"\r\n        aria-autocomplete=\"list\"\r\n        aria-controls={`${id}__list__container`}\r\n        role=\"combobox\"\r\n        aria-expanded\r\n        aria-haspopup=\"listbox\"\r\n        onChange={run}\r\n        autoComplete=\"off\"\r\n      />\r\n      <Box\r\n        as=\"ul\"\r\n        id={`${id}__list__container`}\r\n        role=\"listbox\"\r\n        className=\"listbox__list\"\r\n        {...props}\r\n        onClick={useCallback(() => {\r\n          if (\r\n            document.activeElement !==\r\n            document.getElementById(`${id}__searchbox`)\r\n          )\r\n            document.getElementById(`${id}__searchbox`)?.focus();\r\n        }, [id])}\r\n      >\r\n        {children}\r\n      </Box>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { Combobox };\r\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,WAAmD,CAAC;AAAA,EACxD,QAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,EAAI,EAAA,cAAA,EAAgB,UAAW,EAAA,GAAI,WAAW,cAAc,CAAA,CAAA;AACpE,EAAM,MAAA,GAAA,GAAM,oBAAqB,CAAA,CAAC,EAAsC,KAAA;AACtE,IAAA,cAAA,CAAe,OAAO,EAAE,YAAA,EAAc,EAAG,CAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,GACxD,CAAA,CAAA;AAED,EAAM,MAAA,GAAA,GAAM,UAA6B,CAAA,WAAA,EAAa,IAAI,CAAA,CAAA;AAE1D,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAK,EAAA,MAAA;AAAA,QACL,EAAA,EAAI,GAAG,EAAE,CAAA,WAAA,CAAA;AAAA,QACT,WAAY,EAAA,WAAA;AAAA,QACZ,mBAAkB,EAAA,MAAA;AAAA,QAClB,eAAA,EAAe,GAAG,EAAE,CAAA,iBAAA,CAAA;AAAA,QACpB,IAAK,EAAA,UAAA;AAAA,QACL,eAAa,EAAA,IAAA;AAAA,QACb,eAAc,EAAA,SAAA;AAAA,QACd,QAAU,EAAA,GAAA;AAAA,QACV,YAAa,EAAA,KAAA;AAAA,OAAA;AAAA,KACf;AAAA,oBACA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,IAAA;AAAA,QACH,EAAA,EAAI,GAAG,EAAE,CAAA,iBAAA,CAAA;AAAA,QACT,IAAK,EAAA,SAAA;AAAA,QACL,SAAU,EAAA,eAAA;AAAA,QACT,GAAG,KAAA;AAAA,QACJ,OAAA,EAAS,YAAY,MAAM;AACzB,UAAA,IACE,SAAS,aACT,KAAA,QAAA,CAAS,cAAe,CAAA,CAAA,EAAG,EAAE,CAAa,WAAA,CAAA,CAAA;AAE1C,YAAA,QAAA,CAAS,cAAe,CAAA,CAAA,EAAG,EAAE,CAAA,WAAA,CAAa,GAAG,KAAM,EAAA,CAAA;AAAA,SACvD,EAAG,CAAC,EAAE,CAAC,CAAA;AAAA,QAEN,QAAA;AAAA,OAAA;AAAA,KACH;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/ListBox/ListboxContext.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode, MouseEvent, KeyboardEvent } from 'react';
+import { TListboxState } from './common.js';
+import { TOnConfirmSelection, TOnSelectionChange } from './index.js';
+import { BoxProps } from '@apia/theme';
+
+type TListbox = {
+    children: ReactNode | ReactNode[];
+    className?: string;
+    /**
+     * Permite remover los estilos por defecto de la lista a fin de personalizar
+     * su aspecto
+     */
+    unstyled?: boolean;
+    onClickNode?: (ev: MouseEvent<HTMLElement>) => unknown;
+    onDoubleClickNode?: (ev: MouseEvent<HTMLElement>) => unknown;
+    /**
+     * Este evento es lanzado cuando el usuario estando en foco en la lista
+     * presiona:
+     *
+     * - Enter si la selección múltiple está deshabilitada
+     * - ctrl+Enter si la selección múltiple está habilitada
+     */
+    onConfirmSelection?: (ev: TOnConfirmSelection) => unknown;
+    onPressEnterOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;
+    onPressKeyOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;
+    onSelectionChange?: (ev: TOnSelectionChange) => unknown;
+    /**
+     * onKeyDown e id no son permitidas dado que se usan para generar el
+     * comportamiento correcto del componente
+     */
+    ulProps?: Omit<BoxProps, 'id' | 'onKeyDown' | 'sx'>;
+} & Partial<Pick<TListboxState, 'allowMultipleCharacterSearch' | 'allowSelection' | 'allowSingleCharacterSearch' | 'isMultipleSelection' | 'searchFunction' | 'startsWithFunction' | 'showSearchbox'>>;
+
+export type { TListbox };
+//# sourceMappingURL=ListboxContext.d.ts.map

package/dist/components/ListBox/ListboxContext.d.ts.map

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

package/dist/components/ListBox/ListboxContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const ListboxContext = createContext({});
+
+export { ListboxContext };
+//# sourceMappingURL=ListboxContext.js.map

package/dist/components/ListBox/ListboxContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListboxContext.js","sources":["../../../src/components/ListBox/ListboxContext.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, ReactNode, createContext } from 'react';\r\nimport {\r\n  TActionsMap,\r\n  TUseProperties,\r\n  TDistinctorProperties,\r\n} from '@apia/dom-store';\r\nimport { TListboxState, TRowDistinctions } from './common';\r\nimport { operations } from './operations';\r\nimport { TOnConfirmSelection, TOnSelectionChange } from '.';\r\nimport { BoxProps } from '@apia/theme';\r\n\r\nexport type TListbox = {\r\n  children: ReactNode | ReactNode[];\r\n  className?: string;\r\n  /**\r\n   * Permite remover los estilos por defecto de la lista a fin de personalizar\r\n   * su aspecto\r\n   */\r\n  unstyled?: boolean;\r\n  onClickNode?: (ev: MouseEvent<HTMLElement>) => unknown;\r\n  onDoubleClickNode?: (ev: MouseEvent<HTMLElement>) => unknown;\r\n  /**\r\n   * Este evento es lanzado cuando el usuario estando en foco en la lista\r\n   * presiona:\r\n   *\r\n   * - Enter si la selección múltiple está deshabilitada\r\n   * - ctrl+Enter si la selección múltiple está habilitada\r\n   */\r\n  onConfirmSelection?: (ev: TOnConfirmSelection) => unknown;\r\n  onPressEnterOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;\r\n  onPressKeyOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;\r\n  onSelectionChange?: (ev: TOnSelectionChange) => unknown;\r\n  /**\r\n   * onKeyDown e id no son permitidas dado que se usan para generar el\r\n   * comportamiento correcto del componente\r\n   */\r\n  ulProps?: Omit<BoxProps, 'id' | 'onKeyDown' | 'sx'>;\r\n} & Partial<\r\n  Pick<\r\n    TListboxState,\r\n    | 'allowMultipleCharacterSearch'\r\n    | 'allowSelection'\r\n    | 'allowSingleCharacterSearch'\r\n    | 'isMultipleSelection'\r\n    | 'searchFunction'\r\n    | 'startsWithFunction'\r\n    | 'showSearchbox'\r\n  >\r\n>;\r\n\r\nexport type TListboxContext = {\r\n  getState: () => TListboxState;\r\n  id: string;\r\n  listboxActions: TActionsMap<TListboxState, typeof operations>;\r\n  useListbox: TUseProperties<\r\n    TListboxState,\r\n    {\r\n      row: [\r\n        (\r\n          distinctions: TRowDistinctions,\r\n          state: TListboxState,\r\n        ) => TDistinctorProperties,\r\n      ];\r\n      searchbox: [\r\n        (distinctions: null, state: TListboxState) => TDistinctorProperties,\r\n      ];\r\n      listbox: [\r\n        (distinctions: null, state: TListboxState) => TDistinctorProperties,\r\n      ];\r\n    }\r\n  >;\r\n  variant: string;\r\n} & Pick<\r\n  TListbox,\r\n  | 'onClickNode'\r\n  | 'onConfirmSelection'\r\n  | 'onDoubleClickNode'\r\n  | 'onPressEnterOnNode'\r\n  | 'onPressKeyOnNode'\r\n>;\r\n\r\nconst ListboxContext = createContext<TListboxContext>({} as TListboxContext);\r\n\r\nexport { ListboxContext };\r\n"],"names":[],"mappings":";;AAiFM,MAAA,cAAA,GAAiB,aAA+B,CAAA,EAAqB;;;;"}

package/dist/components/ListBox/ListboxItem.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { BoxProps } from '@apia/theme';
+
+type TListboxItem = {
+    children?: ReactNode;
+    rowIndex?: number;
+} & BoxProps & {
+    /**
+     * El label se usa en aria-label por motivos de accesibilidad y además en
+     * la funcionalidad de búsqueda.
+     */
+    label: string;
+};
+declare const ListboxItem: FC<TListboxItem>;
+
+export { ListboxItem, type TListboxItem };
+//# sourceMappingURL=ListboxItem.d.ts.map

package/dist/components/ListBox/ListboxItem.d.ts.map

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

package/dist/components/ListBox/ListboxItem.js

@@ -0,0 +1,67 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import { memo, useContext, useMemo, useCallback } from 'react';
+import { ListboxContext } from './ListboxContext.js';
+import { decodeHTMLEntities } from '@apia/util';
+
+const ListboxItem = memo(
+  ({ children, rowIndex: outerRowIndex, label, ...domProps }) => {
+    const {
+      getState,
+      listboxActions,
+      onDoubleClickNode,
+      onClickNode,
+      useListbox
+    } = useContext(ListboxContext);
+    const rowIndex = useMemo(() => outerRowIndex ?? -1, [outerRowIndex]);
+    const ref = useListbox("row", { rowIndex });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      domProps.className?.includes("separator") && /* @__PURE__ */ jsx("li", { className: "separator" }),
+      /* @__PURE__ */ jsx(
+        "li",
+        {
+          ...domProps,
+          className: `${domProps.className?.split(" ").filter((current) => current !== "separator").join(" ") ?? ""} listbox__row`,
+          ref,
+          role: "option",
+          onDoubleClick: useCallback(
+            (ev) => {
+              ev.preventDefault();
+              onDoubleClickNode?.({
+                ...ev,
+                target: ev.target.closest(
+                  '[role="option"]'
+                )
+              });
+            },
+            [onDoubleClickNode]
+          ),
+          onMouseDown: useCallback(
+            (ev) => {
+              onClickNode?.({
+                ...ev,
+                target: ev.target.closest(
+                  '[role="option"]'
+                )
+              });
+              if (getState().isMultipleSelection && ev.shiftKey || ev.detail > 1)
+                ev.preventDefault();
+              listboxActions.updateFocusByClickEvent({
+                rowIndex,
+                isCtrlKey: ev.ctrlKey,
+                isShiftKey: ev.shiftKey
+              });
+            },
+            [getState, listboxActions, onClickNode, rowIndex]
+          ),
+          "aria-label": label,
+          title: useMemo(() => decodeHTMLEntities(label), [label]),
+          children
+        }
+      )
+    ] });
+  }
+);
+ListboxItem.displayName = "ListboxItem";
+
+export { ListboxItem };
+//# sourceMappingURL=ListboxItem.js.map