@webiny/ui 5.42.3-beta.2 → 5.42.3-beta.4

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.
@@ -6,9 +6,10 @@ export declare const AccordionItemActions: ({ children }: AccordionItemActionsPr
6
6
  export interface AccordionItemActionProps {
7
7
  icon: JSX.Element;
8
8
  onClick: () => void;
9
+ tooltip?: string;
9
10
  disabled?: boolean;
10
11
  }
11
- export declare const AccordionItemAction: ({ icon, onClick, disabled }: AccordionItemActionProps) => React.JSX.Element;
12
+ export declare const AccordionItemAction: ({ icon, onClick, tooltip, disabled }: AccordionItemActionProps) => React.JSX.Element;
12
13
  export interface AccordionItemElementProps {
13
14
  element: JSX.Element;
14
15
  }
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.AccordionItemElement = exports.AccordionItemActions = exports.AccordionItemAction = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _Button = require("../Button");
10
+ var _Tooltip = require("../Tooltip");
10
11
  var AccordionItemActions = exports.AccordionItemActions = function AccordionItemActions(_ref) {
11
12
  var children = _ref.children;
12
13
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
@@ -14,8 +15,9 @@ var AccordionItemActions = exports.AccordionItemActions = function AccordionItem
14
15
  var AccordionItemAction = exports.AccordionItemAction = function AccordionItemAction(_ref2) {
15
16
  var icon = _ref2.icon,
16
17
  _onClick = _ref2.onClick,
18
+ tooltip = _ref2.tooltip,
17
19
  disabled = _ref2.disabled;
18
- return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
20
+ var iconButton = /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
19
21
  disabled: disabled,
20
22
  icon: icon,
21
23
  onClick: function onClick(e) {
@@ -23,6 +25,13 @@ var AccordionItemAction = exports.AccordionItemAction = function AccordionItemAc
23
25
  _onClick();
24
26
  }
25
27
  });
28
+ if (!tooltip) {
29
+ return iconButton;
30
+ }
31
+ return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
32
+ placement: "bottom",
33
+ content: tooltip
34
+ }, iconButton);
26
35
  };
27
36
  var AccordionItemElement = exports.AccordionItemElement = function AccordionItemElement(_ref3) {
28
37
  var element = _ref3.element;
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireDefault","require","_Button","AccordionItemActions","exports","_ref","children","default","createElement","Fragment","AccordionItemAction","_ref2","icon","onClick","disabled","IconButton","e","stopPropagation","AccordionItemElement","_ref3","element"],"sources":["AccordionItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"~/Button\";\n\ninterface AccordionItemActionsProps {\n children: React.ReactNode;\n}\n\nexport const AccordionItemActions = ({ children }: AccordionItemActionsProps) => {\n return <>{children}</>;\n};\n\nexport interface AccordionItemActionProps {\n icon: JSX.Element;\n onClick: () => void;\n disabled?: boolean;\n}\n\nexport const AccordionItemAction = ({ icon, onClick, disabled }: AccordionItemActionProps) => {\n return (\n <IconButton\n disabled={disabled}\n icon={icon}\n onClick={e => {\n e.stopPropagation();\n onClick();\n }}\n />\n );\n};\n\nexport interface AccordionItemElementProps {\n element: JSX.Element;\n}\n\nexport const AccordionItemElement = ({ element }: AccordionItemElementProps) => {\n return <div onClick={e => e.stopPropagation()}>{element}</div>;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAMO,IAAME,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAAE,IAAA,EAAgD;EAAA,IAA1CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAC3C,oBAAOP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAAAT,MAAA,CAAAQ,OAAA,CAAAE,QAAA,QAAGH,QAAW,CAAC;AAC1B,CAAC;AAQM,IAAMI,mBAAmB,GAAAN,OAAA,CAAAM,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,EAA8D;EAAA,IAAxDC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAEC,QAAO,GAAAF,KAAA,CAAPE,OAAO;IAAEC,QAAQ,GAAAH,KAAA,CAARG,QAAQ;EACzD,oBACIf,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,OAAA,CAAAa,UAAU;IACPD,QAAQ,EAAEA,QAAS;IACnBF,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAE,SAATA,OAAOA,CAAEG,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBJ,QAAO,CAAC,CAAC;IACb;EAAE,CACL,CAAC;AAEV,CAAC;AAMM,IAAMK,oBAAoB,GAAAd,OAAA,CAAAc,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAAC,KAAA,EAA+C;EAAA,IAAzCC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAC1C,oBAAOrB,MAAA,CAAAQ,OAAA,CAAAC,aAAA;IAAKK,OAAO,EAAE,SAATA,OAAOA,CAAEG,CAAC;MAAA,OAAIA,CAAC,CAACC,eAAe,CAAC,CAAC;IAAA;EAAC,GAAEG,OAAa,CAAC;AAClE,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_Button","_Tooltip","AccordionItemActions","exports","_ref","children","default","createElement","Fragment","AccordionItemAction","_ref2","icon","onClick","tooltip","disabled","iconButton","IconButton","e","stopPropagation","Tooltip","placement","content","AccordionItemElement","_ref3","element"],"sources":["AccordionItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\ninterface AccordionItemActionsProps {\n children: React.ReactNode;\n}\n\nexport const AccordionItemActions = ({ children }: AccordionItemActionsProps) => {\n return <>{children}</>;\n};\n\nexport interface AccordionItemActionProps {\n icon: JSX.Element;\n onClick: () => void;\n tooltip?: string;\n disabled?: boolean;\n}\n\nexport const AccordionItemAction = ({\n icon,\n onClick,\n tooltip,\n disabled\n}: AccordionItemActionProps) => {\n const iconButton = (\n <IconButton\n disabled={disabled}\n icon={icon}\n onClick={e => {\n e.stopPropagation();\n onClick();\n }}\n />\n );\n\n if (!tooltip) {\n return iconButton;\n }\n\n return (\n <Tooltip placement={\"bottom\"} content={tooltip}>\n {iconButton}\n </Tooltip>\n );\n};\n\nexport interface AccordionItemElementProps {\n element: JSX.Element;\n}\n\nexport const AccordionItemElement = ({ element }: AccordionItemElementProps) => {\n return <div onClick={e => e.stopPropagation()}>{element}</div>;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAMO,IAAMG,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAAE,IAAA,EAAgD;EAAA,IAA1CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAC3C,oBAAOR,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAAAV,MAAA,CAAAS,OAAA,CAAAE,QAAA,QAAGH,QAAW,CAAC;AAC1B,CAAC;AASM,IAAMI,mBAAmB,GAAAN,OAAA,CAAAM,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,EAKA;EAAA,IAJ5BC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IACJC,QAAO,GAAAF,KAAA,CAAPE,OAAO;IACPC,OAAO,GAAAH,KAAA,CAAPG,OAAO;IACPC,QAAQ,GAAAJ,KAAA,CAARI,QAAQ;EAER,IAAMC,UAAU,gBACZlB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,OAAA,CAAAgB,UAAU;IACPF,QAAQ,EAAEA,QAAS;IACnBH,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAE,SAATA,OAAOA,CAAEK,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBN,QAAO,CAAC,CAAC;IACb;EAAE,CACL,CACJ;EAED,IAAI,CAACC,OAAO,EAAE;IACV,OAAOE,UAAU;EACrB;EAEA,oBACIlB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,QAAA,CAAAkB,OAAO;IAACC,SAAS,EAAE,QAAS;IAACC,OAAO,EAAER;EAAQ,GAC1CE,UACI,CAAC;AAElB,CAAC;AAMM,IAAMO,oBAAoB,GAAAnB,OAAA,CAAAmB,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAAC,KAAA,EAA+C;EAAA,IAAzCC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAC1C,oBAAO3B,MAAA,CAAAS,OAAA,CAAAC,aAAA;IAAKK,OAAO,EAAE,SAATA,OAAOA,CAAEK,CAAC;MAAA,OAAIA,CAAC,CAACC,eAAe,CAAC,CAAC;IAAA;EAAC,GAAEM,OAAa,CAAC;AAClE,CAAC","ignoreList":[]}
package/Input/Input.js CHANGED
@@ -20,7 +20,7 @@ var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "r
20
20
  */
21
21
 
22
22
  // IconProps directly passed to RMWC
23
- var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
23
+ var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount", "autoComplete"];
24
24
  var Input = exports.Input = function Input(props) {
25
25
  var onChange = (0, _react.useCallback)(function (e) {
26
26
  var onChange = props.onChange,
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_textfield","_FormElementMessage","_pick","_interopRequireDefault","_classnames","_styled","_excluded","rmwcProps","Input","exports","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","size","rest","_objectWithoutProperties2","default","inputValue","_ref","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","createElement","Fragment","TextField","Object","assign","pick","textarea","Boolean","className","classNames","webinyInputStyles","concat","FormElementMessage","error"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { webinyInputStyles } from \"./styled\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n TextFieldProps & {\n // Should this input be filled with browser values\n autoComplete?: string;\n\n // If true, will pass native `event` to the `onChange` callback\n rawOnChange?: boolean;\n\n // Auto-focus input\n autoFocus?: boolean;\n\n // Input placeholder\n placeholder?: string;\n\n // Description beneath the input.\n description?: string | ReactElement;\n\n // Converts input into a text area with given number of rows.\n rows?: number;\n\n maxLength?: number;\n\n // A callback that is executed when input focus is lost.\n onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n // A callback that gets triggered when the user presses the \"Enter\" key.\n onEnter?: () => any;\n\n // CSS class name\n className?: string;\n\n // For testing purposes.\n \"data-testid\"?: string;\n\n // Size - small, medium or large\n size?: \"small\" | \"medium\" | \"large\";\n\n children?: React.ReactNode;\n };\n\nexport type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {\n key?: string;\n};\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n \"label\",\n \"type\",\n \"step\",\n \"disabled\",\n \"readOnly\",\n \"placeholder\",\n \"outlined\",\n \"onKeyDown\",\n \"onKeyPress\",\n \"onKeyUp\",\n \"onFocus\",\n \"rootProps\",\n \"fullwidth\",\n \"inputRef\",\n \"className\",\n \"maxLength\",\n \"characterCount\"\n];\n\nexport const Input = (props: InputProps) => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-expect-error\n onChange(rawOnChange ? e : e.target.value);\n },\n [props.onChange, props.rawOnChange]\n );\n\n const onBlur = useCallback(\n async (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { validate, onBlur } = props;\n if (validate) {\n // Since we are accessing event in an async operation, we need to persist it.\n // See https://reactjs.org/docs/events.html#event-pooling.\n e.persist();\n await validate();\n }\n onBlur && onBlur(e);\n },\n [props.validate, props.onBlur]\n );\n\n const {\n autoFocus,\n value,\n label,\n description,\n placeholder,\n rows,\n validation,\n icon,\n trailingIcon,\n onEnter,\n size,\n ...rest\n } = props;\n\n let inputValue = value;\n if (value === null || typeof value === \"undefined\") {\n inputValue = \"\";\n }\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const inputOnKeyDown = useCallback(\n (e: InputOnKeyDownProps) => {\n if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n onEnter();\n }\n\n if (typeof rest.onKeyDown === \"function\") {\n return rest.onKeyDown(e);\n }\n },\n [rest.onKeyDown, onEnter]\n );\n\n return (\n <React.Fragment>\n <TextField\n {...pick(rest, rmwcProps)}\n onKeyDown={inputOnKeyDown}\n autoFocus={autoFocus}\n textarea={Boolean(rows)}\n value={inputValue}\n onChange={onChange}\n onBlur={onBlur}\n label={label}\n icon={icon}\n placeholder={placeholder}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\n \"webiny-ui-input\",\n webinyInputStyles,\n props.size ? `webiny-ui-input--size-${size}` : null\n )}\n data-testid={props[\"data-testid\"]}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_textfield","_FormElementMessage","_pick","_interopRequireDefault","_classnames","_styled","_excluded","rmwcProps","Input","exports","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","size","rest","_objectWithoutProperties2","default","inputValue","_ref","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","createElement","Fragment","TextField","Object","assign","pick","textarea","Boolean","className","classNames","webinyInputStyles","concat","FormElementMessage","error"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { webinyInputStyles } from \"./styled\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n TextFieldProps & {\n // Should this input be filled with browser values\n autoComplete?: string;\n\n // If true, will pass native `event` to the `onChange` callback\n rawOnChange?: boolean;\n\n // Auto-focus input\n autoFocus?: boolean;\n\n // Input placeholder\n placeholder?: string;\n\n // Description beneath the input.\n description?: string | ReactElement;\n\n // Converts input into a text area with given number of rows.\n rows?: number;\n\n maxLength?: number;\n\n // A callback that is executed when input focus is lost.\n onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n // A callback that gets triggered when the user presses the \"Enter\" key.\n onEnter?: () => any;\n\n // CSS class name\n className?: string;\n\n // For testing purposes.\n \"data-testid\"?: string;\n\n // Size - small, medium or large\n size?: \"small\" | \"medium\" | \"large\";\n\n children?: React.ReactNode;\n };\n\nexport type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {\n key?: string;\n};\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n \"label\",\n \"type\",\n \"step\",\n \"disabled\",\n \"readOnly\",\n \"placeholder\",\n \"outlined\",\n \"onKeyDown\",\n \"onKeyPress\",\n \"onKeyUp\",\n \"onFocus\",\n \"rootProps\",\n \"fullwidth\",\n \"inputRef\",\n \"className\",\n \"maxLength\",\n \"characterCount\",\n \"autoComplete\"\n];\n\nexport const Input = (props: InputProps) => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-expect-error\n onChange(rawOnChange ? e : e.target.value);\n },\n [props.onChange, props.rawOnChange]\n );\n\n const onBlur = useCallback(\n async (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { validate, onBlur } = props;\n if (validate) {\n // Since we are accessing event in an async operation, we need to persist it.\n // See https://reactjs.org/docs/events.html#event-pooling.\n e.persist();\n await validate();\n }\n onBlur && onBlur(e);\n },\n [props.validate, props.onBlur]\n );\n\n const {\n autoFocus,\n value,\n label,\n description,\n placeholder,\n rows,\n validation,\n icon,\n trailingIcon,\n onEnter,\n size,\n ...rest\n } = props;\n\n let inputValue = value;\n if (value === null || typeof value === \"undefined\") {\n inputValue = \"\";\n }\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const inputOnKeyDown = useCallback(\n (e: InputOnKeyDownProps) => {\n if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n onEnter();\n }\n\n if (typeof rest.onKeyDown === \"function\") {\n return rest.onKeyDown(e);\n }\n },\n [rest.onKeyDown, onEnter]\n );\n\n return (\n <React.Fragment>\n <TextField\n {...pick(rest, rmwcProps)}\n onKeyDown={inputOnKeyDown}\n autoFocus={autoFocus}\n textarea={Boolean(rows)}\n value={inputValue}\n onChange={onChange}\n onBlur={onBlur}\n label={label}\n icon={icon}\n placeholder={placeholder}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\n \"webiny-ui-input\",\n webinyInputStyles,\n props.size ? `webiny-ui-input--size-${size}` : null\n )}\n data-testid={props[\"data-testid\"]}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n};\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webiny/ui",
3
- "version": "5.42.3-beta.2",
3
+ "version": "5.42.3-beta.4",
4
4
  "main": "index.js",
5
5
  "repository": {
6
6
  "type": "git",
@@ -43,7 +43,7 @@
43
43
  "@rmwc/typography": "14.2.2",
44
44
  "@svgr/webpack": "6.5.1",
45
45
  "@tanstack/react-table": "8.7.9",
46
- "@webiny/utils": "5.42.3-beta.2",
46
+ "@webiny/utils": "5.42.3-beta.4",
47
47
  "brace": "0.11.1",
48
48
  "classnames": "2.5.1",
49
49
  "cropperjs": "1.5.13",
@@ -74,9 +74,9 @@
74
74
  "@types/react-color": "2.17.11",
75
75
  "@types/react-custom-scrollbars": "4.0.10",
76
76
  "@types/react-transition-group": "4.4.5",
77
- "@webiny/form": "5.42.3-beta.2",
78
- "@webiny/project-utils": "5.42.3-beta.2",
79
- "@webiny/validation": "5.42.3-beta.2",
77
+ "@webiny/form": "5.42.3-beta.4",
78
+ "@webiny/project-utils": "5.42.3-beta.4",
79
+ "@webiny/validation": "5.42.3-beta.4",
80
80
  "babel-loader": "9.2.1",
81
81
  "execa": "5.1.1",
82
82
  "ncp": "2.0.0",
@@ -114,5 +114,5 @@
114
114
  ]
115
115
  }
116
116
  },
117
- "gitHead": "2f2dbebb4bbf728ced489516d9a64296e0e27e23"
117
+ "gitHead": "ddd9afd2185a8e20317f263a3c11f84688b3d8a0"
118
118
  }