@startlibs/form 1.1.3 → 1.2.0-rc.1

package/lib-yak/Field.mjs

@@ -0,0 +1,93 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import { styled, css } from '@yak/react';
+import React from 'react';
+import { getMargin } from '@startlibs/utils';
+
+const _excluded = ["label", "helpText", "descText", "bellowDescText", "className", "labelClick", "focused", "mandatory", "onImage", "children", "labelFontSize"];
+const Mandatory = styled(yakDomTag("span"))`
+  color: #c3282d;
+  margin-left: 1px;
+  vertical-align: top;
+  line-height: 100%;
+  margin-top: -1px;
+  ${props => typeof props.mandatory === 'string' && css`color: ${__yakProps => {
+  const v = props.mandatory;
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};`}
+`;
+const Container = styled(yakDomTag("div"))`
+  position: relative;
+  margin-bottom: ${props => getMargin(props.theme.Field.margins)(props)};
+  text-align: left;
+`;
+// Nome próprio (não só `Field.Label = ...`): TextInput.jsx usa `${Field.Label}` como seletor
+// (FloatingFieldType) num ARQUIVO DIFERENTE, e o yak tenta resolver isso avaliando o módulo
+// inteiro de `Field` (um componente React de verdade) em tempo de build — falha com um
+// `undefined` na saída (mesmo problema do Errors.Item, ver Errors.jsx). `Field.Label` continua
+// existindo (uso interno e compatibilidade).
+const FieldLabel = styled(yakDomTag("label")).attrs({
+  className: "styled-field-label styled-theme-field-label"
+})`
+  font-weight: 550;
+  display: inline-block;
+  font-size: ${props => props.labelFontSize ? props.labelFontSize : '15'}px;
+  margin-bottom: .75rem;
+  ${props => props.isOnImage && css`color: #fff;`}
+  
+`;
+const HelpText = styled(yakDomTag("span")).attrs({
+  className: "styled-help-text"
+})`
+  color: rgba(0,0,0,0.4);
+  font-weight: 400;
+`;
+const FieldDescription = styled(yakDomTag("span")).attrs({
+  className: "styled-field-description"
+})`
+  color: rgba(0,0,0,0.4);
+  display: block;
+  font-size: 12px;
+  margin: 0.25rem 0 0;
+  font-weight: 400;
+`;
+const BellowFieldDescription = styled(FieldDescription).attrs({
+  className: "styled-bellow-field-description"
+})`
+  margin: 0.5rem 0 0;
+`;
+const Field = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      label,
+      helpText,
+      descText,
+      bellowDescText,
+      className,
+      labelClick,
+      focused,
+      mandatory,
+      onImage,
+      children,
+      labelFontSize
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: ref
+  }, rest, {
+    className: className
+  }), label && /*#__PURE__*/React.createElement(FieldLabel, _extends({}, rest, {
+    onClick: labelClick,
+    labelFontSize: labelFontSize
+  }), label, mandatory && /*#__PURE__*/React.createElement(Mandatory, {
+    mandatory: mandatory
+  }, "*"), helpText && /*#__PURE__*/React.createElement(HelpText, null, " ", helpText), descText && /*#__PURE__*/React.createElement(FieldDescription, null, descText)), children, bellowDescText && /*#__PURE__*/React.createElement(BellowFieldDescription, null, bellowDescText));
+});
+Field.Label = FieldLabel;
+Field.Container = Container;
+Field.HelpText = HelpText;
+Field.Description = FieldDescription;
+Field.displayName = "Field";
+
+export { BellowFieldDescription, Field, FieldDescription, FieldLabel, HelpText };
+//# sourceMappingURL=Field.mjs.map

package/lib-yak/Field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.mjs","sources":["../src/Field.jsx"],"sourcesContent":["import styled from 'styled-components'\nimport React from 'react'\nimport {getMargin, customTheme} from '@startlibs/utils'\n\n\nconst Mandatory = styled.span`\n  color: #c3282d;\n  margin-left: 1px;\n  vertical-align: top;\n  line-height: 100%;\n  margin-top: -1px;\n  ${props => typeof props.mandatory === 'string' && `color: ${props.mandatory};`}\n`\nconst Container = styled.div`\n  position: relative;\n  margin-bottom: ${props => getMargin(props.theme.Field.margins)(props)};\n  text-align: left;\n`\n// Nome próprio (não só `Field.Label = ...`): TextInput.jsx usa `${Field.Label}` como seletor\n// (FloatingFieldType) num ARQUIVO DIFERENTE, e o yak tenta resolver isso avaliando o módulo\n// inteiro de `Field` (um componente React de verdade) em tempo de build — falha com um\n// `undefined` na saída (mesmo problema do Errors.Item, ver Errors.jsx). `Field.Label` continua\n// existindo (uso interno e compatibilidade).\nexport const FieldLabel = styled.label`\n  font-weight: 550;\n  display: inline-block;\n  font-size: ${props => props.labelFontSize ? props.labelFontSize : '15'}px;\n  margin-bottom: .75rem;\n  ${props => props.isOnImage && 'color: #fff;'}\n  ${customTheme(\"FieldLabel\")}\n`\n\nexport const HelpText = styled.span`\n  color: rgba(0,0,0,0.4);\n  font-weight: 400;\n`\nexport const FieldDescription = styled.span`\n  color: rgba(0,0,0,0.4);\n  display: block;\n  font-size: 12px;\n  margin: 0.25rem 0 0;\n  font-weight: 400;\n`\nexport const BellowFieldDescription = styled(FieldDescription)`\n  margin: 0.5rem 0 0;\n`\n\nexport const Field = React.forwardRef((\n  {\n    label,\n    helpText,\n    descText,\n    bellowDescText,\n    className,\n    labelClick,\n    focused,\n    mandatory,\n    onImage,\n    children,\n    labelFontSize,\n    ...rest\n  }, ref) =>\n  <Container ref={ref} {...rest} className={className}>\n    {\n      label &&\n      <FieldLabel {...rest} onClick={labelClick} labelFontSize={labelFontSize}>\n        {label}{mandatory && <Mandatory mandatory={mandatory}>*</Mandatory>}\n        {helpText && <HelpText> {helpText}</HelpText>}\n        {descText && <FieldDescription>{descText}</FieldDescription>}\n      </FieldLabel>\n    }\n    {children}\n    {bellowDescText && <BellowFieldDescription>{bellowDescText}</BellowFieldDescription>}\n  </Container>\n)\n\nField.Label = FieldLabel\nField.Container = Container\nField.HelpText = HelpText\nField.Description = FieldDescription\nField.displayName = \"Field\""],"names":["Mandatory","styled","yakDomTag","props","mandatory","css","__yakProps","v","Container","getMargin","theme","Field","margins","FieldLabel","attrs","className","labelFontSize","isOnImage","HelpText","FieldDescription","BellowFieldDescription","React","forwardRef","_ref","ref","label","helpText","descText","bellowDescText","labelClick","focused","onImage","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","onClick","Label","Description","displayName"],"mappings":";;;;;;;;AAKA,MAAMA,SAAS,GAAGC,MAAA,CAAAC,SAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IAAI,OAAOA,KAAK,CAACC,SAAS,KAAK,QAAQ,IAAAC,GAAA,CAAA,OAAA,EAAAC,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GAAcJ,KAAK,CAACC,SAAS,CAAA;AAAA,EAAA,OAAA,OAAAG,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAG,CAAA,CAAA,CAAA,CAAA;AAChF,CAAC,CAAA;AACD,MAAMC,SAAS,GAAGP,MAAA,CAAAC,SAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAClB;AACA,iBAAA,EAAmBC,KAAK,IAAIM,SAAS,CAACN,KAAK,CAACO,KAAK,CAACC,KAAK,CAACC,OAAO,CAAC,CAACT,KAAK,CAAC,CAAA;AACvE;AACA,CAAC,CAAA;AACD;AACA;AACA;AACA;AACA;MACaU,UAAU,GAAGZ,MAAA,CAAAC,SAAA,WAAAY,KAAA,CAAA;EAAAC,SAAA,EAAA,6CAAA;AAAA,CAAA,CAAA,CAAA;AAC1B;AACA;AACA,aAAeZ,EAAAA,KAAK,IAAIA,KAAK,CAACa,aAAa,GAAGb,KAAK,CAACa,aAAa,GAAG,IAAI,CAAA;AACxE;AACA,EAAA,EAAIb,KAAK,IAAIA,KAAK,CAACc,SAAS,IAAAZ,GAAA,CAAkB,YAAA,CAAA,CAAA;AAC9C;AACA,EAAC;MAEYa,QAAQ,GAAGjB,MAAA,CAAAC,SAAA,UAAAY,KAAA,CAAA;EAAAC,SAAA,EAAA,kBAAA;AAAA,CAAA,CAAA,CAAA;AACxB;AACA;AACA,EAAC;MACYI,gBAAgB,GAAGlB,MAAA,CAAAC,SAAA,UAAAY,KAAA,CAAA;EAAAC,SAAA,EAAA,0BAAA;AAAA,CAAA,CAAA,CAAA;AAChC;AACA;AACA;AACA;AACA;AACA,EAAC;AACM,MAAMK,sBAAsB,GAAGnB,MAAM,CAACkB,gBAAgB,CAAC,CAAAL,KAAA,CAAA;EAAAC,SAAA,EAAA,iCAAA;AAAA,CAAA,CAAA,CAAA;AAC9D;AACA,EAAC;AAEM,MAAMJ,KAAK,gBAAGU,KAAK,CAACC,UAAU,CAAC,CAAAC,IAAA,EAcjCC,GAAG,KAAA;EAAA,IAbN;MACEC,KAAK;MACLC,QAAQ;MACRC,QAAQ;MACRC,cAAc;MACdb,SAAS;MACTc,UAAU;MACVC,OAAO;MACP1B,SAAS;MACT2B,OAAO;MACPC,QAAQ;AACRhB,MAAAA,aAAAA;AAEF,KAAC,GAAAO,IAAA;AADIU,IAAAA,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA,CAAA;AAAA,EAAA,oBAETd,KAAA,CAAAe,aAAA,CAAC5B,SAAS,EAAA6B,QAAA,CAAA;AAACb,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EAAKS,IAAI,EAAA;AAAElB,IAAAA,SAAS,EAAEA,SAAAA;GAEtCU,CAAAA,EAAAA,KAAK,iBACLJ,KAAA,CAAAe,aAAA,CAACvB,UAAU,EAAAwB,QAAA,CAAA,EAAA,EAAKJ,IAAI,EAAA;AAAEK,IAAAA,OAAO,EAAET,UAAW;AAACb,IAAAA,aAAa,EAAEA,aAAAA;GACvDS,CAAAA,EAAAA,KAAK,EAAErB,SAAS,iBAAIiB,KAAA,CAAAe,aAAA,CAACpC,SAAS,EAAA;AAACI,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAAC,GAAY,CAAC,EAClEsB,QAAQ,iBAAIL,KAAA,CAAAe,aAAA,CAAClB,QAAQ,EAAA,IAAA,EAAC,GAAC,EAACQ,QAAmB,CAAC,EAC5CC,QAAQ,iBAAIN,KAAA,CAAAe,aAAA,CAACjB,gBAAgB,EAAEQ,IAAAA,EAAAA,QAA2B,CACjD,CAAC,EAEdK,QAAQ,EACRJ,cAAc,iBAAIP,KAAA,CAAAe,aAAA,CAAChB,sBAAsB,EAAEQ,IAAAA,EAAAA,cAAuC,CAC1E,CAAC,CAAA;AAAA,CACd,EAAC;AAEDjB,KAAK,CAAC4B,KAAK,GAAG1B,UAAU,CAAA;AACxBF,KAAK,CAACH,SAAS,GAAGA,SAAS,CAAA;AAC3BG,KAAK,CAACO,QAAQ,GAAGA,QAAQ,CAAA;AACzBP,KAAK,CAAC6B,WAAW,GAAGrB,gBAAgB,CAAA;AACpCR,KAAK,CAAC8B,WAAW,GAAG,OAAO;;;;"}

package/lib-yak/FieldBox.mjs

@@ -0,0 +1,173 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import { darken } from 'polished';
+import { styled, css } from '@yak/react';
+import { getColor, constrainEvent, callIfFunction } from '@startlibs/utils';
+import { Icon, TextButton } from '@startlibs/components';
+import { usePopupToggle } from '@startlibs/core';
+import { HelpText } from './Field.mjs';
+
+const _excluded = ["className", "label", "helpText", "descText", "actionLabel", "rightContainer", "onClick", "icon", "remove", "children", "dropDownMenu"];
+const FieldBoxIcon = styled(Icon).attrs({
+  className: "styled-field-box-icon"
+})`
+  font-size: 25px;
+  width: 25px;
+  text-align: center;
+  margin-right: 1rem;
+`;
+const FieldBoxAction = styled(yakDomTag("div")).attrs({
+  className: "styled-field-box-action"
+})`
+  margin-left: auto;
+  color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  padding-left: 1rem;
+  font-size: 13px;
+  font-weight: 500;
+`;
+const FieldBoxHelpText = styled(yakDomTag("span")).attrs({
+  className: "styled-field-box-help-text"
+})`
+  font-weight: 400;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+`;
+const FieldBoxContent = styled(yakDomTag("div"))`
+  margin-right: auto;
+  min-width: 0;
+`;
+const DeleteButton = styled(Icon).attrs({
+  icon: 'x'
+})`
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 50%;
+  display: inline-block;
+  font-size: 18px;
+  margin-left: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  color: ${__yakProps => {
+  const v = getColor('gray120');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  background-color: rgba(0,0,0,0.08);
+  flex-shrink: 0;
+  &:hover {
+    background: rgba(0,0,0,0.11);
+  }
+  &:active {
+    background: rgba(0,0,0,0.13);
+  }
+`;
+const DropdownButton = styled(Icon).attrs({
+  icon: 'arrow-down'
+})`
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 50%;
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  color: ${__yakProps => {
+  const v = getColor('gray120');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  background-color: rgba(0,0,0,0.08);
+  flex-shrink: 0;
+  position: relative;
+  &:hover {
+    background: rgba(0,0,0,0.11);
+  }
+  &:active {
+    background: rgba(0,0,0,0.13);
+  }
+`;
+const DescText = styled(yakDomTag("div"))`
+  font-weight: 400;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+  margin-top: 0.25rem;
+`;
+const FieldBox = styled(_ref => {
+  let {
+      className,
+      label,
+      helpText,
+      descText,
+      actionLabel,
+      rightContainer,
+      onClick,
+      icon,
+      remove,
+      children,
+      dropDownMenu
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const menuToggle = usePopupToggle();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: className,
+    onClick: onClick
+  }, props), icon && /*#__PURE__*/React.createElement(FieldBoxIcon, {
+    icon: icon
+  }), /*#__PURE__*/React.createElement(FieldBoxContent, null, label, helpText && /*#__PURE__*/React.createElement(HelpText, null, " ", helpText), descText && /*#__PURE__*/React.createElement(DescText, null, descText), children), actionLabel && /*#__PURE__*/React.createElement(TextButton, null, actionLabel), rightContainer && /*#__PURE__*/React.createElement("div", {
+    className: "rightContainer"
+  }, rightContainer), remove && /*#__PURE__*/React.createElement(DeleteButton, {
+    onClick: constrainEvent(remove)
+  }), dropDownMenu && /*#__PURE__*/React.createElement(DropdownButton, {
+    onClick: constrainEvent(menuToggle.toggle)
+  }, menuToggle.isOpen && callIfFunction(dropDownMenu)));
+}).attrs({
+  className: "styled-field-box"
+})`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: ${__yakProps => {
+  const v = getColor('lightBluishGray');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  border-radius: 8px;
+  min-height: 42px;
+  padding: 1rem 1.25rem;
+  align-items: center;
+  font-size: 14px;
+  color: ${__yakProps => {
+  const v = getColor('gray60');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  position: relative;
+  transition: border-radius 0.5s ease;
+  ${props => props.onClick && css`
+    cursor: pointer;
+    &:hover {
+      background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
+    }
+    &:active {
+      background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
+      transition: none;
+    }
+  `}
+  & ~ & {
+   margin-top: 0.75rem;
+  }
+  @media (max-width: 600px) {
+    min-height: 54px;
+    font-size: 15px !important;
+  }
+  ${TextButton}, .rightContainer {
+    margin-left: 1rem;
+  }
+`;
+
+export { FieldBox, FieldBoxAction, FieldBoxHelpText, FieldBoxIcon };
+//# sourceMappingURL=FieldBox.mjs.map

package/lib-yak/FieldBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldBox.mjs","sources":["../src/FieldBox.jsx"],"sourcesContent":["import React from 'react'\nimport {darken} from 'polished'\nimport styled, {css} from 'styled-components'\nimport {media, callIfFunction, constrainEvent} from '@startlibs/utils';\nimport {Icon, TextButton} from '@startlibs/components'\nimport {getColor } from '@startlibs/utils';\nimport {usePopupToggle } from '@startlibs/core';\nimport {HelpText} from './Field'\n\nexport const FieldBoxIcon = styled(Icon)`\n  font-size: 25px;\n  width: 25px;\n  text-align: center;\n  margin-right: 1rem;\n`\nexport const FieldBoxAction = styled.div`\n  margin-left: auto;\n  color: ${getColor('main')};\n  padding-left: 1rem;\n  font-size: 13px;\n  font-weight: 500;\n`\n  \nexport const FieldBoxHelpText = styled.span`\n  font-weight: 400;\n  color: rgba(0,0,0,0.4);\n  font-size: 12px;\n`\n\nconst FieldBoxContent = styled.div`\n  margin-right: auto;\n  min-width: 0;\n`\n\nconst DeleteButton = styled(Icon).attrs({icon: 'x'})`\n  width: 24px;\n  height: 24px;\n  line-height: 24px;\n  border-radius: 50%;\n  display: inline-block;\n  font-size: 18px;\n  margin-left: 0.75rem;\n  text-align: center;\n  cursor: pointer;\n  color: ${getColor('gray120')};\n  background-color: rgba(0,0,0,0.08);\n  flex-shrink: 0;\n  &:hover {\n    background: rgba(0,0,0,0.11);\n  }\n  &:active {\n    background: rgba(0,0,0,0.13);\n  }\n`\nconst DropdownButton = styled(Icon).attrs({icon: 'arrow-down'})`\n  width: 24px;\n  height: 24px;\n  line-height: 24px;\n  border-radius: 50%;\n  display: inline-block;\n  font-size: 14px;\n  margin-left: 0.75rem;\n  text-align: center;\n  cursor: pointer;\n  color: ${getColor('gray120')};\n  background-color: rgba(0,0,0,0.08);\n  flex-shrink: 0;\n  position: relative;\n  &:hover {\n    background: rgba(0,0,0,0.11);\n  }\n  &:active {\n    background: rgba(0,0,0,0.13);\n  }\n`\n\nconst DescText = styled.div `\n  font-weight: 400;\n  color: rgba(0,0,0,0.4);\n  font-size: 12px;\n  margin-top: 0.25rem;\n`\n\n\nexport const FieldBox = styled(({className,label,helpText,descText,actionLabel,rightContainer,onClick,icon,remove,children,dropDownMenu,...props}) => {\n  const menuToggle = usePopupToggle()\n  return <div className={className} onClick={onClick} {...props}>\n    {icon && <FieldBoxIcon icon={icon}/>}\n    <FieldBoxContent>\n        {label}{helpText && <HelpText> {helpText}</HelpText>}\n        {descText && <DescText>{descText}</DescText>}\n      {children}\n    </FieldBoxContent>\n    {actionLabel && <TextButton>{actionLabel}</TextButton>}\n    {rightContainer && <div className=\"rightContainer\">{rightContainer}</div>}\n    {remove && <DeleteButton onClick={constrainEvent(remove)}/>}\n    {\n      dropDownMenu && <DropdownButton onClick={constrainEvent(menuToggle.toggle)}>\n        {menuToggle.isOpen && callIfFunction(dropDownMenu)}\n      </DropdownButton>\n    }\n  </div>\n})`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: ${getColor('lightBluishGray')};\n  border-radius: 8px;\n  min-height: 42px;\n  padding: 1rem 1.25rem;\n  align-items: center;\n  font-size: 14px;\n  color: ${getColor('gray60')};\n  position: relative;\n  transition: border-radius 0.5s ease;\n  ${props => props.onClick && css`\n    cursor: pointer;\n    &:hover {\n      background: ${props => darken(0.035, getColor('lightBluishGray')(props))};\n    }\n    &:active {\n      background: ${props => darken(0.05, getColor('lightBluishGray')(props))};\n      transition: none;\n    }\n  `}\n  & ~ & {\n   margin-top: 0.75rem;\n  }\n  ${media.mobile`\n    min-height: 54px;\n    font-size: 15px !important;\n  `}\n  ${TextButton}, .rightContainer {\n    margin-left: 1rem;\n  }\n`"],"names":["FieldBoxIcon","styled","Icon","attrs","className","FieldBoxAction","yakDomTag","__yakProps","v","getColor","FieldBoxHelpText","FieldBoxContent","DeleteButton","icon","DropdownButton","DescText","FieldBox","_ref","label","helpText","descText","actionLabel","rightContainer","onClick","remove","children","dropDownMenu","props","_objectWithoutProperties","_excluded","menuToggle","usePopupToggle","React","createElement","_extends","HelpText","TextButton","constrainEvent","toggle","isOpen","callIfFunction","css","darken"],"mappings":"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"}

package/lib-yak/Form.mjs

@@ -0,0 +1,322 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _set from 'lodash/fp/set';
+import _update from 'lodash/fp/update';
+import _isFunction from 'lodash/fp/isFunction';
+import _get from 'lodash/fp/get';
+import React, { useContext, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
+import { willUseSpreadState, useRefState, StartlibsContext, useToggle, useIsUnmounted, useConsumerCatalog } from '@startlibs/core';
+import { _s, callIfFunction, ifUndefined } from '@startlibs/utils';
+import { useProvideErrors } from './Errors.mjs';
+import { useDraftConfirmation } from './useDraftConfirmation.mjs';
+
+const _excluded = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const getFormResponse = function (setter) {
+  let path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return (_, v) => setter(_s.get(path, v));
+};
+const getFormValues = function (setter) {
+  let path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return values => setter(_s.get(path, values));
+};
+const FormContext = /*#__PURE__*/React.createContext({});
+const ComponentMetaContext = /*#__PURE__*/React.createContext({});
+const [useProvideValues, useSpreadValue, FormValueContext] = willUseSpreadState();
+const [useProvideMeta, useMeta] = willUseSpreadState();
+const useFormValue = useSpreadValue;
+const useFormValueRef = () => {
+  const [get, set] = useContext(FormValueContext);
+  return [get, set];
+};
+const useFormMeta = useMeta;
+const useForm = (_ref, ref) => {
+  let {
+    action,
+    alwaysSave = false,
+    skipDom = false,
+    values: initialValues = {},
+    meta = {},
+    transform = v => v,
+    preValidation = () => false,
+    loadingBeforeValidate,
+    onSuccess = () => {},
+    onFailure = () => {},
+    onNonPreValidation,
+    onChange,
+    autoComplete
+  } = _ref;
+  const outerConfig = {
+    onSuccess,
+    onFailure,
+    transform,
+    preValidation,
+    alwaysSave,
+    action
+  };
+  const currentInitialValues = useRefState(initialValues);
+  currentInitialValues.set(initialValues);
+  const startlibs = useContext(StartlibsContext);
+  const [hasChanged, setHasChangedValue] = useState(false);
+  const hasChangedRef = useRefState(false);
+  const shouldResubmitForm = useToggle(false, (next, prev) => prev && !next && errorsUtils.removeErrorPath('_shouldResubmitForm'));
+  const resubmittingForm = useRefState(false);
+  const loading = useToggle();
+  const isUnmounted = useIsUnmounted();
+  const [ErrorsProvider, errorsContext, errorsUtils] = useProvideErrors();
+  const [registeredComponentMetas, componentMetasManager] = useConsumerCatalog();
+  const [confirmDraftContent, draftToggle, draftConfirmation] = useDraftConfirmation(() => submitForm(undefined, {
+    isConfirming: true
+  }));
+  const handleValuesChange = (prev, next) => {
+    if (!hasChangedRef.get()) {
+      setHasChanged(true);
+    }
+    callIfFunction(onChange, prev, next, utils);
+  };
+  const setHasChanged = v => {
+    shouldResubmitForm.close();
+    if (v !== hasChangedRef.get()) {
+      draftToggle.openWith(v);
+      setHasChangedValue(v);
+      hasChangedRef.set(v);
+    }
+  };
+  const [ValuesProvider, valuesManager, [getValues, setValues]] = useProvideValues(initialValues, handleValuesChange);
+  const [MetaProvider, metaManager, [getMeta, setMeta]] = useProvideMeta(callIfFunction(meta, initialValues), (prev, next) => {
+    if (prev.submittingFiles !== 0 && next.submittingFiles === 0) {
+      if (resubmittingForm.get()) {
+        if (shouldResubmitForm.get()) {
+          resubmittingForm.get().confirm();
+        } else {
+          resubmittingForm.get().cancel();
+        }
+        resubmittingForm.set(false);
+      }
+    }
+  });
+  const validate = async function () {
+    let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getValues();
+    let validation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : preValidation;
+    const errors = await callIfFunction(validation, values, utils);
+    if (errors) {
+      errorsUtils.setErrors(errors);
+    }
+    return errors;
+  };
+  const verifyImagesAndSubmitForm = values => {
+    if (values && getMeta('submittedFiles')) {
+      const valuesWithUploadedImages = getMeta('submittedFiles').reduce((acc, _ref2) => {
+        let {
+          path,
+          file,
+          image
+        } = _ref2;
+        if (_s.get(path, acc) === file) {
+          return _s.set(path, image, acc);
+        } else {
+          return acc;
+        }
+      }, values);
+      return submitForm(valuesWithUploadedImages);
+    } else {
+      return submitForm(values);
+    }
+  };
+  const submitForm = async function (optValues) {
+    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (loading.get()) {
+      return new Promise(() => {});
+    }
+    const values = ifUndefined(callIfFunction(optValues, getValues()), getValues());
+    if (getMeta('submittingFiles')) {
+      shouldResubmitForm.open();
+      errorsUtils.setError('_shouldResubmitForm', startlibs.FormUploadingFileError || startlibs.FormUploadingImageError);
+      if (config.isConfirming) {
+        return Promise.reject();
+      }
+      return new Promise((resolve, reject) => {
+        resubmittingForm.set({
+          confirm: () => resolve(verifyImagesAndSubmitForm(values)),
+          cancel: () => reject()
+        });
+      });
+    }
+    const {
+      onSuccess,
+      onFailure,
+      transform,
+      alwaysSave,
+      preValidation,
+      action
+    } = _objectSpread(_objectSpread({}, outerConfig), config);
+    if (preValidation && loadingBeforeValidate) {
+      loading.open();
+    }
+    const errors = await validate(values, preValidation);
+    if (errors) {
+      loading.close();
+      callIfFunction(onNonPreValidation, values, errors);
+      throw {
+        unvalidated: errors
+      };
+    }
+    const request = await transform(values, {
+      meta: getMeta()
+    });
+    if (!request) {
+      loading.close();
+      return {
+        untransformed: true
+      };
+    } else {
+      loading.open();
+      errorsUtils.clearErrors();
+      if (!alwaysSave && !hasChangedRef.get() && (!values || values === getValues())) {
+        await onSuccess(request);
+        if (!isUnmounted()) {
+          loading.close();
+        }
+        return {
+          unrequested: request
+        };
+      }
+      try {
+        const response = await action(request);
+        await onSuccess(request, response);
+        if (!isUnmounted()) {
+          setHasChanged(false);
+          loading.close();
+        }
+        return {
+          request,
+          response
+        };
+      } catch (rejection) {
+        if (_get([0, 'errors'], rejection)) {
+          errorsUtils.setErrors(rejection[0].errors);
+        }
+        try {
+          await onFailure(request, rejection, utils);
+        } catch (e) {
+          console.log(e);
+        }
+        if (!isUnmounted()) {
+          loading.close();
+        }
+        throw {
+          request,
+          rejection
+        };
+      }
+    }
+  };
+  const willSubmitForm = e => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    return submitForm();
+  };
+  const inputs = [loading, hasChanged, errorsContext, initialValues, transform, preValidation, onSuccess, onFailure, alwaysSave, action, shouldResubmitForm];
+  const utils = useMemo(() => _objectSpread({
+    setValue: function (path, value) {
+      let hasChanged = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      setValues(_isFunction(value) ? _update(path, value) : _set(path, value), path, hasChanged ? null : {
+        ignoreCallback: true
+      });
+    },
+    setValues: function (valuesSetter) {
+      let hasChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      setValues(valuesSetter, undefined, hasChanged ? null : {
+        ignoreCallback: true
+      });
+    },
+    resetForm: () => {
+      setValues(ifUndefined(currentInitialValues.get(), {}));
+      setHasChanged(false);
+    },
+    resetField: path => {
+      const initialValue = _s.get(path, currentInitialValues.get());
+      if (initialValue !== getValues(path)) {
+        setValues(_s.set(path, initialValue));
+      }
+    },
+    getOriginalValues: () => currentInitialValues.get(),
+    getOriginalValue: path => _s.get(path, currentInitialValues.get()),
+    getValues,
+    getValue: getValues,
+    getTransformedValues: () => transform(getValues()),
+    setHasChanged,
+    setMeta,
+    getMeta,
+    confirm: draftConfirmation,
+    validate: (props, validation) => !validate(props, validation),
+    submitForm,
+    willSubmitForm,
+    isLoading: loading.isOpen || shouldResubmitForm.isOpen,
+    hasChanged,
+    getHasChanged: () => hasChangedRef.get()
+  }, errorsUtils), inputs);
+  useImperativeHandle(ref, () => utils, inputs);
+  return [children => /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: utils
+  }, /*#__PURE__*/React.createElement(ComponentMetaContext.Provider, {
+    value: componentMetasManager
+  }, /*#__PURE__*/React.createElement(ValuesProvider, {
+    value: valuesManager
+  }, /*#__PURE__*/React.createElement(MetaProvider, {
+    value: metaManager
+  }, /*#__PURE__*/React.createElement(ErrorsProvider, {
+    value: errorsContext
+  }, !skipDom ? /*#__PURE__*/React.createElement("form", {
+    autoComplete: autoComplete,
+    noValidate: true,
+    onSubmit: willSubmitForm
+  }, callIfFunction(children, utils)) : callIfFunction(children, utils))))), confirmDraftContent), utils];
+};
+const WithForm = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      children
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  return useForm(rest, ref)[0](children);
+});
+const Form = _ref4 => {
+  let {
+    transform,
+    preValidation,
+    onSuccess,
+    onFailure,
+    children
+  } = _ref4;
+  const form = useContext(FormContext);
+  const onSubmit = e => {
+    if (e) e.preventDefault();
+    return form.submitForm(undefined, undefined, {
+      transform,
+      preValidation,
+      onSuccess,
+      onFailure
+    });
+  };
+  return typeof children === 'function' ? children(onSubmit) : /*#__PURE__*/React.createElement("form", {
+    noValidate: true,
+    onSubmit: onSubmit
+  }, children);
+};
+const withForm = Component => /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(WithForm, props, form => /*#__PURE__*/React.createElement(Component, _extends({
+  form: form
+}, props, {
+  ref: ref
+}))));
+const withForm2 = () => Component => /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(WithForm, props, form => /*#__PURE__*/React.createElement(Component, _extends({
+  form: form
+}, props, {
+  ref: ref
+}))));
+
+export { ComponentMetaContext, Form, FormContext, WithForm, getFormResponse, getFormValues, useForm, useFormMeta, useFormValue, useFormValueRef, withForm, withForm2 };
+//# sourceMappingURL=Form.mjs.map