@startlibs/form 1.1.3 → 1.2.0-rc.1

package/lib-yak/alt/radiobox/IconRadioBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconRadioBox.mjs","sources":["../../../src/alt/radiobox/IconRadioBox.jsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {Icon} from '@startlibs/components'\nimport {customTheme, getColor} from '@startlibs/utils'\nimport {Radiobox} from '../../Radiobox'\nimport {lighten, desaturate} from 'polished'\n\nexport const IconRadioBoxText = styled.div`\n  flex-grow: 1;\n  padding: 0 0.5rem 0.5rem;\n  min-height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  font-size: 12px;\n  color: ${getColor('gray120')};\n  ${props => props.checked && css`\n    color: ${getColor('main')};\n  `}\n  ${props => props.highlightedDesc && css`\n    background: ${getColor('gray240')};\n    padding: 0.25rem 0.5rem;\n    min-height: 3rem;\n    ${props => props.checked && css`\n      background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n    `}\n  `}\n`\n\nexport const IconRadioBoxIconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n`\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: white;\n  border: 1px solid ${getColor('gray210')};\n  overflow: hidden;\n  color: ${getColor('gray150')};\n\n  ${Icon} {\n    font-size: 100px;\n    line-height: 50px;\n    line-height: 76px;\n    width: 100%;\n  }\n\n  ${props => props.checked && css`\n    color: ${getColor('main')};\n    border-color: ${getColor('main')};\n  `}\n\n  input {\n    opacity: 0;\n    position: absolute;\n    left: -20000000px;\n  }\n\n  ${props => props.focused && `\n    ${IconRadioBoxIconContainer}::after {\n      content: '';\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      left: -4px;\n      bottom: -4px;\n      border-radius: 10px;\n      border: 3px solid rgba(0, 0, 0, 0.15);\n  }`}\n\n  ${customTheme(\"IconRadioBox\")}\n`\n\n\nexport const IconRadioBox = styled(({icon, label, highlightedDesc,...props}) =>\n  <Radiobox {...props}>{({checked, focused, hasErrors, disabled}) =>\n    <Wrapper checked={checked} focused={focused}>\n      <IconRadioBoxIconContainer><Icon icon={icon}/></IconRadioBoxIconContainer>\n      {checked}\n      <IconRadioBoxText highlightedDesc={highlightedDesc} checked={checked}>\n        {label}\n      </IconRadioBoxText>\n    </Wrapper>\n  }</Radiobox>\n)`outline: none;`\n"],"names":["IconRadioBoxText","styled","yakDomTag","attrs","className","__yakProps","v","getColor","props","checked","css","highlightedDesc","desaturate","lighten","IconRadioBoxIconContainer","Wrapper","Icon","focused","IconRadioBox","_ref","icon","label","_objectWithoutProperties","_excluded","React","createElement","Radiobox","_ref2","hasErrors","disabled"],"mappings":"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"}

package/lib-yak/alt/radiobox/SimpleRadiobox.mjs

@@ -0,0 +1,203 @@
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import { getColor } from '@startlibs/utils';
+import { styled, css } from '@yak/react';
+import { desaturate, lighten } from 'polished';
+import { HelpText } from '../../Field.mjs';
+import { Radiobox } from '../../Radiobox.mjs';
+
+const CssCircle = styled(yakDomTag("div"))`
+  border-radius: 50%;
+  content: '';
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  position: absolute;
+  left: -2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  
+  ${__yakProps => __yakProps["focused"] && css`
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    border-color: ${__yakProps => {
+  const v = getColor('gray180');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  `}
+
+  ${__yakProps => __yakProps["checked"] && css`
+    &:before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 4px;
+      border-radius: 50%;
+      position: absolute;
+      background-color: ${__yakProps => {
+  const v = getColor('gray90');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    }
+  `}
+  
+`;
+const TextLabel = styled(yakDomTag("span"))`
+  font-size: 13px;
+  line-height: 16px;
+  margin: 2px 0.25rem 2px 0;
+  display: block;
+`;
+const DescText = styled(yakDomTag("div"))`
+  color: rgba(0,0,0,0.4);
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+`;
+const TextLabelContainer = styled(yakDomTag("div"))`
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-wrap: wrap;
+`;
+const RadioboxContent = styled(yakDomTag("div"))`
+  cursor: pointer;
+  position: relative;
+  padding-left: 2rem;
+  transition: background 0.2s linear;
+  ${props => props.framed && css`
+    border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    border-radius: 8px;
+    min-height: 3rem;
+    min-width: 8rem;
+    background: white;
+    width: 100%;
+    align-items: center;
+    display: flex;
+    &:hover {
+      background: rgb(245,245,245);
+    }
+    &:active {
+      background: rgb(235,235,235);
+      transition: none;
+    }
+    padding: 10px 12px 10px 32px;
+    @media (min-width: 601px) {
+      padding: 7px 12px 7px 32px;
+    }
+    ${props => props.hasErrors && css`
+      border-color: ${__yakProps => {
+  const v = getColor('alert');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}} !important;
+    `}
+    ${props => props.checked && props.highlightSelected && css`
+      border-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      &:hover {
+        background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      }
+      ${CssCircle} {
+        &:before {
+          background-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+        }
+      }
+    `}
+    ${props => props.checked && props.ultraHighlightSelected && css`
+      border-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      background: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      color: white;
+      &:hover {
+        background: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      }
+      ${CssCircle} {
+        &:before {
+          background-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+        }
+      }
+      ${HelpText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+      ${DescText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+    `}
+    ${props => props.disabled && css`
+      background-color: rgba(0,0,0,0.075) !important;
+      &[disabled] {
+        opacity: 0.75 !important;
+      }
+      ${CssCircle} {
+        background: rgba(255,255,255,0.25);
+      }
+    `}
+  `}
+`;
+const SimpleRadiobox = styled(props => /*#__PURE__*/React.createElement(Radiobox, props, _ref => {
+  let {
+    disabled,
+    checked,
+    hasErrors,
+    focused,
+    tabIndex,
+    framedBoxes,
+    highlightSelected,
+    ultraHighlightSelected
+  } = _ref;
+  return /*#__PURE__*/React.createElement(RadioboxContent, {
+    checked: checked,
+    framed: props.framedBoxes,
+    highlightSelected: props.highlightSelected,
+    ultraHighlightSelected: props.ultraHighlightSelected,
+    hasErrors: hasErrors,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "textContainer"
+  }, /*#__PURE__*/React.createElement(TextLabelContainer, null, /*#__PURE__*/React.createElement(CssCircle, {
+    checked: checked,
+    focused: focused,
+    tabIndex: tabIndex
+  }), /*#__PURE__*/React.createElement(TextLabel, null, props.label), props.helpText && /*#__PURE__*/React.createElement(HelpText, null, " ", props.helpText)), props.descText && /*#__PURE__*/React.createElement(DescText, null, props.descText)));
+})).attrs({
+  className: "styled-simple-radiobox"
+})`
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 1rem;
+  display: flex;
+  ${__yakProps => __yakProps["disabled"] && css`
+    pointer-events: none;
+  `}
+  .textContainer {
+    width: 100%;
+  }
+`;
+
+export { SimpleRadiobox };
+//# sourceMappingURL=SimpleRadiobox.mjs.map

package/lib-yak/alt/radiobox/SimpleRadiobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleRadiobox.mjs","sources":["../../../src/alt/radiobox/SimpleRadiobox.jsx"],"sourcesContent":["import React from 'react'\n\nimport { getColor, ifProp, media } from '@startlibs/utils';\nimport styled, {css} from 'styled-components'\nimport {lighten, desaturate} from 'polished'\nimport {HelpText} from '../../Field'\nimport {Radiobox} from '../../Radiobox'\n\nconst CssCircle = styled.div`\n  border-radius: 50%;\n  content: '';\n  border: 1px solid ${getColor('gray210')};\n  width: 18px;\n  height: 18px;\n  background-color: white;\n  position: absolute;\n  left: -2rem;\n  top: 50%;\n  transform: translateY(-50%);\n  \n  ${ifProp('focused', css`\n    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n    border-color: ${getColor('gray180')};\n  `)}\n\n  ${ifProp('checked', css`\n    &:before {\n      content: '';\n      width: 8px;\n      height: 8px;\n      top: 50%;\n      transform: translateY(-50%);\n      left: 4px;\n      border-radius: 50%;\n      position: absolute;\n      background-color: ${getColor('gray90')};\n    }\n  `)}\n  \n`\nconst TextLabel = styled.span `\n  font-size: 13px;\n  line-height: 16px;\n  margin: 2px 0.25rem 2px 0;\n  display: block;\n`\nconst DescText = styled.div `\n  color: rgba(0,0,0,0.4);\n  display: block;\n  font-size: 12px;\n  font-weight: 400;\n`\nconst TextLabelContainer = styled.div `\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-wrap: wrap;\n`\nconst RadioboxContent = styled.div `\n  cursor: pointer;\n  position: relative;\n  padding-left: 2rem;\n  transition: background 0.2s linear;\n  ${props => props.framed && css`\n    border: 1px solid ${getColor('gray210')};\n    border-radius: 8px;\n    min-height: 3rem;\n    min-width: 8rem;\n    background: white;\n    width: 100%;\n    align-items: center;\n    display: flex;\n    &:hover {\n      background: rgb(245,245,245);\n    }\n    &:active {\n      background: rgb(235,235,235);\n      transition: none;\n    }\n    padding: 10px 12px 10px 32px;\n    ${media.desktop`\n      padding: 7px 12px 7px 32px;\n    `}\n    ${props => props.hasErrors && css`\n      border-color: ${getColor('alert')} !important;\n    `}\n    ${props => props.checked && props.highlightSelected && css`\n      border-color: ${getColor('main')};\n      background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n      &:hover {\n        background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n      }\n      ${CssCircle} {\n        &:before {\n          background-color: ${getColor('main')};\n        }\n      }\n    `}\n    ${props => props.checked && props.ultraHighlightSelected && css`\n      border-color: ${getColor('main')};\n      background: ${getColor('main')};\n      color: white;\n      &:hover {\n        background: ${getColor('main')};\n      }\n      ${CssCircle} {\n        &:before {\n          background-color: ${getColor('main')};\n        }\n      }\n      ${HelpText} {\n        color: rgba(255, 255, 255, 0.65);\n      }\n      ${DescText} {\n        color: rgba(255, 255, 255, 0.65);\n      }\n    `}\n    ${props => props.disabled && css`\n      background-color: rgba(0,0,0,0.075) !important;\n      &[disabled] {\n        opacity: 0.75 !important;\n      }\n      ${CssCircle} {\n        background: rgba(255,255,255,0.25);\n      }\n    `}\n  `}\n`\n\nexport const SimpleRadiobox = styled((props) =>\n  <Radiobox {...props}>{({disabled, checked, hasErrors, focused, tabIndex, framedBoxes, highlightSelected, ultraHighlightSelected}) =>\n    <RadioboxContent checked={checked} framed={props.framedBoxes} highlightSelected={props.highlightSelected} ultraHighlightSelected={props.ultraHighlightSelected} hasErrors={hasErrors} disabled={disabled}>\n      <div className=\"textContainer\">\n        <TextLabelContainer>\n          <CssCircle checked={checked} focused={focused} tabIndex={tabIndex}/>\n          <TextLabel>{props.label}</TextLabel>{props.helpText && <HelpText> {props.helpText}</HelpText>}\n        </TextLabelContainer>\n        {props.descText && <DescText>{props.descText}</DescText>}\n      </div>\n    </RadioboxContent>\n  }</Radiobox>\n)`\n  cursor: pointer;\n  position: relative;\n  margin-bottom: 1rem;\n  display: flex;\n  ${ifProp('disabled', css`\n    pointer-events: none;\n  `)}\n  .textContainer {\n    width: 100%;\n  }\n`"],"names":["CssCircle","styled","yakDomTag","__yakProps","v","getColor","css","TextLabel","DescText","TextLabelContainer","RadioboxContent","props","framed","hasErrors","checked","highlightSelected","desaturate","lighten","ultraHighlightSelected","HelpText","disabled","SimpleRadiobox","React","createElement","Radiobox","_ref","focused","tabIndex","framedBoxes","className","label","helpText","descText","attrs"],"mappings":"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"}

package/lib-yak/alt/radiobox/TabRadiobox.mjs

@@ -0,0 +1,117 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import { styled, css } from '@yak/react';
+import { Button } from '@startlibs/components';
+import { getColor } from '@startlibs/utils';
+import { Radiobox } from '../../Radiobox.mjs';
+import { desaturate, lighten } from 'polished';
+
+const _excluded = ["isLast", "isFirst", "label", "white", "icon"];
+const TabButton = styled(Button).attrs({
+  className: "styled-tab-button styled-theme-tab-button"
+})`
+  width:100%;
+  margin-left: 0;  
+  padding: 9px 1rem;
+  flex-grow: 1;
+  background: ${props => props.white ? 'white' : getColor('gray240')};
+  box-shadow: none;
+  color: ${__yakProps => {
+  const v = getColor('gray120');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  border-left-width: 0;
+  height: 100%;
+  &:hover {
+    background: ${props => desaturate(0.6, lighten(0.5, getColor("main")(props)))};
+  }
+  ${__yakProps => __yakProps["checked"] && css`
+    &, &:hover {
+      border-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      background-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      border-left-width: 1px;
+      color: #fff;
+      cursor: default;
+    }
+  `}
+  
+  ${props => props.isFirst && css`
+    border-left-width: 1px;
+  `}
+  ${props => props.isFirst !== undefined && !props.isFirst && css`
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    &:focus:after{
+      border-bottom-left-radius: 2px;
+      border-top-left-radius: 2px;
+    }
+  `}
+  ${props => props.isLast !== undefined && !props.isLast && css`
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    &:focus:after{
+      border-bottom-right-radius: 2px;
+      border-top-right-radius: 2px;
+      z-index: 2;
+    }
+  `}
+  @media (max-width: 600px) {
+    min-width: 0;
+    ${props => props.icon ? css`
+      padding-left: 1.25rem;
+      padding-right: 1rem;
+    ` : css`
+      padding-left: 0.25rem;
+      padding-right: 0.25rem;
+    `}
+  } 
+  
+`;
+const InnerButton = styled(yakDomTag("a"))``;
+const TabRadiobox = styled(_ref => {
+  let {
+      isLast,
+      isFirst,
+      label,
+      white,
+      icon
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Radiobox, props, _ref2 => {
+    let {
+      disabled,
+      checked,
+      hasErrors,
+      focused
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(TabButton, {
+      innerAs: InnerButton,
+      tabIndex: -1,
+      focused: focused,
+      isFirst: isFirst,
+      isLast: isLast,
+      checked: checked,
+      disabled: disabled,
+      white: white,
+      icon: icon
+    }, label);
+  });
+}).attrs({
+  className: "styled-tab-radiobox"
+})`
+  display: inline-block;
+`;
+
+export { TabButton, TabRadiobox };
+//# sourceMappingURL=TabRadiobox.mjs.map

package/lib-yak/alt/radiobox/TabRadiobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabRadiobox.mjs","sources":["../../../src/alt/radiobox/TabRadiobox.jsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {Button} from '@startlibs/components'\nimport {ifProp, getColor, media, customTheme} from '@startlibs/utils'\nimport {Radiobox} from '../../Radiobox'\nimport {lighten, desaturate} from 'polished'\n\nexport const TabButton = styled(Button)`\n  width:100%;\n  margin-left: 0;  \n  padding: 9px 1rem;\n  flex-grow: 1;\n  background: ${props => props.white ? 'white' : getColor('gray240')};\n  box-shadow: none;\n  color: ${getColor('gray120')};\n  border: 1px solid ${getColor('gray210')};\n  border-left-width: 0;\n  height: 100%;\n  &:hover {\n    background: ${props => desaturate(0.6, lighten(0.5, getColor(\"main\")(props)))};\n  }\n  ${ifProp('checked', css`\n    &, &:hover {\n      border-color: ${getColor('main')};\n      background-color: ${getColor('main')};\n      border-left-width: 1px;\n      color: #fff;\n      cursor: default;\n    }\n  `)}\n  \n  ${props => props.isFirst && `\n    border-left-width: 1px;\n  `}\n  ${props => props.isFirst!==undefined && !props.isFirst && `\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    &:focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  `}\n  ${props => props.isLast!==undefined && !props.isLast && `\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    &:focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  `}\n  ${media.mobile`\n    min-width: 0;\n    ${props => props.icon ? `\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    `:`\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    `}\n  `} \n  ${customTheme('TabButton')}\n`\n\nconst InnerButton = styled.a``\n\nexport const TabRadiobox = styled(({isLast, isFirst, label, white,icon,...props}) =>\n  <Radiobox {...props}>{({disabled, checked, hasErrors, focused}) =>\n    <TabButton innerAs={InnerButton} tabIndex={-1} focused={focused} isFirst={isFirst} isLast={isLast} checked={checked} disabled={disabled} white={white} icon={icon}>{label}</TabButton>\n  }</Radiobox>\n)`\n  display: inline-block;\n`"],"names":["TabButton","styled","Button","attrs","className","props","white","getColor","__yakProps","v","desaturate","lighten","css","isFirst","undefined","isLast","icon","InnerButton","yakDomTag","TabRadiobox","_ref","label","_objectWithoutProperties","_excluded","React","createElement","Radiobox","_ref2","disabled","checked","hasErrors","focused","innerAs","tabIndex"],"mappings":"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"}

package/lib-yak/enhanceInput.mjs

@@ -0,0 +1,131 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _identity from 'lodash/fp/identity';
+import React, { useState, useContext, useEffect } from 'react';
+import { ifUndefined, formatPath, callIfFunction, _s } from '@startlibs/utils';
+import { ErrorsContext } from './Errors.mjs';
+import { useFormValue } from './Form.mjs';
+
+const _excluded = ["raw"];
+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 PathContext = /*#__PURE__*/React.createContext([]);
+const enhancedInputDisplayName = 'EnhancedInput';
+const skipValidation = () => true;
+const formInput = _ref => {
+  let {
+    undefinedPlaceholder,
+    isChecked = _identity,
+    truthSource = useFormValue,
+    transform = _identity,
+    validation = skipValidation,
+    onChange,
+    fieldValue,
+    path: propPath
+  } = _ref;
+  const contextPath = useContext(PathContext);
+  const {
+    paths
+  } = useContext(ErrorsContext);
+  const path = ifUndefined(propPath, contextPath);
+  const formattedPath = formatPath(path);
+  const [formValue, setFormValue] = truthSource(formattedPath);
+  const setValue = (value, element) => {
+    const opts = {
+      path,
+      prevValue: formValue,
+      element
+    };
+    if (!validation(value, opts)) {
+      return;
+    }
+    const transformedValue = transform(callIfFunction(value, formValue), opts);
+    setFormValue(transformedValue);
+    callIfFunction(onChange, transformedValue, opts);
+  };
+  const setValueFromEventTarget = e => setValue(e.currentTarget.value, e.currentTarget);
+  const setFromField = () => setValue(fieldValue);
+  const toggle = () => setValue(!isChecked(formValue) ? fieldValue || true : !!fieldValue && undefined);
+  const toggleItem = () => setValue(_s.itemToggle(fieldValue));
+  return [ifUndefined(formValue, undefinedPlaceholder), setValue, {
+    hasErrors: paths.has(formattedPath),
+    setFromField,
+    toggle,
+    toggleItem,
+    name: formattedPath,
+    setValueFromEventTarget
+  }];
+};
+const rawInput = _ref2 => {
+  var _errorUtils$paths;
+  let {
+    value,
+    path,
+    isChecked = _identity,
+    name,
+    setValue: setValueProp,
+    validation = skipValidation,
+    transform = _identity,
+    onChange,
+    fieldValue,
+    defaultValue
+  } = _ref2;
+  const [rawValue, setRawValue] = useState(ifUndefined(value, defaultValue));
+  const errorUtils = useContext(ErrorsContext);
+  const formattedPath = formatPath(path);
+  useEffect(() => {
+    setRawValue(value);
+  }, [value]);
+  const setValue = (value, element) => {
+    if (!validation(value, {
+      prevValue: rawValue
+    })) {
+      return;
+    }
+    const transformedValue = transform(value);
+    setValueProp(transformedValue, element);
+    callIfFunction(onChange, transformedValue, rawValue, {
+      element
+    });
+  };
+  const setValueFromEventTarget = e => setValue(e.currentTarget.value, e.currentTarget);
+  const setFromField = () => setValue(fieldValue);
+  const toggle = () => setValue(!isChecked(rawValue));
+  const toggleItem = () => setValue(_s.itemToggle(fieldValue));
+  return [value, setValue, {
+    hasErrors: errorUtils === null || errorUtils === void 0 || (_errorUtils$paths = errorUtils.paths) === null || _errorUtils$paths === void 0 ? void 0 : _errorUtils$paths.has(formattedPath),
+    setFromField,
+    name,
+    toggle,
+    toggleItem,
+    setValueFromEventTarget
+  }];
+};
+const useInput = (props, raw) => {
+  const [isRaw] = useState(raw);
+  return isRaw ? rawInput(props) : formInput(props);
+};
+const EnhanceInput = _ref3 => {
+  let {
+      raw
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  const [value, setValue, utils] = useInput(props, raw);
+  return props.children(_objectSpread({
+    path: props.path,
+    value,
+    setValue
+  }, utils));
+};
+const enhanceInput = InputComponent => /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return /*#__PURE__*/React.createElement(EnhanceInput, props, formInput => /*#__PURE__*/React.createElement(InputComponent, _extends({}, props, {
+    ref: ref,
+    formInput: formInput
+  })));
+});
+
+export { EnhanceInput, PathContext, enhanceInput, enhancedInputDisplayName, useInput };
+//# sourceMappingURL=enhanceInput.mjs.map

package/lib-yak/enhanceInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanceInput.mjs","sources":["../src/enhanceInput.jsx"],"sourcesContent":["// @flow\nimport React, {useContext, useEffect, useState} from 'react'\nimport _ from 'lodash/fp'\nimport {_s, callIfFunction, formatPath, ifUndefined} from '@startlibs/utils'\nimport {ErrorsContext} from './Errors'\nimport {useFormValue} from './Form'\n\nexport const PathContext = React.createContext([])\nexport const enhancedInputDisplayName = 'EnhancedInput'\n\nconst undefinedToDefault = (v, defaultValue) => v === undefined ? defaultValue : v\nconst pathToStr = (v) => Array.isArray(v) ? v.join('.') : v\nconst skipValidation = () => true\n\nconst formInput = ({undefinedPlaceholder, isChecked = _.identity, truthSource = useFormValue, transform = _.identity, validation = skipValidation, onChange, fieldValue, path: propPath}) => {\n  const contextPath = useContext(PathContext)\n  const {paths} = useContext(ErrorsContext)\n  const path = ifUndefined(propPath, contextPath)\n  const formattedPath = formatPath(path)\n  const [formValue, setFormValue] = truthSource(formattedPath)\n\n  const setValue = (value, element) => {\n    const opts = {path,prevValue:formValue,element}\n    if (!validation(value,opts)) { return }\n    const transformedValue = transform(callIfFunction(value,formValue),opts)\n    setFormValue(transformedValue)\n    callIfFunction(onChange, transformedValue, opts)\n  }\n\n  const setValueFromEventTarget = (e) => setValue(e.currentTarget.value, e.currentTarget)\n\n  const setFromField = () => setValue(fieldValue)\n\n  const toggle = () => setValue(!isChecked(formValue) ? (fieldValue || true) : (!!fieldValue && undefined))\n\n  const toggleItem = () => setValue(_s.itemToggle(fieldValue))\n\n\n  return [ifUndefined(formValue,undefinedPlaceholder), setValue, {\n    hasErrors:paths.has(formattedPath),\n    setFromField,\n    toggle,\n    toggleItem,\n    name:formattedPath,\n    setValueFromEventTarget\n  }]\n\n}\n\nconst rawInput = ({value, path, isChecked = _.identity, name, setValue: setValueProp, validation = skipValidation, transform = _.identity, onChange, fieldValue, defaultValue}) => {\n  const [rawValue, setRawValue] = useState(ifUndefined(value,defaultValue))\n  const errorUtils = useContext(ErrorsContext)\n  const formattedPath = formatPath(path)\n\n  useEffect(() => {\n    setRawValue(value)\n  }, [value])\n\n  const setValue = (value, element) => {\n    if (!validation(value,{prevValue:rawValue})) { return }\n    const transformedValue = transform(value)\n    setValueProp(\n      transformedValue,\n      element\n    )\n    callIfFunction(onChange, transformedValue, rawValue, {element})\n  }\n\n  const setValueFromEventTarget = (e) => setValue(e.currentTarget.value, e.currentTarget)\n\n  const setFromField = () => setValue(fieldValue)\n\n  const toggle = () => setValue(!isChecked(rawValue))\n\n  const toggleItem = () => setValue(_s.itemToggle(fieldValue))\n\n  return [value, setValue, {\n    hasErrors:errorUtils?.paths?.has(formattedPath),\n    setFromField,\n    name,\n    toggle,\n    toggleItem,\n    setValueFromEventTarget\n  }]\n\n}\n\nexport const useInput = (props,raw) => {\n  const [isRaw] = useState(raw)\n  return isRaw ? rawInput(props) : formInput(props)\n}\n\nexport const EnhanceInput = ({raw,...props}) => {\n  const [value,setValue,utils] = useInput(props,raw)\n  return props.children({\n    path:props.path,\n    value,\n    setValue,\n    ...utils\n  })\n}\n\nexport const enhanceInput = (InputComponent) => React.forwardRef(({...props}, ref) =>\n  <EnhanceInput {...props}>{(formInput) =>\n    <InputComponent {...props} ref={ref} formInput={formInput}/>\n  }</EnhanceInput>\n)"],"names":["PathContext","React","createContext","enhancedInputDisplayName","skipValidation","formInput","_ref","undefinedPlaceholder","isChecked","_identity","truthSource","useFormValue","transform","validation","onChange","fieldValue","path","propPath","contextPath","useContext","paths","ErrorsContext","ifUndefined","formattedPath","formatPath","formValue","setFormValue","setValue","value","element","opts","prevValue","transformedValue","callIfFunction","setValueFromEventTarget","e","currentTarget","setFromField","toggle","undefined","toggleItem","_s","itemToggle","hasErrors","has","name","rawInput","_ref2","_errorUtils$paths","setValueProp","defaultValue","rawValue","setRawValue","useState","errorUtils","useEffect","useInput","props","raw","isRaw","EnhanceInput","_ref3","_objectWithoutProperties","_excluded","utils","children","_objectSpread","enhanceInput","InputComponent","forwardRef","_ref4","ref","_extends","_objectDestructuringEmpty","createElement"],"mappings":"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"}

package/lib-yak/index.mjs

@@ -0,0 +1,28 @@
+export { ComponentMetaContext, Form, FormContext, WithForm, getFormResponse, getFormValues, useForm, useFormMeta, useFormValue, useFormValueRef, withForm, withForm2 } from './Form.mjs';
+export { EnhanceInput, PathContext, enhanceInput, enhancedInputDisplayName, useInput } from './enhanceInput.mjs';
+export { BellowFieldDescription, Field, FieldDescription, FieldLabel, HelpText } from './Field.mjs';
+export { FieldBox, FieldBoxAction, FieldBoxHelpText, FieldBoxIcon } from './FieldBox.mjs';
+export { ConfirmDialog, FormDialog, useConfirmDialog, useConfirmDialogWithProps } from './useConfirmDialog.mjs';
+export { FloatLabelTextInput, TextInput, useTextInput } from './TextInput.mjs';
+export { ErrorFilterProvider, Errors, ErrorsCloseIcon, ErrorsContainer, ErrorsContext, ErrorsItem, useErrors, useErrorsUtils, useHasError, useProvideErrors, useTransientErrorHelper } from './Errors.mjs';
+export { FileInput, WithFileInput, WithImageInput } from './withFormImageInput.mjs';
+export { Checkbox } from './Checkbox.mjs';
+export { Combobox, ComboboxInput, ComboboxMenu, NO_DIGITABLE_FOUND, Option, SEPARATOR } from './Combobox.mjs';
+export { ComboboxWithCustom } from './ComboboxWithCustom.mjs';
+export { AutoComplete, AutoCompleteTextbox } from './AutoComplete.mjs';
+export { ConfirmEditableBoxes, EditableBox } from './EditableBox.mjs';
+export { FormMeta, FormValue, IfFormMeta, IfFormValue, IfFormValueUpdate, LazyFormValues, SwitchOnFormValue } from './FormValue.mjs';
+export { Radiobox } from './Radiobox.mjs';
+export { CheckboxGroup, InputboxGroup, RadioboxGroup } from './InputboxGroup.mjs';
+export { CALENDAR_LEVEL_DAY, CALENDAR_LEVEL_MONTH, CALENDAR_LEVEL_YEAR, DatePicker } from './DatePicker.mjs';
+export { ExpandableBox, PseudoExpandableBox, checkErrors } from './ExpandableBox.mjs';
+export { RichText, RichTextContainer, RichTextInput } from './RichText.mjs';
+export { IconRadioBox, IconRadioBoxIconContainer, IconRadioBoxText } from './alt/radiobox/IconRadioBox.mjs';
+export { SimpleCheckbox } from './alt/checkbox/SimpleCheckbox.mjs';
+export { ToggleCheckbox } from './alt/checkbox/ToggleCheckbox.mjs';
+export { TabButton, TabRadiobox } from './alt/radiobox/TabRadiobox.mjs';
+export { CleanTabRadiobox, Tab } from './alt/radiobox/CleanTabRadiobox.mjs';
+export { SimpleRadiobox } from './alt/radiobox/SimpleRadiobox.mjs';
+export { useDraftConfirmation } from './useDraftConfirmation.mjs';
+export { validation } from './validation.mjs';
+//# sourceMappingURL=index.mjs.map

package/lib-yak/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}