@openameba/spindle-ui 0.50.1-alpha.2 → 0.51.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.
- package/CHANGELOG.md +22 -0
- package/Pagination/Pagination.d.ts.map +1 -1
- package/Pagination/Pagination.js +8 -6
- package/Pagination/Pagination.js.map +1 -1
- package/Pagination/Pagination.mjs +8 -6
- package/Pagination/hooks/useShowItem.d.ts +2 -2
- package/Pagination/hooks/useShowItem.d.ts.map +1 -1
- package/Pagination/hooks/useShowItem.js +17 -5
- package/Pagination/hooks/useShowItem.js.map +1 -1
- package/Pagination/hooks/useShowItem.mjs +17 -5
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.51.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.50.1...@openameba/spindle-ui@0.51.0) (2022-11-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **spindle-ui:** use spindle-hooks ([69885ba](https://github.com/openameba/spindle/commit/69885bae6c477632bc2a8375ac780ccac022ac7c))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.50.1-alpha.2](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.50.1-alpha.0...@openameba/spindle-ui@0.50.1-alpha.2) (2022-10-28)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -22,6 +33,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
22
33
|
|
|
23
34
|
|
|
24
35
|
|
|
36
|
+
## [0.50.1](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.50.0...@openameba/spindle-ui@0.50.1) (2022-10-27)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### Bug Fixes
|
|
40
|
+
|
|
41
|
+
* **spindle-ui:** pagination style and docs ([a307efb](https://github.com/openameba/spindle/commit/a307efb1c70c700b739afe98336d2a5c2bff06c5))
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
25
47
|
## [0.50.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.50.0...@openameba/spindle-ui@0.50.1-alpha.0) (2022-10-26)
|
|
26
48
|
|
|
27
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACtD,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C;AAID,eAAO,MAAM,UAAU,UAAW,KAAK,
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACtD,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C;AAID,eAAO,MAAM,UAAU,UAAW,KAAK,gBAoJtC,CAAC"}
|
package/Pagination/Pagination.js
CHANGED
|
@@ -56,12 +56,10 @@ var useShowItem_1 = require("./hooks/useShowItem");
|
|
|
56
56
|
var BLOCK_NAME = 'spui-Pagination';
|
|
57
57
|
var Pagination = function (props) {
|
|
58
58
|
var current = props.current, total = props.total, _a = props.showCount, showCount = _a === void 0 ? false : _a, _b = props.showPrevNext, showPrevNext = _b === void 0 ? true : _b, _c = props.showFirstLast, showFirstLast = _c === void 0 ? false : _c, onPageChange = props.onPageChange, createUrl = props.createUrl, className = props.className, rest = __rest(props, ["current", "total", "showCount", "showPrevNext", "showFirstLast", "onPageChange", "createUrl", "className"]);
|
|
59
|
-
var pageItem = 5;
|
|
60
59
|
var _d = (0, useShowItem_1.useShowItem)({
|
|
61
60
|
current: current,
|
|
62
61
|
total: total,
|
|
63
|
-
|
|
64
|
-
}), displayItem = _d.displayItem, showPrevHorizontal = _d.showPrevHorizontal, showNextHorizontal = _d.showNextHorizontal;
|
|
62
|
+
}), displayItem = _d.displayItem, showPrevHorizontal = _d.showPrevHorizontal, showNextHorizontal = _d.showNextHorizontal, hideDisplayItem = _d.hideDisplayItem;
|
|
65
63
|
var handleClick = (0, react_1.useCallback)(function (event, pageNumber) {
|
|
66
64
|
onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(event, pageNumber);
|
|
67
65
|
}, [onPageChange]);
|
|
@@ -73,21 +71,25 @@ var Pagination = function (props) {
|
|
|
73
71
|
react_1.default.createElement(PaginationItem_1.default, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
74
72
|
displayItem.map(function (pageNumber, index) {
|
|
75
73
|
var isCurrent = current === pageNumber;
|
|
74
|
+
var isHidden = showPrevNext &&
|
|
75
|
+
hideDisplayItem &&
|
|
76
|
+
(current - 1 === pageNumber || current + 1 === pageNumber);
|
|
76
77
|
var hasRelAttribute = current === pageNumber + 1;
|
|
77
|
-
var
|
|
78
|
+
var showPrevMenuHorizontal = index === 0 && showPrevHorizontal;
|
|
79
|
+
var showNextMenuHorizontal = index === displayItem.length - 1 && showNextHorizontal;
|
|
78
80
|
return (react_1.default.createElement("li", { className: [
|
|
79
81
|
"".concat(BLOCK_NAME, "-item"),
|
|
80
82
|
isHidden && "".concat(BLOCK_NAME, "-item--hidden"),
|
|
81
83
|
]
|
|
82
84
|
.filter(Boolean)
|
|
83
85
|
.join(' '), key: "pagination-item-".concat(pageNumber) },
|
|
84
|
-
|
|
86
|
+
showNextMenuHorizontal && (react_1.default.createElement(MenuHorizontal_1.default, { "aria-hidden": "true", className: "".concat(BLOCK_NAME, "-horizontal") })),
|
|
85
87
|
react_1.default.createElement("a", { className: "".concat(BLOCK_NAME, "-link"), rel: hasRelAttribute ? undefined : 'nofollow', href: isCurrent ? undefined : createUrl(pageNumber), "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": isCurrent ? true : undefined, onClick: isCurrent
|
|
86
88
|
? undefined
|
|
87
89
|
: function (e) {
|
|
88
90
|
handleClick(e, pageNumber);
|
|
89
91
|
}, "aria-label": "".concat(pageNumber, "\u30DA\u30FC\u30B8\u76EE") }, pageNumber),
|
|
90
|
-
|
|
92
|
+
showPrevMenuHorizontal && (react_1.default.createElement(MenuHorizontal_1.default, { "aria-hidden": "true", className: "".concat(BLOCK_NAME, "-horizontal") }))));
|
|
91
93
|
}),
|
|
92
94
|
showPrevNext && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--next") },
|
|
93
95
|
react_1.default.createElement(PaginationItem_1.default, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA2C;AAC3C,0EAAoD;AAEpD,oEAA8C;AAC9C,mDAAkD;AAelD,IAAM,UAAU,GAAG,iBAAiB,CAAC;AAE9B,IAAM,UAAU,GAAG,UAAC,KAAY;IAEnC,IAAA,OAAO,GASL,KAAK,QATA,EACP,KAAK,GAQH,KAAK,MARF,EACL,KAOE,KAAK,UAPU,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAME,KAAK,aANY,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,KAKE,KAAK,cALc,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,YAAY,GAIV,KAAK,aAJK,EACZ,SAAS,GAGP,KAAK,UAHE,EACT,SAAS,GAEP,KAAK,UAFE,EACN,IAAI,UACL,KAAK,EAVH,4GAUL,CADQ,CACC;
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,11 +5,9 @@ import { useShowItem } from './hooks/useShowItem';
|
|
|
5
5
|
const BLOCK_NAME = 'spui-Pagination';
|
|
6
6
|
export const Pagination = (props) => {
|
|
7
7
|
const { current, total, showCount = false, showPrevNext = true, showFirstLast = false, onPageChange, createUrl, className, ...rest } = props;
|
|
8
|
-
const
|
|
9
|
-
const { displayItem, showPrevHorizontal, showNextHorizontal } = useShowItem({
|
|
8
|
+
const { displayItem, showPrevHorizontal, showNextHorizontal, hideDisplayItem, } = useShowItem({
|
|
10
9
|
current,
|
|
11
10
|
total,
|
|
12
|
-
pageItem,
|
|
13
11
|
});
|
|
14
12
|
const handleClick = useCallback((event, pageNumber) => {
|
|
15
13
|
onPageChange?.(event, pageNumber);
|
|
@@ -22,21 +20,25 @@ export const Pagination = (props) => {
|
|
|
22
20
|
React.createElement(PaginationItem, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
23
21
|
displayItem.map((pageNumber, index) => {
|
|
24
22
|
const isCurrent = current === pageNumber;
|
|
23
|
+
const isHidden = showPrevNext &&
|
|
24
|
+
hideDisplayItem &&
|
|
25
|
+
(current - 1 === pageNumber || current + 1 === pageNumber);
|
|
25
26
|
const hasRelAttribute = current === pageNumber + 1;
|
|
26
|
-
const
|
|
27
|
+
const showPrevMenuHorizontal = index === 0 && showPrevHorizontal;
|
|
28
|
+
const showNextMenuHorizontal = index === displayItem.length - 1 && showNextHorizontal;
|
|
27
29
|
return (React.createElement("li", { className: [
|
|
28
30
|
`${BLOCK_NAME}-item`,
|
|
29
31
|
isHidden && `${BLOCK_NAME}-item--hidden`,
|
|
30
32
|
]
|
|
31
33
|
.filter(Boolean)
|
|
32
34
|
.join(' '), key: `pagination-item-${pageNumber}` },
|
|
33
|
-
|
|
35
|
+
showNextMenuHorizontal && (React.createElement(MenuHorizontal, { "aria-hidden": "true", className: `${BLOCK_NAME}-horizontal` })),
|
|
34
36
|
React.createElement("a", { className: `${BLOCK_NAME}-link`, rel: hasRelAttribute ? undefined : 'nofollow', href: isCurrent ? undefined : createUrl(pageNumber), "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": isCurrent ? true : undefined, onClick: isCurrent
|
|
35
37
|
? undefined
|
|
36
38
|
: (e) => {
|
|
37
39
|
handleClick(e, pageNumber);
|
|
38
40
|
}, "aria-label": `${pageNumber}ページ目` }, pageNumber),
|
|
39
|
-
|
|
41
|
+
showPrevMenuHorizontal && (React.createElement(MenuHorizontal, { "aria-hidden": "true", className: `${BLOCK_NAME}-horizontal` }))));
|
|
40
42
|
}),
|
|
41
43
|
showPrevNext && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--next` },
|
|
42
44
|
React.createElement(PaginationItem, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
declare type Payload = {
|
|
2
2
|
current: number;
|
|
3
3
|
total: number;
|
|
4
|
-
pageItem: number;
|
|
5
4
|
};
|
|
6
|
-
export declare function useShowItem({ current, total
|
|
5
|
+
export declare function useShowItem({ current, total }: Payload): {
|
|
7
6
|
displayItem: number[];
|
|
8
7
|
showPrevHorizontal: boolean;
|
|
9
8
|
showNextHorizontal: boolean;
|
|
9
|
+
hideDisplayItem: boolean;
|
|
10
10
|
};
|
|
11
11
|
export {};
|
|
12
12
|
//# sourceMappingURL=useShowItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShowItem.d.ts","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":"AAEA,aAAK,OAAO,GAAG;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"useShowItem.d.ts","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":"AAEA,aAAK,OAAO,GAAG;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAIF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,OAAO;;;;;EAiCtD"}
|
|
@@ -2,10 +2,15 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useShowItem = void 0;
|
|
4
4
|
var react_1 = require("react");
|
|
5
|
+
var MAX_PAGE_ITEM = 5;
|
|
5
6
|
function useShowItem(_a) {
|
|
6
|
-
var current = _a.current, total = _a.total
|
|
7
|
+
var current = _a.current, total = _a.total;
|
|
7
8
|
var displayItem = (0, react_1.useMemo)(function () {
|
|
8
|
-
if (
|
|
9
|
+
if (total < MAX_PAGE_ITEM) {
|
|
10
|
+
// 総ページ数がMAX_PAGE_ITEMよりも小さい場合
|
|
11
|
+
return Array.from({ length: total }, function (_element, index) { return index + 1; });
|
|
12
|
+
}
|
|
13
|
+
else if (current === 1 || current === 2) {
|
|
9
14
|
// 現在値が1か2の場合は"1,2,3,4,total"とする
|
|
10
15
|
return [1, 2, 3, 4, total];
|
|
11
16
|
}
|
|
@@ -19,10 +24,17 @@ function useShowItem(_a) {
|
|
|
19
24
|
}
|
|
20
25
|
}, [current, total]);
|
|
21
26
|
// totalは表示数超えている前提で、前から2つ目のアイテムが2より大きいかどうか（最初が連続した数字じゃないことをチェック）
|
|
22
|
-
var showPrevHorizontal = total >
|
|
27
|
+
var showPrevHorizontal = total > MAX_PAGE_ITEM && 2 < displayItem[1];
|
|
23
28
|
// totalは表示数超えている前提で、後ろから2つ目のアイテムがtotal-1より小さいか（最後が連続した数字じゃないことをチェック）
|
|
24
|
-
var showNextHorizontal = total >
|
|
25
|
-
|
|
29
|
+
var showNextHorizontal = total > MAX_PAGE_ITEM && displayItem[MAX_PAGE_ITEM - 2] < total - 1;
|
|
30
|
+
// 総ページ数が5件より大きい場合
|
|
31
|
+
var hideDisplayItem = total > MAX_PAGE_ITEM;
|
|
32
|
+
return {
|
|
33
|
+
displayItem: displayItem,
|
|
34
|
+
showPrevHorizontal: showPrevHorizontal,
|
|
35
|
+
showNextHorizontal: showNextHorizontal,
|
|
36
|
+
hideDisplayItem: hideDisplayItem,
|
|
37
|
+
};
|
|
26
38
|
}
|
|
27
39
|
exports.useShowItem = useShowItem;
|
|
28
40
|
//# sourceMappingURL=useShowItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShowItem.js","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":";;;AAAA,+BAAgC;
|
|
1
|
+
{"version":3,"file":"useShowItem.js","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":";;;AAAA,+BAAgC;AAOhC,IAAM,aAAa,GAAG,CAAC,CAAC;AAExB,SAAgB,WAAW,CAAC,EAA2B;QAAzB,OAAO,aAAA,EAAE,KAAK,WAAA;IAC1C,IAAM,WAAW,GAAG,IAAA,eAAO,EAAC;QAC1B,IAAI,KAAK,GAAG,aAAa,EAAE;YACzB,8BAA8B;YAC9B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,QAAQ,EAAE,KAAK,IAAK,OAAA,KAAK,GAAG,CAAC,EAAT,CAAS,CAAC,CAAC;SACtE;aAAM,IAAI,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,EAAE;YACzC,gCAAgC;YAChC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5B;aAAM,IAAI,OAAO,KAAK,KAAK,IAAI,OAAO,KAAK,KAAK,GAAG,CAAC,EAAE;YACrD,2CAA2C;YAC3C,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;SACtD;aAAM;YACL,+CAA+C;YAC/C,OAAO,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,iEAAiE;IACjE,IAAM,kBAAkB,GAAG,KAAK,GAAG,aAAa,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IAEvE,qEAAqE;IACrE,IAAM,kBAAkB,GACtB,KAAK,GAAG,aAAa,IAAI,WAAW,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IAEtE,kBAAkB;IAClB,IAAM,eAAe,GAAG,KAAK,GAAG,aAAa,CAAC;IAE9C,OAAO;QACL,WAAW,aAAA;QACX,kBAAkB,oBAAA;QAClB,kBAAkB,oBAAA;QAClB,eAAe,iBAAA;KAChB,CAAC;AACJ,CAAC;AAjCD,kCAiCC"}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
|
|
2
|
+
const MAX_PAGE_ITEM = 5;
|
|
3
|
+
export function useShowItem({ current, total }) {
|
|
3
4
|
const displayItem = useMemo(() => {
|
|
4
|
-
if (
|
|
5
|
+
if (total < MAX_PAGE_ITEM) {
|
|
6
|
+
// 総ページ数がMAX_PAGE_ITEMよりも小さい場合
|
|
7
|
+
return Array.from({ length: total }, (_element, index) => index + 1);
|
|
8
|
+
}
|
|
9
|
+
else if (current === 1 || current === 2) {
|
|
5
10
|
// 現在値が1か2の場合は"1,2,3,4,total"とする
|
|
6
11
|
return [1, 2, 3, 4, total];
|
|
7
12
|
}
|
|
@@ -15,8 +20,15 @@ export function useShowItem({ current, total, pageItem = 5 }) {
|
|
|
15
20
|
}
|
|
16
21
|
}, [current, total]);
|
|
17
22
|
// totalは表示数超えている前提で、前から2つ目のアイテムが2より大きいかどうか（最初が連続した数字じゃないことをチェック）
|
|
18
|
-
const showPrevHorizontal = total >
|
|
23
|
+
const showPrevHorizontal = total > MAX_PAGE_ITEM && 2 < displayItem[1];
|
|
19
24
|
// totalは表示数超えている前提で、後ろから2つ目のアイテムがtotal-1より小さいか（最後が連続した数字じゃないことをチェック）
|
|
20
|
-
const showNextHorizontal = total >
|
|
21
|
-
|
|
25
|
+
const showNextHorizontal = total > MAX_PAGE_ITEM && displayItem[MAX_PAGE_ITEM - 2] < total - 1;
|
|
26
|
+
// 総ページ数が5件より大きい場合
|
|
27
|
+
const hideDisplayItem = total > MAX_PAGE_ITEM;
|
|
28
|
+
return {
|
|
29
|
+
displayItem,
|
|
30
|
+
showPrevHorizontal,
|
|
31
|
+
showNextHorizontal,
|
|
32
|
+
hideDisplayItem,
|
|
33
|
+
};
|
|
22
34
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openameba/spindle-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"module": "./index.mjs",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@openameba/spindle-hooks": "^0.
|
|
54
|
+
"@openameba/spindle-hooks": "^0.11.0",
|
|
55
55
|
"ameba-color-palette.css": "^4.8.0",
|
|
56
56
|
"react-merge-refs": "^1.1.0"
|
|
57
57
|
},
|
|
@@ -95,5 +95,5 @@
|
|
|
95
95
|
"ts-jest": "28.0.8",
|
|
96
96
|
"webpack": "^5.73.0"
|
|
97
97
|
},
|
|
98
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "74f01b42b5d3cdc01bd5a7eddce6305019050d62"
|
|
99
99
|
}
|