@propeller-commerce/propeller-v2-react-ui 0.8.0 → 0.9.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 +14 -0
- package/dist/index.cjs +31 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +31 -31
- package/dist/index.js.map +1 -1
- package/dist/pure.cjs +4 -4
- package/dist/pure.cjs.map +1 -1
- package/dist/pure.d.cts +2 -2
- package/dist/pure.d.ts +2 -2
- package/dist/pure.js +4 -4
- package/dist/pure.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,20 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
|
|
|
8
8
|
between minor versions; breaking changes are called out below and in
|
|
9
9
|
[MIGRATION.md](./MIGRATION.md).
|
|
10
10
|
|
|
11
|
+
## [0.9.0] - 2026-07-29
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- **Align with `@propeller-commerce/propeller-sdk-v2` 0.14.0**, which removed the
|
|
16
|
+
entire deprecated schema surface. Category reads move to the plural localized
|
|
17
|
+
arrays — `Breadcrumbs` (`category.names` / `slugs`), `CategoryDescription`
|
|
18
|
+
(`descriptions`), `CategoryShortDescription` (`shortDescriptions`) — and the
|
|
19
|
+
hand-written menu query in `useMenu` now selects `names(language:)` /
|
|
20
|
+
`slugs(language:)`. `useClusterConfigurator` / `useProductInfo` read
|
|
21
|
+
`ClusterConfigSetting.attributeName` and `uuid` (were `name` / `id`); the
|
|
22
|
+
public `ConfiguredSetting.id` is now a `string`. Bumped the SDK dev dependency
|
|
23
|
+
to `^0.14.0` and `propeller-v2-core-ui` to `^0.4.0`; the runtime peer stays `*`.
|
|
24
|
+
|
|
11
25
|
## [0.8.0] - 2026-07-28
|
|
12
26
|
|
|
13
27
|
### Added
|
package/dist/index.cjs
CHANGED
|
@@ -1127,7 +1127,7 @@ function useClusterConfigurator(options) {
|
|
|
1127
1127
|
const previousSelections = {};
|
|
1128
1128
|
for (let i = 0; i < settingIndex; i++) {
|
|
1129
1129
|
const prev = sortedSettings[i];
|
|
1130
|
-
if (selections[prev.
|
|
1130
|
+
if (selections[prev.attributeName]) previousSelections[prev.attributeName] = selections[prev.attributeName];
|
|
1131
1131
|
}
|
|
1132
1132
|
const matching = propellerV2CoreUi.filterProductsBySelections(products, previousSelections);
|
|
1133
1133
|
return propellerV2CoreUi.collectAttributeValues(matching, attributeName);
|
|
@@ -1136,43 +1136,43 @@ function useClusterConfigurator(options) {
|
|
|
1136
1136
|
const sortedSettings = getSortedSettings();
|
|
1137
1137
|
const sel = selectedAttributes;
|
|
1138
1138
|
return sortedSettings.map((setting, index) => {
|
|
1139
|
-
const availableValues = getAvailableValuesForIndexWithSelections(setting.
|
|
1140
|
-
const selectedValue = sel[setting.
|
|
1141
|
-
const isPreviousMissing = index > 0 && sortedSettings.slice(0, index).some((prev) => !sel[prev.
|
|
1139
|
+
const availableValues = getAvailableValuesForIndexWithSelections(setting.attributeName, index, sel);
|
|
1140
|
+
const selectedValue = sel[setting.attributeName] || "";
|
|
1141
|
+
const isPreviousMissing = index > 0 && sortedSettings.slice(0, index).some((prev) => !sel[prev.attributeName]);
|
|
1142
1142
|
const isDisabled = availableValues.length === 0 || isPreviousMissing;
|
|
1143
|
-
let displayName = setting.
|
|
1143
|
+
let displayName = setting.attributeName;
|
|
1144
1144
|
let attributeType;
|
|
1145
1145
|
for (const product of products) {
|
|
1146
1146
|
const items = product.attributes?.items;
|
|
1147
1147
|
if (!items) continue;
|
|
1148
|
-
const match = items.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.
|
|
1148
|
+
const match = items.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.attributeName));
|
|
1149
1149
|
if (!match) continue;
|
|
1150
|
-
displayName = propellerV2CoreUi.getAttributeDisplayName(match, language) || setting.
|
|
1150
|
+
displayName = propellerV2CoreUi.getAttributeDisplayName(match, language) || setting.attributeName;
|
|
1151
1151
|
attributeType = match.attributeDescription?.type ?? void 0;
|
|
1152
1152
|
break;
|
|
1153
1153
|
}
|
|
1154
|
-
return { id: setting.
|
|
1154
|
+
return { id: setting.uuid, name: setting.attributeName, displayType: setting.displayType, attributeType, priority: setting.priority, displayName, availableValues, selectedValue, disabled: isDisabled };
|
|
1155
1155
|
});
|
|
1156
1156
|
}, [products, config, selectedAttributes, language]);
|
|
1157
1157
|
const handleAttributeSelect = React6.useCallback(
|
|
1158
1158
|
(settingName, value) => {
|
|
1159
1159
|
const sortedSettings = getSortedSettings();
|
|
1160
|
-
const changedIndex = sortedSettings.findIndex((s) => s.
|
|
1160
|
+
const changedIndex = sortedSettings.findIndex((s) => s.attributeName === settingName);
|
|
1161
1161
|
if (changedIndex < 0) return;
|
|
1162
1162
|
const newSelections = { ...selectedAttributes };
|
|
1163
1163
|
newSelections[settingName] = value;
|
|
1164
|
-
for (let i = changedIndex + 1; i < sortedSettings.length; i++) delete newSelections[sortedSettings[i].
|
|
1164
|
+
for (let i = changedIndex + 1; i < sortedSettings.length; i++) delete newSelections[sortedSettings[i].attributeName];
|
|
1165
1165
|
for (let i = changedIndex + 1; i < sortedSettings.length; i++) {
|
|
1166
1166
|
const next = sortedSettings[i];
|
|
1167
|
-
const available = getAvailableValuesForIndexWithSelections(next.
|
|
1167
|
+
const available = getAvailableValuesForIndexWithSelections(next.attributeName, i, newSelections);
|
|
1168
1168
|
if (available.length > 0) {
|
|
1169
|
-
newSelections[next.
|
|
1169
|
+
newSelections[next.attributeName] = available[0];
|
|
1170
1170
|
} else {
|
|
1171
1171
|
break;
|
|
1172
1172
|
}
|
|
1173
1173
|
}
|
|
1174
1174
|
setSelectedAttributes(newSelections);
|
|
1175
|
-
const allSelected = sortedSettings.every((s) => !!newSelections[s.
|
|
1175
|
+
const allSelected = sortedSettings.every((s) => !!newSelections[s.attributeName]);
|
|
1176
1176
|
if (allSelected) {
|
|
1177
1177
|
const matching = propellerV2CoreUi.filterProductsBySelections(products, newSelections);
|
|
1178
1178
|
if (matching.length > 0 && onConfigurationChange) onConfigurationChange(matching[0]);
|
|
@@ -1188,15 +1188,15 @@ function useClusterConfigurator(options) {
|
|
|
1188
1188
|
if (!attrItems) return;
|
|
1189
1189
|
const initial = {};
|
|
1190
1190
|
for (const setting of sortedSettings) {
|
|
1191
|
-
const match = attrItems.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.
|
|
1191
|
+
const match = attrItems.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.attributeName));
|
|
1192
1192
|
if (match) {
|
|
1193
1193
|
const values = propellerV2CoreUi.extractAttributeValues(match);
|
|
1194
|
-
if (values.length) initial[setting.
|
|
1194
|
+
if (values.length) initial[setting.attributeName] = values[0];
|
|
1195
1195
|
}
|
|
1196
1196
|
}
|
|
1197
1197
|
if (!Object.keys(initial).length) return;
|
|
1198
1198
|
setSelectedAttributes(initial);
|
|
1199
|
-
const allSelected = sortedSettings.every((s) => !!initial[s.
|
|
1199
|
+
const allSelected = sortedSettings.every((s) => !!initial[s.attributeName]);
|
|
1200
1200
|
if (allSelected && onConfigurationChange) {
|
|
1201
1201
|
const matching = propellerV2CoreUi.filterProductsBySelections(products, initial);
|
|
1202
1202
|
if (matching.length > 0) onConfigurationChange(matching[0]);
|
|
@@ -1532,15 +1532,15 @@ function buildCategoriesQuery(depth) {
|
|
|
1532
1532
|
categories {
|
|
1533
1533
|
categoryId
|
|
1534
1534
|
hidden
|
|
1535
|
-
|
|
1536
|
-
|
|
1535
|
+
names(language: $language) { value language }
|
|
1536
|
+
slugs(language: $language) { value }
|
|
1537
1537
|
${buildCategoriesQuery(depth - 1)}
|
|
1538
1538
|
}
|
|
1539
1539
|
`;
|
|
1540
1540
|
}
|
|
1541
1541
|
function mapCategory(raw, language) {
|
|
1542
|
-
const nameEntry = raw.
|
|
1543
|
-
const slugEntry = raw.
|
|
1542
|
+
const nameEntry = raw.names?.find((n) => n.language === language) ?? raw.names?.[0];
|
|
1543
|
+
const slugEntry = raw.slugs?.[0];
|
|
1544
1544
|
return {
|
|
1545
1545
|
categoryId: raw.categoryId,
|
|
1546
1546
|
name: nameEntry?.value ?? "",
|
|
@@ -1620,8 +1620,8 @@ function useMenu(options) {
|
|
|
1620
1620
|
category(categoryId: $categoryId) {
|
|
1621
1621
|
categoryId
|
|
1622
1622
|
hidden
|
|
1623
|
-
|
|
1624
|
-
|
|
1623
|
+
names(language: $language) { value language }
|
|
1624
|
+
slugs(language: $language) { value }
|
|
1625
1625
|
${buildCategoriesQuery(depth)}
|
|
1626
1626
|
}
|
|
1627
1627
|
}
|
|
@@ -2080,7 +2080,7 @@ function useProductInfo(options) {
|
|
|
2080
2080
|
const service = propellerV2CoreUi.createServices(graphqlClient).cluster;
|
|
2081
2081
|
const clusterConfig = await service.getClusterConfig(clusterId);
|
|
2082
2082
|
const attributeNames = (clusterConfig?.config?.settings ?? []).map(
|
|
2083
|
-
(setting) => setting.
|
|
2083
|
+
(setting) => setting.attributeName
|
|
2084
2084
|
);
|
|
2085
2085
|
const variables = {
|
|
2086
2086
|
clusterId,
|
|
@@ -6175,8 +6175,8 @@ function Breadcrumbs(props) {
|
|
|
6175
6175
|
}
|
|
6176
6176
|
const displayItems = props.showCurrent === false && items.length > 0 ? items.slice(0, items.length - 1) : items;
|
|
6177
6177
|
function getCategoryName(cat) {
|
|
6178
|
-
const match = cat.
|
|
6179
|
-
return match?.value || cat.
|
|
6178
|
+
const match = cat.names?.find((n) => n.language === lang);
|
|
6179
|
+
return match?.value || cat.names?.[0]?.value || "";
|
|
6180
6180
|
}
|
|
6181
6181
|
function getCategoryUrl(cat, index) {
|
|
6182
6182
|
if (props.getUrl) return props.getUrl(cat, index);
|
|
@@ -6184,7 +6184,7 @@ function Breadcrumbs(props) {
|
|
|
6184
6184
|
if (urls && typeof urls.getCategoryUrl === "function") {
|
|
6185
6185
|
return urls.getCategoryUrl(cat, props.language);
|
|
6186
6186
|
}
|
|
6187
|
-
const slug = cat.
|
|
6187
|
+
const slug = cat.slugs?.find((s) => s.language === lang)?.value || cat.slugs?.[0]?.value || "";
|
|
6188
6188
|
return `/category/${cat.categoryId}/${slug}`;
|
|
6189
6189
|
}
|
|
6190
6190
|
function isCurrentItem(index) {
|
|
@@ -7874,7 +7874,7 @@ function CartSummary(rawProps) {
|
|
|
7874
7874
|
var CartSummary_default = CartSummary;
|
|
7875
7875
|
function CategoryDescription(props) {
|
|
7876
7876
|
const [expanded, setExpanded] = React6.useState(false);
|
|
7877
|
-
const match = props.category?.
|
|
7877
|
+
const match = props.category?.descriptions?.find(
|
|
7878
7878
|
(d) => d.language === props.language
|
|
7879
7879
|
);
|
|
7880
7880
|
const html = match?.value || "";
|
|
@@ -7915,7 +7915,7 @@ function CategoryDescription(props) {
|
|
|
7915
7915
|
}
|
|
7916
7916
|
var CategoryDescription_default = CategoryDescription;
|
|
7917
7917
|
function CategoryShortDescription(props) {
|
|
7918
|
-
const match = props.category?.
|
|
7918
|
+
const match = props.category?.shortDescriptions?.find(
|
|
7919
7919
|
(d) => d.language === props.language
|
|
7920
7920
|
);
|
|
7921
7921
|
const html = match?.value || "";
|
|
@@ -12808,7 +12808,7 @@ function Menu(rawProps) {
|
|
|
12808
12808
|
const lang = props.language || "NL";
|
|
12809
12809
|
const category = {
|
|
12810
12810
|
categoryId: cat.categoryId,
|
|
12811
|
-
|
|
12811
|
+
slugs: [{ value: cat.slug, language: lang }]
|
|
12812
12812
|
};
|
|
12813
12813
|
if (props.getUrl) return props.getUrl(category);
|
|
12814
12814
|
return props.configuration.urls.getCategoryUrl(category, lang);
|
|
@@ -12822,8 +12822,8 @@ function Menu(rawProps) {
|
|
|
12822
12822
|
const lang = props.language || "NL";
|
|
12823
12823
|
props.onMenuItemClick({
|
|
12824
12824
|
categoryId: cat.categoryId,
|
|
12825
|
-
|
|
12826
|
-
|
|
12825
|
+
names: [{ value: cat.name, language: lang }],
|
|
12826
|
+
slugs: [{ value: cat.slug, language: lang }]
|
|
12827
12827
|
});
|
|
12828
12828
|
}
|
|
12829
12829
|
}
|