@shoplflow/base 0.42.21 → 0.42.23
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/dist/index.cjs +9 -5
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +9 -5
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -792,9 +792,11 @@ var checkMaxHeight = (height, viewport) => {
|
|
|
792
792
|
return height - topBottomMargin;
|
|
793
793
|
};
|
|
794
794
|
var Container = styled6__default.default.div`
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
795
|
+
${({ hasChangeAnimation }) => hasChangeAnimation && react$1.css`
|
|
796
|
+
transition:
|
|
797
|
+
width 0.3s ease-in-out,
|
|
798
|
+
max-width 0.3s ease-in-out;
|
|
799
|
+
`}
|
|
798
800
|
display: flex;
|
|
799
801
|
flex-direction: column;
|
|
800
802
|
border-radius: ${exports.borderRadiusTokens.borderRadius08};
|
|
@@ -1295,7 +1297,7 @@ var StyledSwitch = styled6__default.default.input`
|
|
|
1295
1297
|
position: relative;
|
|
1296
1298
|
display: flex;
|
|
1297
1299
|
align-items: center;
|
|
1298
|
-
background: ${exports.colorTokens.neutral350};
|
|
1300
|
+
background: ${({ sizeVar }) => sizeVar === "M" ? exports.colorTokens.neutral350 : exports.colorTokens.neutral400};
|
|
1299
1301
|
padding: 2px;
|
|
1300
1302
|
margin: 0;
|
|
1301
1303
|
|
|
@@ -4793,6 +4795,8 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
|
|
|
4793
4795
|
handleToggleSelect(value);
|
|
4794
4796
|
setPageSize(value);
|
|
4795
4797
|
};
|
|
4798
|
+
const currentItem = selectedItem || data.find((item) => item.value === pageSize);
|
|
4799
|
+
const displayLabel = currentItem ? currentItem.label : String(pageSize);
|
|
4796
4800
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4797
4801
|
exports.Dropdown,
|
|
4798
4802
|
{
|
|
@@ -4803,7 +4807,7 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
|
|
|
4803
4807
|
{
|
|
4804
4808
|
placeholder: String(pageSize),
|
|
4805
4809
|
sizeVar: "S",
|
|
4806
|
-
value:
|
|
4810
|
+
value: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral400", children: displayLabel })
|
|
4807
4811
|
}
|
|
4808
4812
|
),
|
|
4809
4813
|
popper: /* @__PURE__ */ jsxRuntime.jsx(exports.Dropdown.Content, { type: "FILL", children: data.map((item) => {
|
package/dist/index.d.cts
CHANGED
|
@@ -475,6 +475,7 @@ declare const ModalSize: {
|
|
|
475
475
|
declare type ModalSizeType = $Values<typeof ModalSize>;
|
|
476
476
|
interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
|
|
477
477
|
children?: React.ReactNode | React.ReactNode[];
|
|
478
|
+
hasChangeAnimation?: boolean;
|
|
478
479
|
}
|
|
479
480
|
interface ModalContainerOptionProps {
|
|
480
481
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -475,6 +475,7 @@ declare const ModalSize: {
|
|
|
475
475
|
declare type ModalSizeType = $Values<typeof ModalSize>;
|
|
476
476
|
interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
|
|
477
477
|
children?: React.ReactNode | React.ReactNode[];
|
|
478
|
+
hasChangeAnimation?: boolean;
|
|
478
479
|
}
|
|
479
480
|
interface ModalContainerOptionProps {
|
|
480
481
|
/**
|
package/dist/index.js
CHANGED
|
@@ -765,9 +765,11 @@ var checkMaxHeight = (height, viewport) => {
|
|
|
765
765
|
return height - topBottomMargin;
|
|
766
766
|
};
|
|
767
767
|
var Container = styled6.div`
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
768
|
+
${({ hasChangeAnimation }) => hasChangeAnimation && css`
|
|
769
|
+
transition:
|
|
770
|
+
width 0.3s ease-in-out,
|
|
771
|
+
max-width 0.3s ease-in-out;
|
|
772
|
+
`}
|
|
771
773
|
display: flex;
|
|
772
774
|
flex-direction: column;
|
|
773
775
|
border-radius: ${borderRadiusTokens.borderRadius08};
|
|
@@ -1268,7 +1270,7 @@ var StyledSwitch = styled6.input`
|
|
|
1268
1270
|
position: relative;
|
|
1269
1271
|
display: flex;
|
|
1270
1272
|
align-items: center;
|
|
1271
|
-
background: ${colorTokens.neutral350};
|
|
1273
|
+
background: ${({ sizeVar }) => sizeVar === "M" ? colorTokens.neutral350 : colorTokens.neutral400};
|
|
1272
1274
|
padding: 2px;
|
|
1273
1275
|
margin: 0;
|
|
1274
1276
|
|
|
@@ -4766,6 +4768,8 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
|
|
|
4766
4768
|
handleToggleSelect(value);
|
|
4767
4769
|
setPageSize(value);
|
|
4768
4770
|
};
|
|
4771
|
+
const currentItem = selectedItem || data.find((item) => item.value === pageSize);
|
|
4772
|
+
const displayLabel = currentItem ? currentItem.label : String(pageSize);
|
|
4769
4773
|
return /* @__PURE__ */ jsx(
|
|
4770
4774
|
Dropdown_default,
|
|
4771
4775
|
{
|
|
@@ -4776,7 +4780,7 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
|
|
|
4776
4780
|
{
|
|
4777
4781
|
placeholder: String(pageSize),
|
|
4778
4782
|
sizeVar: "S",
|
|
4779
|
-
value:
|
|
4783
|
+
value: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", color: "neutral400", children: displayLabel })
|
|
4780
4784
|
}
|
|
4781
4785
|
),
|
|
4782
4786
|
popper: /* @__PURE__ */ jsx(Dropdown_default.Content, { type: "FILL", children: data.map((item) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shoplflow/base",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.23",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"react-dom": "^18.2.0",
|
|
92
92
|
"simplebar-react": "^3.2.6",
|
|
93
93
|
"@shoplflow/hada-assets": "^0.1.8",
|
|
94
|
-
"@shoplflow/shopl-assets": "^0.12.
|
|
94
|
+
"@shoplflow/shopl-assets": "^0.12.26",
|
|
95
95
|
"@shoplflow/utils": "^0.7.0"
|
|
96
96
|
},
|
|
97
97
|
"scripts": {
|