@toptal/picasso 26.13.1 → 26.15.1

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.
@@ -1,6 +1,6 @@
1
- import React from 'react';
1
+ import React, { FocusEvent } from 'react';
2
2
  import { BaseProps, SizeType } from '@toptal/picasso-shared';
3
- import { AvatarUploadOptions } from './types';
3
+ import { AvatarUploadOptions, FileUpload } from './types';
4
4
  import { Status } from '../OutlinedInput';
5
5
  export interface Props extends BaseProps {
6
6
  /**
@@ -12,17 +12,19 @@ export interface Props extends BaseProps {
12
12
  /** Image URL */
13
13
  src?: string;
14
14
  /** Size of the avatar */
15
- size?: SizeType<'small' | 'large'>;
15
+ size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
16
16
  /** Enable/disable the dropzone */
17
17
  disabled?: boolean;
18
18
  /** Maximum file size (in bytes) */
19
19
  maxSize?: number;
20
20
  /** Minimum file size (in bytes) */
21
21
  minSize?: number;
22
- /**
23
- * Callback for when there is already a source and user clicks on the avatar.
24
- */
22
+ /** Callback for when there is already a source and user clicks on the avatar. */
25
23
  onEdit?: AvatarUploadOptions['onEdit'];
24
+ /** Callback for focusing */
25
+ onFocus?: (event: FocusEvent<HTMLElement, Element>) => void;
26
+ /** Callback for losing focus */
27
+ onBlur?: (event: FocusEvent<HTMLElement, Element>) => void;
26
28
  /**
27
29
  * Callback for when the drop event occurs. Note that if file is not accepted, this callback is not invoked.,
28
30
  * @type <T extends File>(files: T, event: DropEvent) => void
@@ -43,6 +45,8 @@ export interface Props extends BaseProps {
43
45
  * (file: File) => FileError | FileError[] | null
44
46
  */
45
47
  validator?: AvatarUploadOptions['validator'];
48
+ /** Value to be used for forms */
49
+ value?: FileUpload;
46
50
  /** Indicate `AvatarUpload` is in `error` or `default` state */
47
51
  status?: Extract<Status, 'error' | 'default'>;
48
52
  /** Indicate whether the selected file is being uploaded */
@@ -6,14 +6,14 @@ import Avatar from '../Avatar';
6
6
  import styles from './styles';
7
7
  import DropzoneSvg from './DropzoneSvg/DropzoneSvg';
8
8
  import Loader from '../Loader';
9
- import { Upload24 } from '../Icon';
9
+ import { Upload16, Upload24 } from '../Icon';
10
10
  const useStyles = makeStyles(styles, {
11
11
  name: 'PicassoAvatarUpload',
12
12
  });
13
13
  export const AvatarUpload = forwardRef(
14
- // eslint-disable-next-line complexity
14
+ // eslint-disable-next-line complexity, max-statements
15
15
  function AvatarUpload(props, ref) {
16
- const { autoFocus, autoHover, defaultActive, uploading = false, size = 'small', onEdit, status, 'data-testid': dataTestId, testIds, src, alt,
16
+ const { autoFocus, autoHover, defaultActive, uploading = false, size = 'small', onEdit, onFocus, onBlur, status, 'data-testid': dataTestId, testIds, src, alt,
17
17
  // dropzoneOptions
18
18
  accept, minSize, maxSize, disabled, onDrop, onDropAccepted, onDropRejected, validator, } = props;
19
19
  const [{ initiallyFocused, initiallyActive, hovered }, setVisualStates] = useState({
@@ -61,7 +61,8 @@ function AvatarUpload(props, ref) {
61
61
  [classes.hovered]: hovered,
62
62
  [classes.error]: status === 'error',
63
63
  }), size: 'small', variant: 'inherit', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.loader }));
64
- const uploadIcon = showUploadIcon && (React.createElement(Upload24, { className: cx(classes.icon, {
64
+ const UploadIconComponent = size === 'xxsmall' || size === 'xsmall' ? Upload16 : Upload24;
65
+ const uploadIcon = showUploadIcon && (React.createElement(UploadIconComponent, { className: cx(classes.icon, {
65
66
  [classes.hovered]: hovered,
66
67
  [classes.error]: status === 'error',
67
68
  }), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.uploadIcon }));
@@ -99,7 +100,11 @@ function AvatarUpload(props, ref) {
99
100
  [classes.readonlyAvatar]: showAvatar,
100
101
  }),
101
102
  'data-testid': dataTestId,
102
- }), { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
103
+ onMouseEnter,
104
+ onMouseLeave,
105
+ onFocus,
106
+ onBlur,
107
+ })),
103
108
  React.createElement("input", Object.assign({}, getInputProps())),
104
109
  showAvatar ? (React.createElement(Avatar, { size: size, onEdit: onEdit ? handleEdit : undefined,
105
110
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarUpload.js","sourceRoot":"","sources":["../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AvatarUpload.js","sourceRoot":"","sources":["../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { BaseProps, SizeType } from '@toptal/picasso-shared';
2
2
  export interface Props extends BaseProps {
3
- size?: SizeType<'small' | 'large'>;
3
+ size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
4
4
  isDragActive?: boolean;
5
5
  disabled?: boolean;
6
6
  error?: boolean;
@@ -2,32 +2,39 @@ import React from 'react';
2
2
  import { capitalize, makeStyles } from '@material-ui/core';
3
3
  import cx from 'classnames';
4
4
  import styles from './styles';
5
- import { getBackgroundShape, getBordersShape, getOutlineShape } from './utils';
5
+ import { getShapes } from './utils';
6
6
  /**
7
7
  * For measuring, pixel values are used because SVG's "d" attribute works with percentages and pixels only
8
8
  */
9
9
  const BASE_FONT_SIZE = 16;
10
10
  const SETTINGS = {
11
+ xxsmall: {
12
+ dimensions: 2 * BASE_FONT_SIZE,
13
+ cornerSize: 0.5 * BASE_FONT_SIZE,
14
+ },
15
+ xsmall: {
16
+ dimensions: 2.5 * BASE_FONT_SIZE,
17
+ cornerSize: 0.5 * BASE_FONT_SIZE,
18
+ },
11
19
  small: {
12
20
  dimensions: 5 * BASE_FONT_SIZE,
13
21
  cornerSize: 1 * BASE_FONT_SIZE,
14
22
  },
23
+ medium: {
24
+ dimensions: 7.5 * BASE_FONT_SIZE,
25
+ cornerSize: 1.5 * BASE_FONT_SIZE,
26
+ },
15
27
  large: {
16
28
  dimensions: 10 * BASE_FONT_SIZE,
17
29
  cornerSize: 1.5 * BASE_FONT_SIZE,
18
30
  },
19
31
  };
20
32
  const SHAPES = {
21
- small: {
22
- backgroundShape: getBackgroundShape(SETTINGS.small),
23
- outlineShape: getOutlineShape(SETTINGS.small),
24
- bordersShape: getBordersShape(SETTINGS.small),
25
- },
26
- large: {
27
- backgroundShape: getBackgroundShape(SETTINGS.large),
28
- outlineShape: getOutlineShape(SETTINGS.large),
29
- bordersShape: getBordersShape(SETTINGS.large),
30
- },
33
+ xxsmall: getShapes(SETTINGS.xxsmall),
34
+ xsmall: getShapes(SETTINGS.xsmall),
35
+ small: getShapes(SETTINGS.small),
36
+ medium: getShapes(SETTINGS.medium),
37
+ large: getShapes(SETTINGS.large),
31
38
  };
32
39
  const useStyles = makeStyles(styles, {
33
40
  name: 'PicassoDropzoneSvg',
@@ -45,16 +52,16 @@ export const DropzoneSvg = (props) => {
45
52
  [classes.error]: error,
46
53
  [classes.focused]: focused,
47
54
  [classes.hovered]: hovered,
48
- }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.backgroundShape }),
55
+ }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.background }),
49
56
  React.createElement("path", { className: cx(classes.outline, {
50
57
  [classes.focused]: focused,
51
58
  [classes.error]: error,
52
- }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outlineShape, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' }),
59
+ }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.outline, strokeOpacity: '.48', strokeWidth: '3', strokeLinejoin: 'round' }),
53
60
  React.createElement("path", { className: cx(classes.border, {
54
61
  [classes.error]: error,
55
62
  [classes.focused]: focused,
56
63
  [classes.hovered]: hovered,
57
- }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.bordersShape, strokeDasharray: '3 3' }))));
64
+ }), fillRule: 'evenodd', clipRule: 'evenodd', d: shapes.borders, strokeDasharray: '3 3' }))));
58
65
  };
59
66
  DropzoneSvg.displayName = 'DropzoneSvg';
60
67
  DropzoneSvg.defaultProps = {
@@ -1 +1 @@
1
- {"version":3,"file":"DropzoneSvg.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/DropzoneSvg.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DropzoneSvg.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/DropzoneSvg.tsx"],"names":[],"mappings":"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"}
@@ -1,3 +1,3 @@
1
1
  import { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "background" | "border" | "outline" | "disabled" | "error" | "root" | "svg" | "focused" | "hovered" | "rootSmall" | "rootLarge" | "dragActive" | "svgSmall" | "svgLarge">;
2
+ declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "background" | "border" | "outline" | "disabled" | "error" | "root" | "svg" | "focused" | "hovered" | "rootSmall" | "rootMedium" | "rootLarge" | "dragActive" | "rootXxsmall" | "rootXsmall" | "svgXxsmall" | "svgXsmall" | "svgSmall" | "svgMedium" | "svgLarge">;
3
3
  export default _default;
@@ -11,10 +11,22 @@ export default ({ palette, transitions }) => {
11
11
  position: 'relative',
12
12
  background: 'transparent',
13
13
  },
14
+ rootXxsmall: {
15
+ width: '32px',
16
+ height: '32px',
17
+ },
18
+ rootXsmall: {
19
+ width: '40px',
20
+ height: '40px',
21
+ },
14
22
  rootSmall: {
15
23
  width: '80px',
16
24
  height: '80px',
17
25
  },
26
+ rootMedium: {
27
+ width: '120px',
28
+ height: '120px',
29
+ },
18
30
  rootLarge: {
19
31
  width: '160px',
20
32
  height: '160px',
@@ -22,17 +34,29 @@ export default ({ palette, transitions }) => {
22
34
  svg: {
23
35
  margin: '-3px', // to center the svg
24
36
  },
37
+ svgXxsmall: {
38
+ width: '38px',
39
+ height: '38px', // +6px for outline
40
+ },
41
+ svgXsmall: {
42
+ width: '46px',
43
+ height: '46px', // +6px for outline
44
+ },
25
45
  svgSmall: {
26
46
  width: '86px',
27
- height: '86px', // 6px for the outline stroke
47
+ height: '86px', // +6px for outline
48
+ },
49
+ svgMedium: {
50
+ width: '126px',
51
+ height: '126px', // +6px for outline
28
52
  },
29
53
  svgLarge: {
30
54
  width: '166px',
31
- height: '166px', // 6px for the outline stroke
55
+ height: '166px', // +6px for outline
32
56
  },
33
57
  background: {
34
58
  fill: palette.blue.lighter,
35
- transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
59
+ transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}ms`,
36
60
  transitionProperty: 'fill',
37
61
  '&$hovered': {
38
62
  fill: hoverBackgroundColor,
@@ -49,7 +73,7 @@ export default ({ palette, transitions }) => {
49
73
  },
50
74
  border: {
51
75
  stroke: palette.blue.main,
52
- transition: `stroke ${transitions.duration.short}`,
76
+ transition: `stroke ${transitions.duration.short}ms`,
53
77
  '&$hovered': {
54
78
  stroke: hoverBorderColor,
55
79
  },
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE;IACjD,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACtD,oEAAoE;IACpE,MAAM,oBAAoB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAQ,EAAE,IAAI,CAAC,CAAA;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAEvD,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,aAAa,EAAE,OAAO;YACtB,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,aAAa;SAC1B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QAED,GAAG,EAAE;YACH,MAAM,EAAE,MAAM,EAAE,oBAAoB;SACrC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM,EAAE,6BAA6B;SAC9C;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO,EAAE,6BAA6B;SAC/C;QAED,UAAU,EAAE;YACV,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YAC1B,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;YAC/E,kBAAkB,EAAE,MAAM;YAE1B,WAAW,EAAE;gBACX,IAAI,EAAE,oBAAoB;aAC3B;YAED,uBAAuB,EAAE;gBACvB,IAAI,EAAE,eAAe;aACtB;YAED,YAAY,EAAE;gBACZ,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;gBAC1B,WAAW,EAAE;oBACX,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;iBAC1B;aACF;SACF;QACD,MAAM,EAAE;YACN,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACzB,UAAU,EAAE,UAAU,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE;YAElD,WAAW,EAAE;gBACX,MAAM,EAAE,gBAAgB;aACzB;YAED,SAAS,EAAE;gBACT,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACzB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAEzB,4BAA4B,EAAE;gBAC5B,OAAO,EAAE,SAAS;aACnB;YAED,SAAS,EAAE;gBACT,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACzB;SACF;QAED,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,EAAE;QACZ,KAAK,EAAE,EAAE;QACT,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,EAAE;KACZ,CAAC,CAAA;AACJ,CAAC,CAAA"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/styles.ts"],"names":[],"mappings":"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"}
@@ -1,26 +1,22 @@
1
1
  /**
2
2
  * Returns the shape of the background of the avatar.
3
- * For small variant, it should be 80x80(px), for large - 160x160(px).
4
3
  */
5
- export declare const getBackgroundShape: ({ dimensions, cornerSize, }: {
6
- dimensions: number;
7
- cornerSize: number;
8
- }) => string;
4
+ export declare const getBackgroundShape: (dimensions: number, cornerSize: number) => string;
9
5
  /**
10
6
  * Returns the shape of the outline when field is focused.
11
- * For small variant, it should be 82x82(px), for large - 162x162(px).
12
7
  * it is 2px bigger than the background because of the outline stroke width.
13
8
  */
14
- export declare const getOutlineShape: ({ dimensions, cornerSize, }: {
15
- dimensions: number;
16
- cornerSize: number;
17
- }) => string;
9
+ export declare const getOutlineShape: (dimensions: number, cornerSize: number) => string;
18
10
  /**
19
11
  * Returns the shape of the borders.
20
- * For small variant, it should be 78x78(px), for large - 158x158(px).
21
- * it is 1px smaller than the background because of the border stroke width.
12
+ * it is 2px smaller than the background because of the border stroke width.
22
13
  */
23
- export declare const getBordersShape: ({ dimensions, cornerSize, }: {
14
+ export declare const getBordersShape: (dimensions: number, cornerSize: number) => string;
15
+ export declare const getShapes: ({ dimensions, cornerSize, }: {
24
16
  dimensions: number;
25
17
  cornerSize: number;
26
- }) => string;
18
+ }) => {
19
+ background: string;
20
+ outline: string;
21
+ borders: string;
22
+ };
@@ -1,69 +1,85 @@
1
1
  /**
2
2
  * Returns the shape of the Avatar component in SVG path's format.
3
3
  * SVG's "path" works for the function like this:
4
- * M x1 y1 - move to point x, y (start point)
5
- * H x2 - horizontal line to x1 (top edge)
6
- * V y3 - vertical line to y2 (right edge)
7
- * H x4 - horizontal line to x3 (bottom edge)
8
- * L x1 y5 - close path to point x4, y4
4
+ * M x1 y1 => move to point (x1,y1) (startPoint)
5
+ * H x2 => horizontal line from (x1,y1) to (x2,y1) (topEdgeLength)
6
+ * V y2 => vertical line from (x2,y1) to (x2,y2) (rightEdgeLength)
7
+ * H x3 => horizontal line from (x2,y2) to (x3,y2) (bottomEdgeStartPoint)
8
+ * L x1 y3 => line from (x1,y3) to (x3,y2) (leftCornerEndPoint)
9
9
  * Z - draw path back to starting point (x1 y1)
10
+ *
11
+ * x1,y1 ----------------- x2,y1
12
+ * | |
13
+ * | |
14
+ * | |
15
+ * | |
16
+ * | |
17
+ * x1,y3 |
18
+ * \ |
19
+ * \ |
20
+ * x3,y2-------------- x2,y2
21
+ *
10
22
  */
11
- const getAvatarShape = ({ bottomEdgeLength, startPoint, leftCornerPoint, rightEdgeLength, topEdgeLength, drawBackToStart, }) => {
23
+ const getAvatarShape = ({ bottomEdgeStartPoint, startPoint, leftCornerEndPoint, rightEdgeLength, topEdgeLength, drawBackToStart, }) => {
12
24
  return `
13
25
  M ${startPoint} ${startPoint}
14
26
  H ${topEdgeLength}
15
27
  V ${rightEdgeLength}
16
- H ${bottomEdgeLength}
17
- L ${startPoint} ${leftCornerPoint}${drawBackToStart ? ' Z' : ''}
28
+ H ${bottomEdgeStartPoint}
29
+ L ${startPoint} ${leftCornerEndPoint}${drawBackToStart ? ' Z' : ''}
18
30
  `;
19
31
  };
20
32
  /**
21
33
  * Returns the shape of the background of the avatar.
22
- * For small variant, it should be 80x80(px), for large - 160x160(px).
23
34
  */
24
- export const getBackgroundShape = ({ dimensions, cornerSize, }) => {
35
+ export const getBackgroundShape = (dimensions, cornerSize) => {
25
36
  const centerShift = 3; // shift for the outline stroke
26
37
  return getAvatarShape({
27
38
  startPoint: centerShift,
28
39
  topEdgeLength: dimensions + centerShift,
29
40
  rightEdgeLength: dimensions + centerShift,
30
- bottomEdgeLength: cornerSize + centerShift,
31
- leftCornerPoint: dimensions - cornerSize + centerShift,
41
+ bottomEdgeStartPoint: cornerSize + centerShift,
42
+ leftCornerEndPoint: dimensions - cornerSize + centerShift,
32
43
  drawBackToStart: false,
33
44
  });
34
45
  };
35
46
  /**
36
47
  * Returns the shape of the outline when field is focused.
37
- * For small variant, it should be 82x82(px), for large - 162x162(px).
38
48
  * it is 2px bigger than the background because of the outline stroke width.
39
49
  */
40
- export const getOutlineShape = ({ dimensions, cornerSize, }) => {
50
+ export const getOutlineShape = (dimensions, cornerSize) => {
41
51
  const centerShift = 2; // shift for the outline stroke
42
52
  const outlineStrokeWidth = 2; // width of the outline stroke
43
53
  return getAvatarShape({
44
54
  startPoint: centerShift,
45
55
  topEdgeLength: dimensions + centerShift + outlineStrokeWidth,
46
56
  rightEdgeLength: dimensions + centerShift + outlineStrokeWidth,
47
- bottomEdgeLength: cornerSize + 1,
48
- leftCornerPoint: dimensions - cornerSize + centerShift,
57
+ bottomEdgeStartPoint: cornerSize + centerShift,
58
+ leftCornerEndPoint: dimensions - cornerSize + centerShift + outlineStrokeWidth,
49
59
  drawBackToStart: true,
50
60
  });
51
61
  };
52
62
  /**
53
63
  * Returns the shape of the borders.
54
- * For small variant, it should be 78x78(px), for large - 158x158(px).
55
- * it is 1px smaller than the background because of the border stroke width.
64
+ * it is 2px smaller than the background because of the border stroke width.
56
65
  */
57
- export const getBordersShape = ({ dimensions, cornerSize, }) => {
66
+ export const getBordersShape = (dimensions, cornerSize) => {
58
67
  const centerShift = 4; // shift for the outline stroke and border stroke
59
68
  const outlineStrokeWidth = 2; // width of the outline stroke
60
69
  return getAvatarShape({
61
70
  startPoint: centerShift,
62
71
  topEdgeLength: dimensions + outlineStrokeWidth,
63
72
  rightEdgeLength: dimensions + outlineStrokeWidth,
64
- bottomEdgeLength: cornerSize + outlineStrokeWidth,
65
- leftCornerPoint: dimensions - cornerSize + outlineStrokeWidth,
73
+ bottomEdgeStartPoint: cornerSize + outlineStrokeWidth + 1,
74
+ leftCornerEndPoint: dimensions - cornerSize + outlineStrokeWidth + 1,
66
75
  drawBackToStart: true,
67
76
  });
68
77
  };
78
+ export const getShapes = ({ dimensions, cornerSize, }) => {
79
+ return {
80
+ background: getBackgroundShape(dimensions, cornerSize),
81
+ outline: getOutlineShape(dimensions, cornerSize),
82
+ borders: getBordersShape(dimensions, cornerSize),
83
+ };
84
+ };
69
85
  //# sourceMappingURL=utils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,cAAc,GAAG,CAAC,EACtB,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,eAAe,EACf,aAAa,EACb,eAAe,GAQhB,EAAE,EAAE;IACH,OAAO;QACD,UAAU,IAAI,UAAU;QACxB,aAAa;QACb,eAAe;QACf,gBAAgB;QAChB,UAAU,IAAI,eAAe,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;GAChE,CAAA;AACH,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,UAAU,EACV,UAAU,GAIX,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAAC,CAAA,CAAC,+BAA+B;IAErD,OAAO,cAAc,CAAC;QACpB,UAAU,EAAE,WAAW;QACvB,aAAa,EAAE,UAAU,GAAG,WAAW;QACvC,eAAe,EAAE,UAAU,GAAG,WAAW;QACzC,gBAAgB,EAAE,UAAU,GAAG,WAAW;QAC1C,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,WAAW;QACtD,eAAe,EAAE,KAAK;KACvB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,UAAU,EACV,UAAU,GAIX,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAAC,CAAA,CAAC,+BAA+B;IACrD,MAAM,kBAAkB,GAAG,CAAC,CAAA,CAAC,8BAA8B;IAE3D,OAAO,cAAc,CAAC;QACpB,UAAU,EAAE,WAAW;QACvB,aAAa,EAAE,UAAU,GAAG,WAAW,GAAG,kBAAkB;QAC5D,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,kBAAkB;QAC9D,gBAAgB,EAAE,UAAU,GAAG,CAAC;QAChC,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,WAAW;QACtD,eAAe,EAAE,IAAI;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,UAAU,EACV,UAAU,GAIX,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAAC,CAAA,CAAC,iDAAiD;IACvE,MAAM,kBAAkB,GAAG,CAAC,CAAA,CAAC,8BAA8B;IAE3D,OAAO,cAAc,CAAC;QACpB,UAAU,EAAE,WAAW;QACvB,aAAa,EAAE,UAAU,GAAG,kBAAkB;QAC9C,eAAe,EAAE,UAAU,GAAG,kBAAkB;QAChD,gBAAgB,EAAE,UAAU,GAAG,kBAAkB;QACjD,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,kBAAkB;QAC7D,eAAe,EAAE,IAAI;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA"}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/AvatarUpload/DropzoneSvg/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,cAAc,GAAG,CAAC,EACtB,oBAAoB,EACpB,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,eAAe,GAQhB,EAAE,EAAE;IACH,OAAO;QACD,UAAU,IAAI,UAAU;QACxB,aAAa;QACb,eAAe;QACf,oBAAoB;QACpB,UAAU,IAAI,kBAAkB,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;GACnE,CAAA;AACH,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE;IAC3E,MAAM,WAAW,GAAG,CAAC,CAAA,CAAC,+BAA+B;IAErD,OAAO,cAAc,CAAC;QACpB,UAAU,EAAE,WAAW;QACvB,aAAa,EAAE,UAAU,GAAG,WAAW;QACvC,eAAe,EAAE,UAAU,GAAG,WAAW;QACzC,oBAAoB,EAAE,UAAU,GAAG,WAAW;QAC9C,kBAAkB,EAAE,UAAU,GAAG,UAAU,GAAG,WAAW;QACzD,eAAe,EAAE,KAAK;KACvB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE;IACxE,MAAM,WAAW,GAAG,CAAC,CAAA,CAAC,+BAA+B;IACrD,MAAM,kBAAkB,GAAG,CAAC,CAAA,CAAC,8BAA8B;IAE3D,OAAO,cAAc,CAAC;QACpB,UAAU,EAAE,WAAW;QACvB,aAAa,EAAE,UAAU,GAAG,WAAW,GAAG,kBAAkB;QAC5D,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,kBAAkB;QAC9D,oBAAoB,EAAE,UAAU,GAAG,WAAW;QAC9C,kBAAkB,EAChB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB;QAC5D,eAAe,EAAE,IAAI;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE;IACxE,MAAM,WAAW,GAAG,CAAC,CAAA,CAAC,iDAAiD;IACvE,MAAM,kBAAkB,GAAG,CAAC,CAAA,CAAC,8BAA8B;IAE3D,OAAO,cAAc,CAAC;QACpB,UAAU,EAAE,WAAW;QACvB,aAAa,EAAE,UAAU,GAAG,kBAAkB;QAC9C,eAAe,EAAE,UAAU,GAAG,kBAAkB;QAChD,oBAAoB,EAAE,UAAU,GAAG,kBAAkB,GAAG,CAAC;QACzD,kBAAkB,EAAE,UAAU,GAAG,UAAU,GAAG,kBAAkB,GAAG,CAAC;QACpE,eAAe,EAAE,IAAI;KACtB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,UAAU,EACV,UAAU,GAIX,EAAE,EAAE;IACH,OAAO;QACL,UAAU,EAAE,kBAAkB,CAAC,UAAU,EAAE,UAAU,CAAC;QACtD,OAAO,EAAE,eAAe,CAAC,UAAU,EAAE,UAAU,CAAC;QAChD,OAAO,EAAE,eAAe,CAAC,UAAU,EAAE,UAAU,CAAC;KACjD,CAAA;AACH,CAAC,CAAA"}
@@ -1,3 +1,3 @@
1
1
  import { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "icon" | "disabled" | "error" | "root" | "sizeSmall" | "sizeLarge" | "hovered" | "readonlyAvatar">;
2
+ declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "icon" | "disabled" | "error" | "root" | "sizeSmall" | "sizeLarge" | "sizeMedium" | "hovered" | "sizeXxsmall" | "sizeXsmall" | "readonlyAvatar">;
3
3
  export default _default;
@@ -19,10 +19,22 @@ export default ({ palette }) => {
19
19
  cursor: 'default',
20
20
  },
21
21
  },
22
+ sizeXxsmall: {
23
+ width: '2rem',
24
+ height: '2rem',
25
+ },
26
+ sizeXsmall: {
27
+ width: '2.5rem',
28
+ height: '2.5rem',
29
+ },
22
30
  sizeSmall: {
23
31
  width: '5rem',
24
32
  height: '5rem',
25
33
  },
34
+ sizeMedium: {
35
+ width: '7.5rem',
36
+ height: '7.5rem',
37
+ },
26
38
  sizeLarge: {
27
39
  width: '10rem',
28
40
  height: '10rem',
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACrD,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAEzD,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,SAAS;YAEjB,YAAY,EAAE;gBACZ,MAAM,EAAE,SAAS;aAClB;YAED,kBAAkB,EAAE;gBAClB,MAAM,EAAE,SAAS;aAClB;SACF;QAED,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QAED,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QAED,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,aAAa,EAAE,MAAM;YAErB,SAAS,EAAE;gBACT,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACxB;YAED,WAAW,EAAE;gBACX,KAAK,EAAE,cAAc;gBAErB,SAAS,EAAE;oBACT,KAAK,EAAE,mBAAmB;iBAC3B;aACF;SACF;QAED,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;KACnB,CAAC,CAAA;AACJ,CAAC,CAAA"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACrD,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAEzD,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,SAAS;YAEjB,YAAY,EAAE;gBACZ,MAAM,EAAE,SAAS;aAClB;YAED,kBAAkB,EAAE;gBAClB,MAAM,EAAE,SAAS;aAClB;SACF;QAED,WAAW,EAAE;YACX,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,UAAU,EAAE;YACV,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;SACjB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,UAAU,EAAE;YACV,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;SACjB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QAED,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,aAAa,EAAE,MAAM;YAErB,SAAS,EAAE;gBACT,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACxB;YAED,WAAW,EAAE;gBACX,KAAK,EAAE,cAAc;gBAErB,SAAS,EAAE;oBACT,KAAK,EAAE,mBAAmB;iBAC3B;aACF;SACF;QAED,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;KACnB,CAAC,CAAA;AACJ,CAAC,CAAA"}
@@ -1,8 +1,6 @@
1
1
  export interface FileUpload {
2
- uploading?: boolean;
3
- progress?: number;
4
- error?: string;
5
- file: File;
2
+ file?: File;
3
+ src?: string;
6
4
  }
7
5
  export declare type AvatarUploadOptions = {
8
6
  accept?: string | string[];
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/AvatarUpload/types.ts"],"names":[],"mappings":"AA0BA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,eAAe,EAAE,mBAAmB;IACpC,YAAY,EAAE,gBAAgB;IAC9B,YAAY,EAAE,gBAAgB;IAC9B,YAAY,EAAE,gBAAgB;CACtB,CAAA"}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/AvatarUpload/types.ts"],"names":[],"mappings":"AAwBA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,eAAe,EAAE,mBAAmB;IACpC,YAAY,EAAE,gBAAgB;IAC9B,YAAY,EAAE,gBAAgB;IAC9B,YAAY,EAAE,gBAAgB;CACtB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso",
3
- "version": "26.13.1",
3
+ "version": "26.15.1",
4
4
  "description": "Toptal UI components library",
5
5
  "publishConfig": {
6
6
  "access": "public",
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,94 @@
1
+ import { htmlToHast } from '..';
2
+ describe('html-to-hast', () => {
3
+ describe('valid HTML string', () => {
4
+ it('returns valid Picasso components', () => {
5
+ const html = '<h3>heading</h3><p>normal</p>';
6
+ const result = htmlToHast(html);
7
+ expect(result).toEqual({
8
+ type: 'root',
9
+ children: [
10
+ {
11
+ type: 'element',
12
+ tagName: 'h3',
13
+ properties: {},
14
+ children: [{ type: 'text', value: 'heading' }],
15
+ },
16
+ {
17
+ type: 'element',
18
+ tagName: 'p',
19
+ properties: {},
20
+ children: [{ type: 'text', value: 'normal' }],
21
+ },
22
+ ],
23
+ });
24
+ });
25
+ it('strips script tags', () => {
26
+ const html = `
27
+ <script>alert(2)</script>
28
+ <p><em>Foo</em></p>`;
29
+ const ast = htmlToHast(html);
30
+ expect(ast).toEqual({
31
+ type: 'root',
32
+ children: [
33
+ {
34
+ type: 'element',
35
+ tagName: 'p',
36
+ properties: {},
37
+ children: [
38
+ {
39
+ type: 'element',
40
+ tagName: 'em',
41
+ properties: {},
42
+ children: [{ type: 'text', value: 'Foo' }],
43
+ },
44
+ ],
45
+ },
46
+ ],
47
+ });
48
+ });
49
+ });
50
+ describe('when parsing HTML with a single container', () => {
51
+ it('returns an single starting node AST for a single paragraph', () => {
52
+ const html = '<p>Container</p>';
53
+ expect(htmlToHast(html)).toEqual({
54
+ type: 'root',
55
+ children: [
56
+ {
57
+ type: 'element',
58
+ tagName: 'p',
59
+ properties: {},
60
+ children: [{ type: 'text', value: 'Container' }],
61
+ },
62
+ ],
63
+ });
64
+ });
65
+ it('returns an single starting node AST for lists', () => {
66
+ const html = '<ul><li>Item 1</li><li>Item 2</li></ul>';
67
+ expect(htmlToHast(html)).toEqual({
68
+ type: 'root',
69
+ children: [
70
+ {
71
+ type: 'element',
72
+ tagName: 'ul',
73
+ properties: {},
74
+ children: [
75
+ {
76
+ type: 'element',
77
+ tagName: 'li',
78
+ properties: {},
79
+ children: [{ type: 'text', value: 'Item 1' }],
80
+ },
81
+ {
82
+ type: 'element',
83
+ tagName: 'li',
84
+ properties: {},
85
+ children: [{ type: 'text', value: 'Item 2' }],
86
+ },
87
+ ],
88
+ },
89
+ ],
90
+ });
91
+ });
92
+ });
93
+ });
94
+ //# sourceMappingURL=html-to-hast.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"html-to-hast.test.js","sourceRoot":"","sources":["../../../src/utils/__tests__/html-to-hast.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAA;AAE/B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;QACjC,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;YAC1C,MAAM,IAAI,GAAG,+BAA+B,CAAA;YAC5C,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAE/B,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;gBACrB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,IAAI;wBACb,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;qBAC/C;oBACD;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,GAAG;wBACZ,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;qBAC9C;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;YAC5B,MAAM,IAAI,GAAG;;4BAES,CAAA;YACtB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,GAAG;wBACZ,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE;4BACR;gCACE,IAAI,EAAE,SAAS;gCACf,OAAO,EAAE,IAAI;gCACb,UAAU,EAAE,EAAE;gCACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;6BAC3C;yBACF;qBACF;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACzD,EAAE,CAAC,4DAA4D,EAAE,GAAG,EAAE;YACpE,MAAM,IAAI,GAAG,kBAAkB,CAAA;YAE/B,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;gBAC/B,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,GAAG;wBACZ,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;qBACjD;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;YACvD,MAAM,IAAI,GAAG,yCAAyC,CAAA;YAEtD,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;gBAC/B,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,SAAS;wBACf,OAAO,EAAE,IAAI;wBACb,UAAU,EAAE,EAAE;wBACd,QAAQ,EAAE;4BACR;gCACE,IAAI,EAAE,SAAS;gCACf,OAAO,EAAE,IAAI;gCACb,UAAU,EAAE,EAAE;gCACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;6BAC9C;4BACD;gCACE,IAAI,EAAE,SAAS;gCACf,OAAO,EAAE,IAAI;gCACb,UAAU,EAAE,EAAE;gCACd,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;6BAC9C;yBACF;qBACF;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
@@ -18,7 +18,7 @@ const htmlToAst = (html) => {
18
18
  const domHast = hastSanitize(hastFromDom(dom.body), hastSanitizeSchema);
19
19
  const ast = {
20
20
  type: 'root',
21
- children: domHast.children,
21
+ children: domHast.type === 'root' ? domHast.children : [domHast],
22
22
  };
23
23
  return ast;
24
24
  };
@@ -1 +1 @@
1
- {"version":3,"file":"html-to-hast.js","sourceRoot":"","sources":["../../src/utils/html-to-hast.ts"],"names":[],"mappings":"AAAA,OAAO,YAAwB,MAAM,oBAAoB,CAAA;AACzD,OAAO,WAAW,MAAM,oBAAoB,CAAA;AAI5C,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,aAAa,EAAE,KAAK;IACpB,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE;QACT,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;KACjB;IACD,UAAU,EAAE;QACV,GAAG,EAAE,EAAE;QACP,CAAC,EAAE,CAAC,MAAM,CAAC;KACZ;IACD,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC;IAClE,KAAK,EAAE,CAAC,QAAQ,CAAC;CAClB,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,EAAE;IACjC,MAAM,GAAG,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;IAC9D,MAAM,OAAO,GAAG,YAAY,CAC1B,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EACrB,kBAAkB,CACJ,CAAA;IAEhB,MAAM,GAAG,GAAY;QACnB,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,OAAO,CAAC,QAAQ;KAC3B,CAAA;IAED,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
1
+ {"version":3,"file":"html-to-hast.js","sourceRoot":"","sources":["../../src/utils/html-to-hast.ts"],"names":[],"mappings":"AAAA,OAAO,YAAwB,MAAM,oBAAoB,CAAA;AACzD,OAAO,WAAW,MAAM,oBAAoB,CAAA;AAI5C,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,aAAa,EAAE,KAAK;IACpB,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE;QACT,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;KACjB;IACD,UAAU,EAAE;QACV,GAAG,EAAE,EAAE;QACP,CAAC,EAAE,CAAC,MAAM,CAAC;KACZ;IACD,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC;IAClE,KAAK,EAAE,CAAC,QAAQ,CAAC;CAClB,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,EAAE;IACjC,MAAM,GAAG,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;IAC9D,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAEtD,CAAA;IAEhB,MAAM,GAAG,GAAY;QACnB,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;KACjE,CAAA;IAED,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}