@shopgate/engage 7.32.0-beta.1 → 7.32.0-beta.2
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/README.md +0 -1
- package/admin-preview/constants/index.d.ts +10 -1
- package/admin-preview/constants/index.d.ts.map +1 -1
- package/admin-preview/constants/index.js +14 -5
- package/admin-preview/detection.d.ts +49 -0
- package/admin-preview/detection.d.ts.map +1 -0
- package/admin-preview/detection.js +166 -0
- package/admin-preview/helpers/index.d.ts.map +1 -1
- package/admin-preview/helpers/index.js +4 -4
- package/cart/components/CartItem/CartItemProductProvider.connector.js +0 -2
- package/cart/components/CartItem/CartItemProductProvider.js +3 -30
- package/cart/components/CartItem/CartItemProductProvider.types.js +0 -1
- package/cart/components/PaymentBar/PaymentBarContent.js +1 -1
- package/components/Logo/index.d.ts.map +1 -1
- package/components/Logo/index.js +3 -6
- package/components/PickerUtilize/index.d.ts +2 -1
- package/components/PickerUtilize/index.d.ts.map +1 -1
- package/components/View/components/Above/index.d.ts.map +1 -1
- package/components/View/components/Above/index.js +3 -1
- package/components/View/components/Below/index.d.ts.map +1 -1
- package/components/View/components/Below/index.js +3 -1
- package/components/View/components/Content/index.d.ts +2 -1
- package/components/View/components/Content/index.d.ts.map +1 -1
- package/components/v2/ButtonBase/Ripple.d.ts +2 -1
- package/components/v2/ButtonBase/Ripple.d.ts.map +1 -1
- package/development/components/SimulatedInsets/SimulatedInsetBottom.js +3 -3
- package/development/components/SimulatedInsets/SimulatedInsetTop.js +2 -2
- package/favorites/components/Item/Item.js +5 -2
- package/favorites/components/Lists/Lists.js +13 -1
- package/locations/components/FulfillmentSheet/FulfillmentSheetContent.js +4 -8
- package/locations/components/FulfillmentSlotSwitcher/FulfillmentSlotSwitcherBar.js +1 -5
- package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js +1 -5
- package/package.json +11 -11
- package/product/components/FilterBar/components/Content/components/FilterButton/index.js +2 -6
- package/product/components/FilterBar/components/Content/components/Sort/index.js +1 -5
- package/product/components/ProductName/ProductName.d.ts +1 -1
- package/product/components/ProductName/ProductName.d.ts.map +1 -1
- package/product/components/ProductName/ProductNameContent.d.ts +2 -1
- package/product/components/ProductName/ProductNameContent.d.ts.map +1 -1
- package/product/components/ProductRatingStars/ProductRatingStars.d.ts +1 -1
- package/product/components/RelationsSlider/RelationsSheet.js +1 -5
- package/product/components/UnitQuantityPicker/UnitQuantityPicker.js +1 -1
- package/styles/index.d.ts +1 -1
- package/styles/index.d.ts.map +1 -1
- package/styles/index.js +1 -1
- package/styles/theme/createTheme/createComponents.d.ts +2 -2
- package/styles/theme/createTheme/createComponents.d.ts.map +1 -1
- package/styles/theme/createTheme/createComponents.js +0 -1
- package/styles/theme/createTheme/createComponents.types.d.ts +20 -0
- package/styles/theme/createTheme/createComponents.types.d.ts.map +1 -1
- package/styles/theme/createTheme/createComponents.types.js +20 -0
- package/styles/theme/createTheme/createSpacing.js +4 -1
- package/styles/theme/createTheme/createThemeFromColorScheme.d.ts +2 -2
- package/styles/theme/createTheme/createThemeFromColorScheme.d.ts.map +1 -1
- package/styles/theme/createTheme/index.d.ts.map +1 -1
- package/styles/theme/createTheme/index.js +2 -1
- package/styles/theme/createTheme/layout.d.ts +23 -0
- package/styles/theme/createTheme/layout.d.ts.map +1 -0
- package/styles/theme/createTheme/layout.js +20 -0
- package/styles/theme/createTheme/transitions.d.ts +4 -0
- package/styles/theme/createTheme/transitions.js +3 -1
- package/styles/theme/createTheme/types.d.ts +25 -4
- package/styles/theme/createTheme/types.d.ts.map +1 -1
- package/styles/theme/createTheme/types.js +8 -1
- package/styles/theme/hocs/index.d.ts +2 -0
- package/styles/theme/hocs/index.d.ts.map +1 -0
- package/styles/theme/hocs/index.js +1 -0
- package/styles/theme/hocs/withTheme.d.ts +21 -0
- package/styles/theme/hocs/withTheme.d.ts.map +1 -0
- package/styles/theme/hocs/withTheme.js +33 -0
- package/styles/theme/index.d.ts +1 -0
- package/styles/theme/index.d.ts.map +1 -1
- package/styles/theme/index.js +2 -1
- package/styles/theme/providers/ActiveBreakpointProvider.d.ts +1 -1
- package/styles/theme/providers/ThemeProvider.d.ts +3 -3
- package/styles/theme/providers/ThemeProvider.d.ts.map +1 -1
- package/styles/theme/providers/ThemeProvider.js +10 -14
|
@@ -9,7 +9,7 @@ import updateFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions
|
|
|
9
9
|
import removeFavoritesList from '@shopgate/pwa-common-commerce/favorites/actions/removeFavoritesList';
|
|
10
10
|
import { removeFavorites } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
|
|
11
11
|
import addProductsToCart from '@shopgate/pwa-common-commerce/cart/actions/addProductsToCart';
|
|
12
|
-
import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE } from '@shopgate/engage/locations';
|
|
12
|
+
import { FulfillmentSheet, MULTI_LINE_RESERVE, STAGE_SELECT_STORE, DIRECT_SHIP } from '@shopgate/engage/locations';
|
|
13
13
|
import { openSheet } from '@shopgate/engage/locations/providers/FulfillmentProvider';
|
|
14
14
|
import { getWishlistMode } from '@shopgate/engage/settings/selectors/shopSettings';
|
|
15
15
|
import { WISHLIST_MODE_PERSIST_ON_ADD } from '@shopgate/engage/settings/constants/shopSettings';
|
|
@@ -174,6 +174,18 @@ const FavoriteLists = ({
|
|
|
174
174
|
[activeFulfillmentMethod] = availableFulfillmentMethods;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
+
// Direct ship needs neither a location nor an explicit method selection. When it's the only
|
|
178
|
+
// available fulfillment method for the product, add straight to the cart without prompting
|
|
179
|
+
// the user with the fulfillment method chooser.
|
|
180
|
+
if (!activeFulfillmentMethod && availableFulfillmentMethods.length === 1 && availableFulfillmentMethods[0] === DIRECT_SHIP) {
|
|
181
|
+
addToCart([{
|
|
182
|
+
productId: product.id,
|
|
183
|
+
quantity
|
|
184
|
+
}]);
|
|
185
|
+
promiseRef.current.resolve();
|
|
186
|
+
return promise;
|
|
187
|
+
}
|
|
188
|
+
|
|
177
189
|
// If all options are already configured immediately add it to the cart.
|
|
178
190
|
if (activeFulfillmentMethod && activeLocation) {
|
|
179
191
|
addToCart([{
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
|
|
4
|
-
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
|
|
5
4
|
import { FulfillmentContext } from "../../locations.context";
|
|
6
5
|
import { STAGE_SELECT_STORE, STAGE_RESERVE_FORM, STAGE_RESPONSE_SUCCESS, STAGE_RESPONSE_ERROR, STAGE_FULFILLMENT_METHOD } from "../../constants";
|
|
7
6
|
import SheetDrawer from "../../../components/SheetDrawer";
|
|
@@ -10,19 +9,16 @@ import { ReserveForm } from "../ReserveForm";
|
|
|
10
9
|
import { ReservationSuccess, ReservationError } from "../ReservationResponses";
|
|
11
10
|
import { FulfillmentPath } from "../FulfillmentPath";
|
|
12
11
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
const {
|
|
14
|
-
variables
|
|
15
|
-
} = themeConfig;
|
|
16
|
-
const useStyles = makeStyles()({
|
|
12
|
+
const useStyles = makeStyles()(theme => ({
|
|
17
13
|
sheet: {
|
|
18
|
-
maxHeight: `calc(var(--vh-100, 100vh) - ${
|
|
14
|
+
maxHeight: `calc(var(--vh-100, 100vh) - ${theme.components.navigator.height})`,
|
|
19
15
|
[responsiveMediaQuery('>sm', {
|
|
20
16
|
webOnly: true
|
|
21
17
|
})]: {
|
|
22
|
-
maxHeight: `calc(var(--vh-80, 80vh) - ${
|
|
18
|
+
maxHeight: `calc(var(--vh-80, 80vh) - ${theme.components.navigator.height})`
|
|
23
19
|
}
|
|
24
20
|
}
|
|
25
|
-
});
|
|
21
|
+
}));
|
|
26
22
|
|
|
27
23
|
/**
|
|
28
24
|
* Renders the content of the fulfillment sheet.
|
|
@@ -3,12 +3,8 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { RippleButton, I18n, Typography } from '@shopgate/engage/components';
|
|
4
4
|
import { i18n } from '@shopgate/engage/core/helpers';
|
|
5
5
|
import { makeStyles } from '@shopgate/engage/styles';
|
|
6
|
-
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
|
|
7
6
|
import { getTimeSlotDisplayText } from "./time";
|
|
8
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
const {
|
|
10
|
-
variables
|
|
11
|
-
} = themeConfig;
|
|
12
8
|
const useStyles = makeStyles()(theme => ({
|
|
13
9
|
wrapper: {
|
|
14
10
|
color: theme.palette.text.primary,
|
|
@@ -20,7 +16,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
20
16
|
margin: theme.spacing(0, 2),
|
|
21
17
|
borderBottom: `1px solid ${theme.components.border.light}`,
|
|
22
18
|
alignItems: 'center',
|
|
23
|
-
height:
|
|
19
|
+
height: theme.components.filterBar.height
|
|
24
20
|
},
|
|
25
21
|
innerStandalone: {
|
|
26
22
|
borderBottom: 'none'
|
|
@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { RippleButton, I18n, Typography } from '@shopgate/engage/components';
|
|
4
4
|
import { i18n } from '@shopgate/engage/core/helpers';
|
|
5
5
|
import { makeStyles } from '@shopgate/engage/styles';
|
|
6
|
-
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
|
|
7
6
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
const {
|
|
9
|
-
variables
|
|
10
|
-
} = themeConfig;
|
|
11
7
|
const useStyles = makeStyles()(theme => ({
|
|
12
8
|
wrapper: {
|
|
13
9
|
color: theme.palette.text.primary,
|
|
@@ -19,7 +15,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
19
15
|
margin: theme.spacing(0, 2),
|
|
20
16
|
borderBottom: `1px solid ${theme.components.border.light}`,
|
|
21
17
|
alignItems: 'center',
|
|
22
|
-
height:
|
|
18
|
+
height: theme.components.filterBar.height
|
|
23
19
|
},
|
|
24
20
|
innerStandalone: {
|
|
25
21
|
borderBottom: 'none'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/engage",
|
|
3
|
-
"version": "7.32.0-beta.
|
|
3
|
+
"version": "7.32.0-beta.2",
|
|
4
4
|
"description": "Shopgate's ENGAGE library.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@emotion/react": "^11.14.0",
|
|
20
20
|
"@shopgate/native-modules": "1.0.0-beta.25",
|
|
21
|
-
"@shopgate/pwa-common": "7.32.0-beta.
|
|
22
|
-
"@shopgate/pwa-common-commerce": "7.32.0-beta.
|
|
23
|
-
"@shopgate/pwa-core": "7.32.0-beta.
|
|
24
|
-
"@shopgate/pwa-ui-ios": "7.32.0-beta.
|
|
25
|
-
"@shopgate/pwa-ui-material": "7.32.0-beta.
|
|
26
|
-
"@shopgate/pwa-ui-shared": "7.32.0-beta.
|
|
21
|
+
"@shopgate/pwa-common": "7.32.0-beta.2",
|
|
22
|
+
"@shopgate/pwa-common-commerce": "7.32.0-beta.2",
|
|
23
|
+
"@shopgate/pwa-core": "7.32.0-beta.2",
|
|
24
|
+
"@shopgate/pwa-ui-ios": "7.32.0-beta.2",
|
|
25
|
+
"@shopgate/pwa-ui-material": "7.32.0-beta.2",
|
|
26
|
+
"@shopgate/pwa-ui-shared": "7.32.0-beta.2",
|
|
27
27
|
"@stripe/react-stripe-js": "^1.16.5",
|
|
28
28
|
"@stripe/stripe-js": "^1.44.1",
|
|
29
29
|
"@virtuous/conductor": "~2.5.0",
|
|
30
30
|
"color": "^4.2.3",
|
|
31
31
|
"focus-trap-react": "^10.3.1",
|
|
32
|
-
"immer": "^11.1.
|
|
32
|
+
"immer": "^11.1.11",
|
|
33
33
|
"intersection-observer": "^0.6.0",
|
|
34
34
|
"leaflet": "^1.8.0",
|
|
35
35
|
"leaflet-gesture-handling": "^1.2.2",
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
"moment": "^2.30.1",
|
|
38
38
|
"react-helmet": "^6.1.0",
|
|
39
39
|
"react-leaflet": "^3.2.5",
|
|
40
|
-
"react-phone-number-input": "^3.4.
|
|
40
|
+
"react-phone-number-input": "^3.4.17",
|
|
41
41
|
"react-player": "1.11.0",
|
|
42
42
|
"react-portal": "^3.1.0",
|
|
43
43
|
"react-scroll-parallax": "^3.5.0",
|
|
44
44
|
"react-transition-group": "^4.4.5",
|
|
45
|
-
"tss-react": "4.9.
|
|
45
|
+
"tss-react": "4.9.21",
|
|
46
46
|
"validate.js": "^0.13.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@shopgate/pwa-unit-test": "7.32.0-beta.
|
|
49
|
+
"@shopgate/pwa-unit-test": "7.32.0-beta.2",
|
|
50
50
|
"@types/color": "^4.2.0",
|
|
51
51
|
"@types/lodash": "^4.17.24",
|
|
52
52
|
"@types/react-dom": "^17.0.2",
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { makeStyles } from '@shopgate/engage/styles';
|
|
4
|
-
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
|
|
5
4
|
import { Grid, I18n, Ripple, FilterIcon, Typography } from '@shopgate/engage/components';
|
|
6
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
-
const {
|
|
8
|
-
variables
|
|
9
|
-
} = themeConfig;
|
|
10
6
|
const useStyles = makeStyles()(theme => ({
|
|
11
7
|
button: {
|
|
12
8
|
color: 'inherit',
|
|
13
9
|
fontSize: theme.components.icon.medium,
|
|
14
10
|
outline: 0,
|
|
15
11
|
padding: 0,
|
|
16
|
-
minWidth:
|
|
17
|
-
height:
|
|
12
|
+
minWidth: theme.components.navigator.height,
|
|
13
|
+
height: theme.components.filterBar.height,
|
|
18
14
|
position: 'relative',
|
|
19
15
|
zIndex: 1,
|
|
20
16
|
overflow: 'hidden'
|
|
@@ -2,12 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { SelectBox, ArrowDropIcon, SurroundPortals } from '@shopgate/engage/components';
|
|
3
3
|
import { useSort, PORTAL_FILTER_SORT_OPTIONS } from '@shopgate/engage/filter';
|
|
4
4
|
import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
|
|
5
|
-
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
|
|
6
5
|
import Item from "./components/Item";
|
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const {
|
|
9
|
-
variables
|
|
10
|
-
} = themeConfig;
|
|
11
7
|
const useStyles = makeStyles()(theme => ({
|
|
12
8
|
button: {
|
|
13
9
|
color: 'inherit',
|
|
@@ -17,7 +13,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
17
13
|
alignItems: 'center',
|
|
18
14
|
textOverflow: 'ellipsis',
|
|
19
15
|
justifyContent: 'center',
|
|
20
|
-
height:
|
|
16
|
+
height: theme.components.filterBar.height,
|
|
21
17
|
whiteSpace: 'nowrap'
|
|
22
18
|
},
|
|
23
19
|
selection: {
|
|
@@ -13,6 +13,6 @@ export interface ProductNameProps {
|
|
|
13
13
|
/**
|
|
14
14
|
* The ProductName component.
|
|
15
15
|
*/
|
|
16
|
-
declare const ProductName: ({ name, className, testId, ellipsis, portalName, portalProps, itemProp, rows, style, }: ProductNameProps) =>
|
|
16
|
+
declare const ProductName: ({ name, className, testId, ellipsis, portalName, portalProps, itemProp, rows, style, }: ProductNameProps) => React.JSX.Element;
|
|
17
17
|
export default ProductName;
|
|
18
18
|
//# sourceMappingURL=ProductName.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductName.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAWD;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,wFAUlB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ProductName.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAWD;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,wFAUlB,gBAAgB,sBAuBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export interface ProductNameContentProps {
|
|
2
3
|
name?: string | null;
|
|
3
4
|
ellipsis?: boolean;
|
|
@@ -7,6 +8,6 @@ export interface ProductNameContentProps {
|
|
|
7
8
|
* The ProductNameContent component.
|
|
8
9
|
* @returns The ProductNameContent component.
|
|
9
10
|
*/
|
|
10
|
-
declare const ProductNameContent: ({ name, ellipsis, rows, }: ProductNameContentProps) =>
|
|
11
|
+
declare const ProductNameContent: ({ name, ellipsis, rows, }: ProductNameContentProps) => React.JSX.Element;
|
|
11
12
|
export default ProductNameContent;
|
|
12
13
|
//# sourceMappingURL=ProductNameContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductNameContent.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductNameContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProductNameContent.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductNameContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,kBAAkB,GAAI,2BAIzB,uBAAuB,sBAczB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -9,6 +9,6 @@ interface RatingProps {
|
|
|
9
9
|
*/
|
|
10
10
|
size?: 'big' | 'small' | 'large';
|
|
11
11
|
}
|
|
12
|
-
declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react
|
|
12
|
+
declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react").JSX.Element | null>;
|
|
13
13
|
export default _default;
|
|
14
14
|
//# sourceMappingURL=ProductRatingStars.d.ts.map
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import React, { useState, useCallback, memo } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { makeStyles } from '@shopgate/engage/styles';
|
|
4
|
-
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
|
|
5
4
|
import { useWidgetSettings, useTheme } from "../../../core";
|
|
6
5
|
import { SheetDrawer, I18n, Button } from "../../../components";
|
|
7
6
|
import { WIDGET_ID } from "./constants";
|
|
8
7
|
import connect from "./RelationsSheet.connector";
|
|
9
8
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
-
const {
|
|
11
|
-
variables
|
|
12
|
-
} = themeConfig;
|
|
13
9
|
const useStyles = makeStyles()(theme => ({
|
|
14
10
|
showMore: {
|
|
15
11
|
position: 'absolute !important',
|
|
@@ -18,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
|
|
|
18
14
|
padding: `${theme.spacing(0.5, 0)} !important`
|
|
19
15
|
},
|
|
20
16
|
sheet: {
|
|
21
|
-
maxHeight: `calc(100vh - ${
|
|
17
|
+
maxHeight: `calc(100vh - ${theme.components.navigator.height})`
|
|
22
18
|
}
|
|
23
19
|
}));
|
|
24
20
|
|
|
@@ -145,7 +145,7 @@ const UnitQuantityPicker = ({
|
|
|
145
145
|
return {};
|
|
146
146
|
}
|
|
147
147
|
return {
|
|
148
|
-
buttonColor: theme.
|
|
148
|
+
buttonColor: theme.palette.primary.contrastText,
|
|
149
149
|
buttonBgColor: theme.palette.primary.main,
|
|
150
150
|
inputColor: theme.palette.text.primary,
|
|
151
151
|
inputBgColor: theme.palette.grey.light,
|
package/styles/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export * from './helpers';
|
|
2
|
-
export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, type Theme, type PaletteColorsWithMain, } from './theme';
|
|
2
|
+
export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type PaletteColorsWithMain, type WithThemeProps, } from './theme';
|
|
3
3
|
export { makeStyles, withStyles, useStyles, css, cx, tss, GlobalStyles, injectGlobal, keyframes, } from './tss';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/styles/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,EACV,KAAK,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,SAAS,EACT,KAAK,KAAK,EACV,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,EACH,EAAE,EACF,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,OAAO,CAAC"}
|
package/styles/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export * from "./helpers";
|
|
2
|
-
export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme } from "./theme";
|
|
2
|
+
export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme } from "./theme";
|
|
3
3
|
export { makeStyles, withStyles, useStyles, css, cx, tss, GlobalStyles, injectGlobal, keyframes } from "./tss";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentsOptions,
|
|
1
|
+
import type { ComponentsOptions, Components, ComponentsFromSchema } from './createComponents.types';
|
|
2
2
|
export type { ComponentsOptions, Components, ComponentVars } from './createComponents.types';
|
|
3
3
|
/**
|
|
4
4
|
* Deeply resolves a components object:
|
|
@@ -30,6 +30,6 @@ export declare function flattenComponentVars<T extends AnyObject>(input: T): { [
|
|
|
30
30
|
* @param inputComponents The input components options
|
|
31
31
|
* @returns The components object
|
|
32
32
|
*/
|
|
33
|
-
declare const createComponents: (inputComponents: ComponentsOptions) =>
|
|
33
|
+
declare const createComponents: (inputComponents: ComponentsOptions) => Components;
|
|
34
34
|
export default createComponents;
|
|
35
35
|
//# sourceMappingURL=createComponents.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponents.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,iBAAiB,
|
|
1
|
+
{"version":3,"file":"createComponents.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE7F;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GACZ,oBAAoB,CAAC,MAAM,CAAC,CAmB9B;AAGD,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErC;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,GAa/C,GACd,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAC1D,CACF;AAED;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,GAAI,iBAAiB,iBAAiB,KAAG,UAQ9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -62,7 +62,6 @@ export function flattenComponentVars(input) {
|
|
|
62
62
|
*/
|
|
63
63
|
const createComponents = inputComponents => {
|
|
64
64
|
const mergedComponents = merge({}, componentsSchema, componentsDefaults, inputComponents);
|
|
65
|
-
// @ts-expect-error - We are sure about the type here
|
|
66
65
|
return mergedComponents;
|
|
67
66
|
};
|
|
68
67
|
export default createComponents;
|
|
@@ -182,6 +182,16 @@ export declare const componentsSchema: {
|
|
|
182
182
|
readonly paginationProgressbarActiveColor: "";
|
|
183
183
|
};
|
|
184
184
|
};
|
|
185
|
+
readonly navigator: {
|
|
186
|
+
readonly vars: {
|
|
187
|
+
readonly height: "";
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
readonly filterBar: {
|
|
191
|
+
readonly vars: {
|
|
192
|
+
readonly height: "";
|
|
193
|
+
};
|
|
194
|
+
};
|
|
185
195
|
};
|
|
186
196
|
/**
|
|
187
197
|
* Default component tokens.
|
|
@@ -271,6 +281,16 @@ export declare const componentsDefaults: {
|
|
|
271
281
|
paginationProgressbarActiveColor: (t: Theme) => string;
|
|
272
282
|
};
|
|
273
283
|
};
|
|
284
|
+
navigator: {
|
|
285
|
+
vars: {
|
|
286
|
+
height: number;
|
|
287
|
+
};
|
|
288
|
+
};
|
|
289
|
+
filterBar: {
|
|
290
|
+
vars: {
|
|
291
|
+
height: number;
|
|
292
|
+
};
|
|
293
|
+
};
|
|
274
294
|
};
|
|
275
295
|
/** Internal defaults type (must cover full schema). */
|
|
276
296
|
export type ComponentsDefaults = ComponentsOverrideFromSchema<typeof componentsSchema, Theme>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AAE3C;;;GAGG;AACH,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,mBAAmB,CAAC,MAAM,IAClC,MAAM,GACN,MAAM,GACN,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,CAAC,OAAO,IACtC,OAAO,SAAS,IAAI,GAAG,MAAM,GAC3B,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,oBAAoB,CAAC,CAAC,CAAC,EAAE,GACzE,OAAO,SAAS,MAAM,GAAG;KAAG,CAAC,IAAI,MAAM,OAAO,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CAAE,GACnF,MAAM,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,4BAA4B,CAAC,OAAO,EAAE,MAAM,IACtD,OAAO,SAAS,IAAI,GAAG,mBAAmB,CAAC,MAAM,CAAC,GAChD,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,GACzF,OAAO,SAAS,MAAM,GACtB;KAAG,CAAC,IAAI,MAAM,OAAO,GAAG,4BAA4B,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;CAAE,GAC1E,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAEhC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,4BAA4B,CAAC,OAAO,EAAE,MAAM,IACtD,OAAO,SAAS,IAAI,GAAG,mBAAmB,CAAC,MAAM,CAAC,GAChD,OAAO,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,GACzF,OAAO,SAAS,MAAM,GACtB;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,EAAE,4BAA4B,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;CAAE,GAC3E,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,uBAAuB,CAAC,OAAO,IAAI;KAC5C,CAAC,IAAI,MAAM,OAAO,GACnB,OAAO,CAAC,CAAC,CAAC,SAAS;QAAE,IAAI,EAAE,MAAM,KAAK,CAAA;KAAE,GACtC,oBAAoB,CAAC,KAAK,CAAC,GAC3B,KAAK;CACR,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB
|
|
1
|
+
{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -169,6 +169,16 @@ export const componentsSchema = {
|
|
|
169
169
|
paginationProgressbarBackground: '',
|
|
170
170
|
paginationProgressbarActiveColor: ''
|
|
171
171
|
}
|
|
172
|
+
},
|
|
173
|
+
navigator: {
|
|
174
|
+
vars: {
|
|
175
|
+
height: ''
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
filterBar: {
|
|
179
|
+
vars: {
|
|
180
|
+
height: ''
|
|
181
|
+
}
|
|
172
182
|
}
|
|
173
183
|
};
|
|
174
184
|
|
|
@@ -259,6 +269,16 @@ export const componentsDefaults = {
|
|
|
259
269
|
paginationProgressbarBackground: t => t.palette.grey.light,
|
|
260
270
|
paginationProgressbarActiveColor: t => t.palette.common.black
|
|
261
271
|
}
|
|
272
|
+
},
|
|
273
|
+
navigator: {
|
|
274
|
+
vars: {
|
|
275
|
+
height: 44
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
filterBar: {
|
|
279
|
+
vars: {
|
|
280
|
+
height: 48
|
|
281
|
+
}
|
|
262
282
|
}
|
|
263
283
|
};
|
|
264
284
|
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
// Import `isDev` from the leaf environment module rather than the `@shopgate/engage/core/helpers`
|
|
2
|
+
// barrel: the barrel pulls in providers -> toast -> the theme, creating an import cycle back into
|
|
3
|
+
// createTheme (which uses this module) and breaking theme creation during module init.
|
|
4
|
+
import { isDev } from '@shopgate/pwa-common/helpers/environment';
|
|
2
5
|
const spacingUnit = 8;
|
|
3
6
|
|
|
4
7
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ColorSchemeOptions,
|
|
1
|
+
import type { ColorSchemeOptions, ColorSchemeTheme } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* Helper function to add an alpha value to a color.
|
|
4
4
|
* @param color The color to modify.
|
|
@@ -32,6 +32,6 @@ export declare const contrastColor: (color: string) => string;
|
|
|
32
32
|
* @param colorScheme The color scheme options.
|
|
33
33
|
* @returns A theme object for the given color scheme.
|
|
34
34
|
*/
|
|
35
|
-
declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions) =>
|
|
35
|
+
declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions) => ColorSchemeTheme;
|
|
36
36
|
export default createThemeFromColorScheme;
|
|
37
37
|
//# sourceMappingURL=createThemeFromColorScheme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,
|
|
1
|
+
{"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAcpE;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,KACZ,MAA4D,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,GAAI,aAAa,kBAAkB,KAAG,gBA2BrE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}
|
|
@@ -4,6 +4,7 @@ import createBreakpoints from "./createBreakpoints";
|
|
|
4
4
|
import createSpacing from "./createSpacing";
|
|
5
5
|
import transitions from "./transitions";
|
|
6
6
|
import zIndex from "./zIndex";
|
|
7
|
+
import layout from "./layout";
|
|
7
8
|
import createThemeFromColorScheme from "./createThemeFromColorScheme";
|
|
8
9
|
import createCssVarsForColorSchemeThemes from "./createCssVarsForColorSchemeThemes";
|
|
9
10
|
import applyStyles from "./applyStyles";
|
|
@@ -58,7 +59,7 @@ export const createTheme = (options = {}) => {
|
|
|
58
59
|
spacing,
|
|
59
60
|
transitions,
|
|
60
61
|
zIndex,
|
|
61
|
-
|
|
62
|
+
layout,
|
|
62
63
|
colorSchemes,
|
|
63
64
|
getColorSchemeSelector,
|
|
64
65
|
setActiveColorScheme,
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Runtime layout dimensions exposed as global CSS variables.
|
|
3
|
+
*
|
|
4
|
+
* These are NOT design tokens and are not generated by the theme's CSS-variable pipeline.
|
|
5
|
+
* The `--safe-area-inset-*` variables are set at runtime by `updatePageInsets` based on the
|
|
6
|
+
* device page insets.
|
|
7
|
+
*
|
|
8
|
+
* This node only maps theme properties to those existing variables (`var(--...)`), so consumers
|
|
9
|
+
* can read `theme.layout.*` instead of hardcoding the variable names.
|
|
10
|
+
*/
|
|
11
|
+
export interface SafeArea {
|
|
12
|
+
top: string;
|
|
13
|
+
bottom: string;
|
|
14
|
+
left: string;
|
|
15
|
+
right: string;
|
|
16
|
+
}
|
|
17
|
+
export interface Layout {
|
|
18
|
+
/** Device safe-area insets (`--safe-area-inset-*`). */
|
|
19
|
+
safeArea: SafeArea;
|
|
20
|
+
}
|
|
21
|
+
declare const layout: Layout;
|
|
22
|
+
export default layout;
|
|
23
|
+
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,MAAM;IACrB,uDAAuD;IACvD,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,MAOb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Runtime layout dimensions exposed as global CSS variables.
|
|
3
|
+
*
|
|
4
|
+
* These are NOT design tokens and are not generated by the theme's CSS-variable pipeline.
|
|
5
|
+
* The `--safe-area-inset-*` variables are set at runtime by `updatePageInsets` based on the
|
|
6
|
+
* device page insets.
|
|
7
|
+
*
|
|
8
|
+
* This node only maps theme properties to those existing variables (`var(--...)`), so consumers
|
|
9
|
+
* can read `theme.layout.*` instead of hardcoding the variable names.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
const layout = {
|
|
13
|
+
safeArea: {
|
|
14
|
+
top: 'var(--safe-area-inset-top)',
|
|
15
|
+
bottom: 'var(--safe-area-inset-bottom)',
|
|
16
|
+
left: 'var(--safe-area-inset-left)',
|
|
17
|
+
right: 'var(--safe-area-inset-right)'
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
export default layout;
|
|
@@ -27,7 +27,9 @@ export const duration = {
|
|
|
27
27
|
// recommended when something is entering screen
|
|
28
28
|
enteringScreen: 225,
|
|
29
29
|
// recommended when something is leaving screen
|
|
30
|
-
leavingScreen: 195
|
|
30
|
+
leavingScreen: 195,
|
|
31
|
+
// how long a toast stays visible before auto-dismissing
|
|
32
|
+
toast: 5000
|
|
31
33
|
};
|
|
32
34
|
|
|
33
35
|
/**
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import type { PaletteOptions, Palette } from './createPalette';
|
|
2
2
|
import type { Typography, TypographyOptions } from './createTypography';
|
|
3
|
-
import type { ComponentsOptions, ComponentVars } from './createComponents';
|
|
3
|
+
import type { ComponentsOptions, ComponentVars, Components } from './createComponents';
|
|
4
4
|
import type { Breakpoints } from './createBreakpoints';
|
|
5
5
|
import type { Spacing } from './createSpacing';
|
|
6
6
|
import type { Transitions } from './transitions';
|
|
7
7
|
import type { ZIndex } from './zIndex';
|
|
8
|
+
import type { Layout } from './layout';
|
|
8
9
|
import type { ApplyStyles } from './applyStyles';
|
|
9
10
|
import type { GetColorSchemeSelector, ActiveColorSchemeSwitcher } from './helpers';
|
|
10
11
|
import type { CreateCssVarsForColorSchemeThemesReturnValue } from './createCssVarsForColorSchemeThemes';
|
|
@@ -143,6 +144,12 @@ export interface Theme extends BaseTheme {
|
|
|
143
144
|
* Reference to z-index values for multiple components.
|
|
144
145
|
*/
|
|
145
146
|
zIndex: ZIndex;
|
|
147
|
+
/**
|
|
148
|
+
* Mappings to runtime layout CSS variables (safe-area insets).
|
|
149
|
+
* The values are `var(--...)` references to variables updated at runtime elsewhere in the app;
|
|
150
|
+
* this node does not generate any new CSS variables.
|
|
151
|
+
*/
|
|
152
|
+
layout: Layout;
|
|
146
153
|
/**
|
|
147
154
|
* An object that contains the CSS variable references for the theme properties.
|
|
148
155
|
* It has the same structure as the theme, but the values are CSS variable references
|
|
@@ -171,12 +178,26 @@ export interface Theme extends BaseTheme {
|
|
|
171
178
|
*/
|
|
172
179
|
applyStyles: ApplyStyles<ColorSchemeName>;
|
|
173
180
|
}
|
|
181
|
+
/**
|
|
182
|
+
* A single fully-resolved color-scheme theme. Identical to {@link BaseTheme} except that its
|
|
183
|
+
* `components` keep the nested `vars` level (the raw per-scheme token defaults produced by
|
|
184
|
+
* `createComponents`), whereas the flattened `BaseTheme['components']` shape is only produced for
|
|
185
|
+
* the final merged theme.
|
|
186
|
+
*/
|
|
187
|
+
export type ColorSchemeTheme = Omit<BaseTheme, 'components'> & {
|
|
188
|
+
components: Components;
|
|
189
|
+
};
|
|
174
190
|
/**
|
|
175
191
|
* A record of themes for each color scheme. Each key is a color scheme name (e.g., 'light', 'dark'),
|
|
176
|
-
* and the value is a
|
|
192
|
+
* and the value is a fully-resolved color-scheme theme ({@link ColorSchemeTheme}).
|
|
177
193
|
*/
|
|
178
|
-
export type ColorSchemeThemes = Record<ColorSchemeName,
|
|
179
|
-
export type ThemeInternal = Theme
|
|
194
|
+
export type ColorSchemeThemes = Record<ColorSchemeName, ColorSchemeTheme>;
|
|
195
|
+
export type ThemeInternal = Omit<Theme, 'colorSchemes'> & {
|
|
196
|
+
/**
|
|
197
|
+
* Internal runtime map of fully resolved color-scheme themes.
|
|
198
|
+
*/
|
|
199
|
+
colorSchemes: ColorSchemeThemes;
|
|
200
|
+
} & Pick<CreateCssVarsForColorSchemeThemesReturnValue, 'generateStyleSheets'> & {
|
|
180
201
|
/**
|
|
181
202
|
* Function that generates a CSS selector string for a given color scheme.
|
|
182
203
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}
|