@alveole/components 2.0.0-alpha.28 → 2.0.0-alpha.29

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 (13) hide show
  1. package/dist/core/Section/Section.stories.d.ts.map +1 -1
  2. package/dist/core/Section/Section.stories.js +13 -3
  3. package/dist/core/Section/Section.stories.sources.d.ts.map +1 -1
  4. package/dist/core/Section/Section.stories.sources.js +2 -2
  5. package/dist/generated/version.d.ts +1 -1
  6. package/dist/generated/version.js +1 -1
  7. package/dist/ui/FilterTimeRange/FilterTimeRange.web.d.ts +6 -2
  8. package/dist/ui/FilterTimeRange/FilterTimeRange.web.d.ts.map +1 -1
  9. package/dist/ui/FilterTimeRange/FilterTimeRange.web.js +12 -2
  10. package/dist/ui/FormControl/textInputStyles.d.ts +0 -4
  11. package/dist/ui/FormControl/textInputStyles.d.ts.map +1 -1
  12. package/dist/ui/FormControl/textInputStyles.js +0 -1
  13. package/package.json +1 -1
package/dist/core/Section/Section.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAQkB;AAMlB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
1
+ {"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAiBkB;AAMlB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAYvB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
package/dist/core/Section/Section.stories.js CHANGED
@@ -8,7 +8,17 @@ export default {
8
8
  title: 'Section',
9
9
  tags: ['core'],
10
10
  experimental: true,
11
- description: 'Section de page. Permet de contenir une section dans un élément adapté aux différentes platformes. Composant de type Box.',
11
+ description: [
12
+ 'Section de page : centre son contenu dans un conteneur de largeur maximale et applique la marge extérieure du thème (`externalPadding`). Composant de type Box.',
13
+ '',
14
+ 'Padding horizontal (gauche/droite), toujours appliqué, selon la largeur d’écran :',
15
+ '- mobile (< 768px) : `2W` = 16px ;',
16
+ '- tablette (768–991px) et desktop (≥ 992px) : `3W` = 24px.',
17
+ '',
18
+ '`withPaddingY` ajoute la même valeur en haut et en bas (désactivé par défaut).',
19
+ '',
20
+ 'Largeur maximale du contenu (`size`) : `sm` = 600px, `md` = 1200px (par défaut), `full` = sans limite.',
21
+ ].join('\n'),
12
22
  component: Section,
13
23
  styleFn: useStyles,
14
24
  };
@@ -19,9 +29,9 @@ export const Default = () => (_jsx(Section, { children: _jsx(Box, { children: _j
19
29
  export const WithPaddingY = () => (_jsx(Section, { backgroundColor: paddingColor, withPaddingY: true, children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et padding Y" }) }) }));
20
30
  export const WidthMdSize = () => {
21
31
  const styles = useStyles();
22
- return (_jsx(Section, { backgroundColor: paddingColor, size: "md", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size md (", styles.sectionContainerMD.maxWidth, "px)"] }) }) }));
32
+ return (_jsx(Section, { backgroundColor: paddingColor, size: "md", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size md (", styles.sectionContainerMD.maxWidth, "px, taille par d\u00E9faut)"] }) }) }));
23
33
  };
24
- export const WidthFullSize = () => (_jsx(Section, { backgroundColor: paddingColor, size: "full", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et size full (taille par d\u00E9faut)" }) }) }));
34
+ export const WidthFullSize = () => (_jsx(Section, { backgroundColor: paddingColor, size: "full", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et size full (sans largeur maximale)" }) }) }));
25
35
  export const WidthSmSize = () => {
26
36
  const styles = useStyles();
27
37
  return (_jsx(Section, { backgroundColor: paddingColor, size: "sm", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size sm (", styles.sectionContainerSM.maxWidth, "px)"] }) }) }));
package/dist/core/Section/Section.stories.sources.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Section.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuI,CAAC;AAE5J,eAAO,MAAM,YAAY,cAA8P,CAAC;AAExR,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,aAAa,cAAoR,CAAC;AAE/S,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
1
+ {"version":3,"file":"Section.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuI,CAAC;AAE5J,eAAO,MAAM,YAAY,cAA8P,CAAC;AAExR,eAAO,MAAM,WAAW,cAAyY,CAAC;AAEla,eAAO,MAAM,aAAa,cAAwR,CAAC;AAEnT,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
package/dist/core/Section/Section.stories.sources.js CHANGED
@@ -2,8 +2,8 @@
2
2
  // Source: src/core/Section/Section.stories.tsx
3
3
  export const Default = () => "export const Default = () => (\n <Section>\n <Box>\n <Typography>Section</Typography>\n </Box>\n </Section>\n);";
4
4
  export const WithPaddingY = () => "export const WithPaddingY = () => (\n <Section backgroundColor={paddingColor} withPaddingY>\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et padding Y</Typography>\n </Box>\n </Section>\n);";
5
- export const WidthMdSize = () => "export const WidthMdSize = () => {\n const styles = useStyles();\n\n return (\n <Section backgroundColor={paddingColor} size=\"md\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size md ({styles.sectionContainerMD.maxWidth}px)</Typography>\n </Box>\n </Section>\n );\n};";
6
- export const WidthFullSize = () => "export const WidthFullSize = () => (\n <Section backgroundColor={paddingColor} size=\"full\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size full (taille par défaut)</Typography>\n </Box>\n </Section>\n);";
5
+ export const WidthMdSize = () => "export const WidthMdSize = () => {\n const styles = useStyles();\n\n return (\n <Section backgroundColor={paddingColor} size=\"md\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>\n Section avec background et size md ({styles.sectionContainerMD.maxWidth}px, taille par défaut)\n </Typography>\n </Box>\n </Section>\n );\n};";
6
+ export const WidthFullSize = () => "export const WidthFullSize = () => (\n <Section backgroundColor={paddingColor} size=\"full\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size full (sans largeur maximale)</Typography>\n </Box>\n </Section>\n);";
7
7
  export const WidthSmSize = () => "export const WidthSmSize = () => {\n const styles = useStyles();\n\n return (\n <Section backgroundColor={paddingColor} size=\"sm\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size sm ({styles.sectionContainerSM.maxWidth}px)</Typography>\n </Box>\n </Section>\n );\n};";
8
8
  export const storySources = {
9
9
  Default,
package/dist/generated/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.28";
1
+ export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.29";
2
2
  //# sourceMappingURL=version.d.ts.map
package/dist/generated/version.js CHANGED
@@ -1 +1 @@
1
- export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.28";
1
+ export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.29";
package/dist/ui/FilterTimeRange/FilterTimeRange.web.d.ts CHANGED
@@ -1,5 +1,9 @@
1
+ import React from 'react';
1
2
  import { FilterTimeRangeProps } from './FilterTimeRange.shared';
2
3
  export type { FilterTimeRangeProps } from './FilterTimeRange.shared';
3
- /** Filtre sur une plage de temps : plages relatives prédéfinies ou saisies, ou plage absolue au calendrier. */
4
- export declare const FilterTimeRange: (props: FilterTimeRangeProps) => import("react").JSX.Element;
4
+ /**
5
+ * Filtre sur une plage de temps : plages relatives prédéfinies ou saisies, ou plage absolue au calendrier.
6
+ * Sur un écran mobile, le choix s'ouvre en BottomSheet : un Popover y déborde de l'écran sans défiler.
7
+ */
8
+ export declare const FilterTimeRange: (props: FilterTimeRangeProps) => React.JSX.Element;
5
9
  //# sourceMappingURL=FilterTimeRange.web.d.ts.map
package/dist/ui/FilterTimeRange/FilterTimeRange.web.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FilterTimeRange.web.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterTimeRange/FilterTimeRange.web.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAsB,MAAM,0BAA0B,CAAC;AACpF,YAAY,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE,+GAA+G;AAC/G,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAc1D,CAAC"}
1
+ {"version":3,"file":"FilterTimeRange.web.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterTimeRange/FilterTimeRange.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAsB,MAAM,0BAA0B,CAAC;AACpF,YAAY,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA0B1D,CAAC"}
package/dist/ui/FilterTimeRange/FilterTimeRange.web.js CHANGED
@@ -1,8 +1,18 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useTheme } from '@alveole/theme';
3
+ import React from 'react';
4
+ import { BottomSheet } from '../BottomSheet';
2
5
  import { Popover } from '../Popover';
3
6
  import { useFilterTimeRange } from './FilterTimeRange.shared';
4
- /** Filtre sur une plage de temps : plages relatives prédéfinies ou saisies, ou plage absolue au calendrier. */
7
+ /**
8
+ * Filtre sur une plage de temps : plages relatives prédéfinies ou saisies, ou plage absolue au calendrier.
9
+ * Sur un écran mobile, le choix s'ouvre en BottomSheet : un Popover y déborde de l'écran sans défiler.
10
+ */
5
11
  export const FilterTimeRange = (props) => {
6
12
  const { open, changerOuverture, declencheur, contenu } = useFilterTimeRange(props);
13
+ const { isVariant } = useTheme();
14
+ if (isVariant('mobile')) {
15
+ return (_jsxs(React.Fragment, { children: [declencheur, _jsx(BottomSheet, { fitContent: true, title: props.title, open: open, setOpen: changerOuverture, children: contenu() })] }));
16
+ }
7
17
  return (_jsx(Popover, { placement: "bottom-start", scrollable: false, open: open, setOpen: changerOuverture, renderTrigger: () => declencheur, children: contenu(props.title) }));
8
18
  };
package/dist/ui/FormControl/textInputStyles.d.ts CHANGED
@@ -23,7 +23,6 @@ export type InputFrameState = FieldBorderState & {
23
23
  * deplacerait le texte de tous les champs a ornement. Cf. le test qui fige ce constat.
24
24
  */
25
25
  export declare const inputFrameStyle: (styles: Styles, state: InputFrameState) => {
26
- paddingTop?: number | undefined;
27
26
  paddingLeft?: number | undefined;
28
27
  paddingRight?: number | undefined;
29
28
  borderWidth: number;
@@ -43,7 +42,6 @@ export declare const inputFrameStyle: (styles: Styles, state: InputFrameState) =
43
42
  width: "100%";
44
43
  minHeight: number;
45
44
  } | {
46
- paddingTop?: number | undefined;
47
45
  paddingLeft?: number | undefined;
48
46
  paddingRight?: number | undefined;
49
47
  borderColor: import("@alveole/theme").ThemeColor;
@@ -59,7 +57,6 @@ export declare const inputFrameStyle: (styles: Styles, state: InputFrameState) =
59
57
  width: "100%";
60
58
  minHeight: number;
61
59
  } | {
62
- paddingTop?: number | undefined;
63
60
  paddingLeft?: number | undefined;
64
61
  paddingRight?: number | undefined;
65
62
  borderColor: import("@alveole/theme").ThemeColor;
@@ -75,7 +72,6 @@ export declare const inputFrameStyle: (styles: Styles, state: InputFrameState) =
75
72
  width: "100%";
76
73
  minHeight: number;
77
74
  } | {
78
- paddingTop?: number | undefined;
79
75
  paddingLeft?: number | undefined;
80
76
  paddingRight?: number | undefined;
81
77
  backgroundColor: import("@alveole/theme").ThemeColor | "#FFFFFF";
package/dist/ui/FormControl/textInputStyles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"textInputStyles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/textInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAoB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAE/C,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,EAAE,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpE,CAAC;AAEH,6FAA6F;AAC7F,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,2CAIG,IAAI,CAAC,eAAe,EAAE,gBAAgB,GAAG,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,yBAM1F,CAAC"}
1
+ {"version":3,"file":"textInputStyles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/textInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAoB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAE/C,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,EAAE,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMpE,CAAC;AAEH,6FAA6F;AAC7F,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,2CAIG,IAAI,CAAC,eAAe,EAAE,gBAAgB,GAAG,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,yBAM1F,CAAC"}
package/dist/ui/FormControl/textInputStyles.js CHANGED
@@ -18,7 +18,6 @@ export const inputFrameStyle = (styles, state) => ({
18
18
  ...fieldBorderState(styles, state),
19
19
  ...(state.endAdornment ? { paddingRight: 0 } : {}),
20
20
  ...(state.startAdornment ? { paddingLeft: 0 } : {}),
21
- ...(state.multiline ? { paddingTop: 8 } : {}),
22
21
  });
23
22
  /** Centrer le texte n'a de sens qu'encadre des deux cotes, sinon il fuit vers l'ornement. */
24
23
  export const inputTextStyle = (styles, { startAdornment, endAdornment, resize, }) => versStyleNatif({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/components",
3
- "version": "2.0.0-alpha.28",
3
+ "version": "2.0.0-alpha.29",
4
4
  "description": "Shared UI components.",
5
5
  "repository": {
6
6
  "type": "git",