@neovici/cosmoz-queue 3.5.0 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +3 -2
  2. package/dist/queue/index.d.ts +1 -0
  3. package/dist/queue/index.d.ts.map +1 -1
  4. package/dist/queue/index.js +1 -0
  5. package/dist/queue/queue.d.ts.map +1 -1
  6. package/dist/queue/queue.js +4 -1
  7. package/dist/queue/render.d.ts +6 -1
  8. package/dist/queue/render.d.ts.map +1 -1
  9. package/dist/queue/render.js +9 -2
  10. package/dist/queue/use-pref.d.ts +2 -2
  11. package/dist/queue/use-pref.d.ts.map +1 -1
  12. package/dist/queue/use-pref.js +22 -4
  13. package/dist/queue/use-queue.d.ts +2 -1
  14. package/dist/queue/use-queue.d.ts.map +1 -1
  15. package/dist/queue/use-queue.js +35 -23
  16. package/dist/queue/use-tabs-pref.d.ts +12 -0
  17. package/dist/queue/use-tabs-pref.d.ts.map +1 -0
  18. package/dist/queue/use-tabs-pref.js +12 -0
  19. package/dist/styles/shared-styles.d.ts.map +1 -1
  20. package/dist/styles/shared-styles.js +5 -4
  21. package/package.json +3 -2
package/README.md CHANGED
@@ -70,7 +70,7 @@ customElements.define('order-list-queue', component(OrderListQueue));
70
70
  | Prop | Type | Default | Description |
71
71
  | -------------- | --------------------------------- | -------- | ---------------------------------------------------------------------- |
72
72
  | `heading` | `string` | -- | Title displayed above the tabs |
73
- | `settingsId` | `string?` | -- | Key for persisting omnitable column settings |
73
+ | `settingsId` | `string?` | -- | Key for persisting omnitable settings and the picked tab |
74
74
  | `idHashParam` | `string` | `'qid'` | URL hash param for the selected item ID |
75
75
  | `tabHashParam` | `string` | `'qtab'` | URL hash param for the active tab |
76
76
  | `details` | `(item: I) => PromiseLike<D>` | -- | Fetches full details for a list item |
@@ -79,7 +79,7 @@ customElements.define('order-list-queue', component(OrderListQueue));
79
79
  | `view` | `(thru, props) => TemplateResult` | -- | Renders the detail view |
80
80
  | `loader` | `(thru, props) => TemplateResult` | -- | Renders the loading skeleton |
81
81
  | `pagination` | `Pagination?` | -- | Server-side pagination config |
82
- | `fallback` | `string?` | -- | Default tab when none is set in URL hash |
82
+ | `fallback` | `string?` | -- | Opening tab when the hash names none and no pick is remembered |
83
83
  | `split` | `SplitOpts?` | -- | Split.js configuration (sizes; `minSize`: minimum width per pane) |
84
84
  | `afterHeading` | `unknown?` | -- | Extra content rendered after the heading |
85
85
 
@@ -400,6 +400,7 @@ const MyQueue = ({ heading }: { heading: string }) => {
400
400
  | Hook | Import | Purpose |
401
401
  | ------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
402
402
  | `useTabs({ items, hashParam, mobile, fallback })` | `@neovici/cosmoz-queue` | Manages overview/split/queue tabs. Returns `{ tabnav, activeTab }`. |
403
+ | `useTabsPref({ persistKey, ...opts })` | `@neovici/cosmoz-queue` | Remembers the tab picked for `useTabs`; spread its result into the `useTabs` options. |
403
404
  | `useDataNav(items, opts)` | `@neovici/cosmoz-queue` | Item navigation with prev/next, URL hash sync. Returns `{ item, setItem, next, prev, forward, index }`. |
404
405
  | `useSplit({ activeTab, ...splitOpts })` | `@neovici/cosmoz-queue` | Initializes Split.js when in split mode. |
405
406
  | `useListState()` | `@neovici/cosmoz-queue` | Creates `items`, `selected`, `totalAvailable` state with setters. |
package/dist/queue/index.d.ts CHANGED
@@ -16,5 +16,6 @@ export { useListSSE } from './use-list-sse';
16
16
  export { default as useDataNav } from './use-data-nav';
17
17
  export { useMobile } from './use-mobile';
18
18
  export { default as useTabs } from './use-tabs';
19
+ export { default as useTabsPref } from './use-tabs-pref';
19
20
  export { filter, notify, useList, useListState } from './use-list';
20
21
  //# sourceMappingURL=index.d.ts.map
package/dist/queue/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/queue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACN,eAAe,EACf,OAAO,IAAI,QAAQ,EACnB,YAAY,GACZ,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,IAAI,eAAe,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/queue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACN,eAAe,EACf,OAAO,IAAI,QAAQ,EACnB,YAAY,GACZ,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,IAAI,eAAe,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
package/dist/queue/index.js CHANGED
@@ -21,5 +21,6 @@ export { useListSSE } from './use-list-sse';
21
21
  export { default as useDataNav } from './use-data-nav';
22
22
  export { useMobile } from './use-mobile';
23
23
  export { default as useTabs } from './use-tabs';
24
+ export { default as useTabsPref } from './use-tabs-pref';
24
25
  // List hooks
25
26
  export { filter, notify, useList, useListState } from './use-list';
package/dist/queue/queue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/queue/queue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,KAAK,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC,EAC5C,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC/D,IAAI,EAAE,CACL,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,KACpD,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBAuGjD,CAAC"}
1
+ {"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/queue/queue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,KAAK,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC,EAC5C,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC/D,IAAI,EAAE,CACL,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,KACpD,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBA2GjD,CAAC"}
package/dist/queue/queue.js CHANGED
@@ -5,12 +5,14 @@ import useAsyncAction from './use-async-action';
5
5
  import useQueue from './use-queue';
6
6
  export const queue = (props) => {
7
7
  const { heading, afterHeading, header, settingsId, idHashParam = 'qid', tabHashParam = 'qtab', id, api, details, list, view, loader, pagination, fallback, split, } = props;
8
+ const persistKey = settingsId ? `${settingsId}-split` : undefined;
8
9
  const queueProps = useQueue({
9
10
  id,
10
11
  api,
11
12
  idHashParam,
12
13
  tabHashParam,
13
14
  fallback,
15
+ persistKey,
14
16
  });
15
17
  const { index, hideActions, items, setItems, setSelected, totalAvailable, setTotalAvailable, onItemClick, rowPartFn, nav, tabnav, } = queueProps;
16
18
  const { listRef, onAsyncSimpleAction } = useAsyncAction(nav);
@@ -24,13 +26,14 @@ export const queue = (props) => {
24
26
  heading,
25
27
  afterHeading,
26
28
  header,
29
+ tabHashParam,
27
30
  index,
28
31
  items,
29
32
  tabnav,
30
33
  totalAvailable,
31
34
  nav,
32
35
  pagination,
33
- persistKey: settingsId ? `${settingsId}-split` : undefined,
36
+ persistKey,
34
37
  splitAttrs,
35
38
  list: list({
36
39
  id: 'list',
package/dist/queue/render.d.ts CHANGED
@@ -65,8 +65,13 @@ export interface RenderQueue<I, D> extends Pick<RenderView<I, D>, 'renderItem' |
65
65
  heading?: string;
66
66
  afterHeading?: unknown;
67
67
  totalAvailable?: number;
68
+ /** Currently selected list item. */
69
+ item?: I;
70
+ /** Hash parameter controlling the layout. */
71
+ tabHashParam?: string;
68
72
  }) => TemplateResult;
69
73
  heading?: string;
74
+ tabHashParam?: string;
70
75
  afterHeading?: unknown;
71
76
  index?: number;
72
77
  items: I[];
@@ -83,6 +88,6 @@ export interface RenderQueue<I, D> extends Pick<RenderView<I, D>, 'renderItem' |
83
88
  index: number;
84
89
  };
85
90
  }
86
- export declare const renderQueue: <I, D>({ header, heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details, pagination: _pagination, persistKey, splitAttrs, }: RenderQueue<I, D>) => TemplateResult<1>;
91
+ export declare const renderQueue: <I, D>({ header, heading, afterHeading, index, tabnav, items, totalAvailable, nav, tabHashParam, list, renderLoader, renderItem, details, pagination: _pagination, persistKey, splitAttrs, }: RenderQueue<I, D>) => TemplateResult<1>;
87
92
  export {};
88
93
  //# sourceMappingURL=render.d.ts.map
package/dist/queue/render.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAc,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAG5E,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAMzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAQtC,eAAO,MAAM,SAAS,GAAI,iBAGvB;IACF,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CAClB,sBAsBkB,CAAC;AAEpB,eAAO,MAAM,gBAAgB,GAAI,aAAa,UAAU,uCAgCvD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,+DAO5B;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,GAAG,EAAE;QAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,uCA0BA,CAAC;AAEF,UAAU,UAAU,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC;IACnC,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE;QAClB,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC;QACZ,GAAG,EAAE,cAAc,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;QAClB,aAAa,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KACjC,KAAK,cAAc,CAAC;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,GAAG,EAAE,cAAc,CAAA;KAAE,KAAK,cAAc,CAAC;CACzE;AACD,eAAO,MAAM,UAAU,GAAI,CAAC,EAAE,CAAC,EAAE,yEAQ9B,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC;;EAelB,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,eAAe,CAAC;IAC1E,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AACD,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,CAAC,EAAE,gCAK/B,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;;;;;;kBAIF;QAAE,aAAa,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;KAAE;;;;CAQrC,CAAC;AAEjB,MAAM,WAAW,WAAW,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,IAAI,CAC9C,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAChB,YAAY,GAAG,cAAc,GAAG,SAAS,CACzC;IACA,iEAAiE;IACjE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAChB,MAAM,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACxB,KAAK,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,MAAM,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IACxB,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,cAAc,GAAG,SAAS,CAAC,GACtE,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACvD;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,CAAC,EAAE,yKAgB/B,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,sBAkDnB,CAAC"}
1
+ {"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"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"}
package/dist/queue/render.js CHANGED
@@ -114,7 +114,7 @@ export const renderSlide = ({ id, forward, item, ...thru }) => item
114
114
  animation: forward ? slideInRight : slideInLeft,
115
115
  }
116
116
  : emptySlide();
117
- export const renderQueue = ({ header, heading, afterHeading, index, tabnav, items, totalAvailable, nav, list, renderLoader, renderItem, details = nav?.details, pagination: _pagination, persistKey, splitAttrs, }) => {
117
+ export const renderQueue = ({ header, heading, afterHeading, index, tabnav, items, totalAvailable, nav, tabHashParam, list, renderLoader, renderItem, details = nav?.details, pagination: _pagination, persistKey, splitAttrs, }) => {
118
118
  const activeTab = tabnav.active?.name;
119
119
  const pagination = _pagination
120
120
  ? { ..._pagination, totalAvailable }
@@ -139,7 +139,14 @@ export const renderQueue = ({ header, heading, afterHeading, index, tabnav, item
139
139
  ${queueStyle}
140
140
  </style>
141
141
 
142
- ${when(header, (header) => header({ tabnav, heading, afterHeading, totalAvailable }), () => tabn)}
142
+ ${when(header, (header) => header({
143
+ tabnav,
144
+ heading,
145
+ afterHeading,
146
+ totalAvailable,
147
+ item: nav?.item,
148
+ tabHashParam,
149
+ }), () => tabn)}
143
150
 
144
151
  <cosmoz-resizable-view
145
152
  data-active=${activeTab}
package/dist/queue/use-pref.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  type Returned<T> = [T, (v: T) => void];
2
- export declare function usePref<T extends string>(key: string): Returned<T>;
3
- export declare function usePref<T extends string>(key: string, defaultValue: T): Returned<T>;
2
+ export declare function usePref<T extends string>(key?: string): Returned<T>;
3
+ export declare function usePref<T extends string>(key: string | undefined, defaultValue: T): Returned<T>;
4
4
  export {};
5
5
  //# sourceMappingURL=use-pref.d.ts.map
package/dist/queue/use-pref.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-pref.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AACvC,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACpE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACvC,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACb,QAAQ,CAAC,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"use-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-pref.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAmBvC,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACrE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACvC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,YAAY,EAAE,CAAC,GACb,QAAQ,CAAC,CAAC,CAAC,CAAC"}
package/dist/queue/use-pref.js CHANGED
@@ -1,11 +1,29 @@
1
- import { useState, useCallback } from '@pionjs/pion';
1
+ import { useCallback, useState } from '@pionjs/pion';
2
+ const loadPref = (key) => {
3
+ try {
4
+ return key ? localStorage.getItem(`pref-${key}`) : undefined;
5
+ }
6
+ catch {
7
+ return undefined;
8
+ }
9
+ };
10
+ const savePref = (key, value) => {
11
+ if (!key)
12
+ return;
13
+ try {
14
+ localStorage.setItem(`pref-${key}`, value);
15
+ }
16
+ catch {
17
+ // storage blocked
18
+ }
19
+ };
2
20
  export function usePref(key, defaultValue) {
3
- const [pref, setPref] = useState(() => localStorage.getItem(`pref-${key}`) || defaultValue);
21
+ const [pref, setPref] = useState(() => loadPref(key) || defaultValue);
4
22
  return [
5
23
  pref,
6
24
  useCallback((value) => {
7
- localStorage.setItem(`pref-${key}`, value);
25
+ savePref(key, value);
8
26
  setPref(value);
9
- }, [setPref]),
27
+ }, [key, setPref]),
10
28
  ];
11
29
  }
package/dist/queue/use-queue.d.ts CHANGED
@@ -14,6 +14,7 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
14
14
  tabHashParam?: string;
15
15
  idHashParam?: string;
16
16
  onActivate?: (name: string) => void;
17
+ persistKey?: string;
17
18
  /**
18
19
  * @deprecated Use the `details` property instead. The `api` property will be removed in v2.0.0.
19
20
  *
@@ -38,7 +39,7 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
38
39
  /** @deprecated Use `initial-size` / `min-size` attributes on `<cosmoz-resizable-view>` instead (mapped automatically to the returned `splitAttrs`). */
39
40
  split?: SplitConfig;
40
41
  }
41
- declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, split, ...thru }: Opts<I>) => {
42
+ declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, split, persistKey, ...thru }: Opts<I>) => {
42
43
  tabnav: import("@neovici/cosmoz-tabs/next").Result<{
43
44
  readonly name: "overview";
44
45
  readonly title: string;
package/dist/queue/use-queue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC;AAMhE;;GAEG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,EAC7B,MAAM,CAAC,GAAG,SAAS,EACnB,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,KAClB,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAKhC,CAAC;AAqDH,UAAU,IAAI,CAAC,CAAC,CACf,SACC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACtB,uJAAuJ;IACvJ,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAE,8EASlB,IAAI,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAnGM,MAAM,GAAG,SAAS;qBAgJ3B,KAAK;oBAvBA,MAAM;;;;;;;;;;;;;;;;;;CAqDjB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,IAAI,CAC7B,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,MAAM,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,CAAC;yBAEc,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BArLpB,MAAM,GAAG,SAAS;qBAgJ3B,KAAK;oBAvBA,MAAM;;;;;;;;;;;;;;;;;;;AA4DlB,wBACgD"}
1
+ {"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC;AAOhE;;GAEG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,EAC7B,MAAM,CAAC,GAAG,SAAS,EACnB,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,KAClB,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAKhC,CAAC;AAqDH,UAAU,IAAI,CAAC,CAAC,CACf,SACC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACtB,uJAAuJ;IACvJ,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAE,0FAUlB,IAAI,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BArGM,MAAM,GAAG,SAAS;qBA4I5B,KAAK;oBAfA,MAAM;;;;;;;;;;;;;;;;;;CAqDhB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,IAAI,CAC7B,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,MAAM,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,CAAC;yBAEc,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAzLpB,MAAM,GAAG,SAAS;qBA4I5B,KAAK;oBAfA,MAAM;;;;;;;;;;;;;;;;;;;AA4DjB,wBACgD"}
package/dist/queue/use-queue.js CHANGED
@@ -8,6 +8,7 @@ import useDataNav from './use-data-nav';
8
8
  import useKeyNav from './use-key-nav';
9
9
  import { useListState } from './use-list';
10
10
  import useTabs from './use-tabs';
11
+ import useTabsPref from './use-tabs-pref';
11
12
  import useUpdates from './use-updates';
12
13
  import { getItems, normalizeHeaders } from './util';
13
14
  /**
@@ -32,26 +33,34 @@ const useQNav = ({ id, api, items, ...thru }) => {
32
33
  'See: https://github.com/Neovici/cosmoz-queue#migration-from-api-to-details');
33
34
  }
34
35
  /* eslint-enable no-console, no-template-curly-in-string */
35
- const details = useMemo(() => api && memoize((item) => json(api(id(item), item))), [id, api]), pass = useDataNav(items, {
36
+ const details = useMemo(() => api && memoize((item) => json(api(id(item), item))), [id, api]);
37
+ const pass = useDataNav(items, {
36
38
  ...thru,
37
39
  id,
38
40
  });
39
41
  return { ...pass, id, details };
40
42
  };
41
- const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate, split, ...thru }) => {
42
- const { items: _items, selected } = thru, mobile = useMobile(), items = useMemo(() => normalizeHeaders(_items), [_items]), queueItems = useMemo(() => getItems(items, selected), [items, selected]), { tabnav, activeTab } = useTabs({
43
+ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate, split, persistKey, ...thru }) => {
44
+ const { items: _items, selected } = thru;
45
+ const mobile = useMobile();
46
+ const items = useMemo(() => normalizeHeaders(_items), [_items]);
47
+ const queueItems = useMemo(() => getItems(items, selected), [items, selected]);
48
+ const { tabnav, activeTab } = useTabs({
43
49
  items: queueItems,
44
50
  hashParam: tabHashParam,
45
- fallback,
46
- onActivate,
51
+ ...useTabsPref({ persistKey, fallback, except: 'queue', onActivate }),
47
52
  mobile,
48
- }), nav = useQNav({
53
+ });
54
+ const nav = useQNav({
49
55
  id,
50
56
  api,
51
57
  items: queueItems,
52
58
  hashParam: idHashParam,
53
59
  maintainSelection: ['queue', 'split'].includes(activeTab),
54
- }), splitAttrs = useMemo(() => computeSplitAttrs(split), [split]), { item, setItem } = nav, ensue = useCallback((itemId) => {
60
+ });
61
+ const splitAttrs = useMemo(() => computeSplitAttrs(split), [split]);
62
+ const { item, setItem } = nav;
63
+ const ensue = useCallback((itemId) => {
55
64
  if (id(item) !== itemId) {
56
65
  return;
57
66
  }
@@ -60,6 +69,22 @@ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActiva
60
69
  }, [item, id, items]);
61
70
  useKeyNav({ activeTab, ...nav });
62
71
  useUpdates({ ensue, ...nav });
72
+ const index = useMemo(() => items.indexOf(item), [item, items]);
73
+ const rowPartFn = useRowPartFn(item, id);
74
+ const onItemClick = useCallback((e) => {
75
+ const { item: clickedItem, index, activate: mustActivate, } = e.detail;
76
+ const mini = e
77
+ .composedPath()
78
+ .find((el) => el instanceof Element && el.matches?.('[mini]'));
79
+ const activate = mustActivate ?? (mini ? ['split', 'queue'] : undefined);
80
+ setItem(clickedItem ?? items[index]);
81
+ if (activate) {
82
+ const next = array(activate).find((name) => tabnav.tabs.find((tab) => tab.name === name && !tab.disabled));
83
+ if (next)
84
+ tabnav.activate(next);
85
+ }
86
+ e.preventDefault();
87
+ }, [activeTab, items]);
63
88
  return {
64
89
  ...thru,
65
90
  tabnav,
@@ -67,22 +92,9 @@ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActiva
67
92
  mobile,
68
93
  splitAttrs,
69
94
  hideActions: selected?.length > 0 && activeTab === 'split',
70
- index: useMemo(() => items.indexOf(item), [item, items]),
71
- rowPartFn: useRowPartFn(item, id),
72
- onItemClick: useCallback((e) => {
73
- const { item: clickedItem, index, activate: mustActivate, } = e.detail;
74
- const mini = e
75
- .composedPath()
76
- .find((el) => el instanceof Element && el.matches?.('[mini]'));
77
- const activate = mustActivate ?? (mini ? ['split', 'queue'] : undefined);
78
- setItem(clickedItem ?? items[index]);
79
- if (activate) {
80
- const next = array(activate).find((name) => tabnav.tabs.find((tab) => tab.name === name && !tab.disabled));
81
- if (next)
82
- tabnav.activate(next);
83
- }
84
- e.preventDefault();
85
- }, [activeTab, items]),
95
+ index,
96
+ rowPartFn,
97
+ onItemClick,
86
98
  ensue,
87
99
  nav,
88
100
  };
package/dist/queue/use-tabs-pref.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ interface Opts {
2
+ persistKey?: string;
3
+ fallback?: string;
4
+ except?: string;
5
+ onActivate?: (name: string) => void;
6
+ }
7
+ declare const _default: ({ persistKey, fallback, except, onActivate }: Opts) => {
8
+ fallback: string | undefined;
9
+ onActivate: (name: string) => void;
10
+ };
11
+ export default _default;
12
+ //# sourceMappingURL=use-tabs-pref.d.ts.map
package/dist/queue/use-tabs-pref.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-tabs-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-tabs-pref.ts"],"names":[],"mappings":"AAIA,UAAU,IAAI;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;yBAEe,8CAA8C,IAAI;;uBAQxD,MAAM;;AARhB,wBAeE"}
package/dist/queue/use-tabs-pref.js ADDED
@@ -0,0 +1,12 @@
1
+ import { useCallback } from '@pionjs/pion';
2
+ import { usePref } from './use-pref';
3
+ export default ({ persistKey, fallback, except, onActivate }) => {
4
+ const [stored, setStored] = usePref(persistKey ? `${persistKey}-tab` : undefined);
5
+ return {
6
+ fallback: stored && stored !== except ? stored : fallback,
7
+ onActivate: useCallback((name) => {
8
+ setStored(name);
9
+ onActivate?.(name);
10
+ }, [setStored, onActivate]),
11
+ };
12
+ };
package/dist/styles/shared-styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAiHvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAa/B,CAAC;AAEF,eAAO,MAAM,YAAY,QAoGxB,CAAC"}
1
+ {"version":3,"file":"shared-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAiHvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAa/B,CAAC;AAEF,eAAO,MAAM,YAAY,QAqGxB,CAAC"}
package/dist/styles/shared-styles.js CHANGED
@@ -134,9 +134,10 @@ export const buttonStyles = css `
134
134
  .button:not([slot='bottom-bar-menu']),
135
135
  .file::-webkit-file-upload-button,
136
136
  .file::file-selector-button {
137
- background-color: var(--cz-color-bg-brand-solid);
138
- color: var(--cz-color-text-on-brand);
139
- box-shadow: var(--cz-shadow-xs-skeumorphic);
137
+ background-color: var(--cz-color-bg-action-solid);
138
+ color: var(--cz-color-text-on-action);
139
+ background-image: var(--cz-action-sheen, none);
140
+ box-shadow: var(--cz-shadow-action);
140
141
  box-sizing: border-box;
141
142
  cursor: pointer;
142
143
  outline: none;
@@ -157,7 +158,7 @@ export const buttonStyles = css `
157
158
  .button:not([slot='bottom-bar-menu']):active,
158
159
  .file::-webkit-file-upload-button:hover,
159
160
  .file::file-selector-button:hover {
160
- background-color: var(--cz-color-bg-brand-solid-hover);
161
+ background-color: var(--cz-color-bg-action-solid-hover);
161
162
  }
162
163
  .button[disabled],
163
164
  .button:disabled {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-queue",
3
- "version": "3.5.0",
3
+ "version": "3.7.0",
4
4
  "description": "A reusable queue component for master-detail views with list, split, and queue modes",
5
5
  "keywords": [
6
6
  "web-components",
@@ -53,6 +53,7 @@
53
53
  ".": "./dist/index.js",
54
54
  "./use-queue": "./dist/queue/use-queue.js",
55
55
  "./use-tabs": "./dist/queue/use-tabs.js",
56
+ "./use-tabs-pref": "./dist/queue/use-tabs-pref.js",
56
57
  "./use-data-nav": "./dist/queue/use-data-nav.js",
57
58
  "./use-list": "./dist/queue/use-list.js",
58
59
  "./util/fetch": "./dist/util/fetch/fetch.js",
@@ -70,7 +71,7 @@
70
71
  "@neovici/cosmoz-router": "^11.2.8",
71
72
  "@neovici/cosmoz-slider": "^5.2.1",
72
73
  "@neovici/cosmoz-tabs": "^11.1.0",
73
- "@neovici/cosmoz-tokens": "^3.4.0 || ^4.0.0",
74
+ "@neovici/cosmoz-tokens": "^4.9.0",
74
75
  "@neovici/cosmoz-utils": "^6.22.0",
75
76
  "@pionjs/pion": "^2.10.0",
76
77
  "i18next": ">=23.0.0 <27.0.0",