@websolutespa/bom-mixer-ui 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.9.2
+
+### Patch Changes
+
+- Added: StyledComponent css props
+
+## 1.9.1
+
+### Patch Changes
+
+- Modified: FieldCombobox, Combobox, FormTester, Form
+- Updated dependencies
+  - @websolutespa/bom-mixer-forms@1.9.1
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -199,232 +199,95 @@ function getFontVariantResponsive(props, callback) {
   });
 }
 
+// : Partial<Record<keyof CSSProperties, string>>
 const CssObj = {
-  'alignContent': 'align-content',
-  'alignItems': 'align-items',
-  'alignSelf': 'align-self',
-  /*
-  "animation": "animation",
-  "animationDelay": "animation-delay",
-  "animationDirection": "animation-direction",
-  "animationDuration": "animation-duration",
-  "animationFillMode": "animation-fill-mode",
-  "animationIterationCount": "animation-iteration-count",
-  "animationName": "animation-name",
-  "animationPlayState": "animation-play-state",
-  "animationTimingFunction": "animation-timing-function",
-  */
-  'aspectRatio': 'aspect-ratio',
-  /*
-  "backfaceVisibility": "backface-visibility",
-  */
-  'background': 'background',
-  /*
-  "backgroundAttachment": "background-attachment",
-  "backgroundClip": "background-clip",
-  */
-  'backgroundColor': 'background-color',
-  /*
-  "backgroundImage": "background-image",
-  "backgroundOrigin": "background-origin",
-  "backgroundPosition": "background-position",
-  "backgroundRepeat": "background-repeat",
-  "backgroundSize": "background-size",
-  */
-  'border': 'border',
-  'borderBottom': 'border-bottom',
-  /*
-  "borderBottomColor": "border-bottom-color",
-  "borderBottomLeftRadius": "border-bottom-left-radius",
-  "borderBottomRightRadius": "border-bottom-right-radius",
-  "borderBottomStyle": "border-bottom-style",
-  "borderBottomWidth": "border-bottom-width",
-  "borderCollapse": "border-collapse",
-  "borderColor": "border-color",
-  "borderImage": "border-image",
-  "borderImageOutset": "border-image-outset",
-  "borderImageRepeat": "border-image-repeat",
-  "borderImageSlice": "border-image-slice",
-  "borderImageSource": "border-image-source",
-  "borderImageWidth": "border-image-width",
-  */
-  'borderLeft': 'border-left',
-  /*
-   "borderLeftColor": "border-left-color",
-   "borderLeftStyle": "border-left-style",
-   "borderLeftWidth": "border-left-width",
-   */
-  'borderRadius': 'border-radius',
-  'borderRight': 'border-right',
-  /*
-  "borderRightColor": "border-right-color",
-  "borderRightStyle": "border-right-style",
-  "borderRightWidth": "border-right-width",
-  "borderSpacing": "border-spacing",
-  "borderStyle": "border-style",
-  */
-  'borderTop': 'border-top',
-  /*
-  "borderTopColor": "border-top-color",
-  "borderTopLeftRadius": "border-top-left-radius",
-  "borderTopRightRadius": "border-top-right-radius",
-  "borderTopStyle": "border-top-style",
-  "borderTopWidth": "border-top-width",
-  "borderWidth": "border-width",
-  */
-  'bottom': 'bottom',
-  'boxShadow': 'box-shadow',
-  /*
-  "boxSizing": "box-sizing",
-  "captionSide": "caption-side",
-  "clear": "clear",
-  */
-  'clip': 'clip',
-  'color': 'color',
-  'columnCount': 'column-count',
-  'columnFill': 'column-fill',
-  'columnGap': 'column-gap',
-  'columnRule': 'column-rule',
-  /*
-  "columnRuleColor": "column-rule-color",
-  "columnRuleStyle": "column-rule-style",
-  "columnRuleWidth": "column-rule-width",
-  */
-  'columnSpan': 'column-span',
-  'columnWidth': 'column-width',
-  'columns': 'columns',
-  /*
-  'content': 'content',
-  "counterIncrement": "counter-increment",
-  "counterReset": "counter-reset",
-  */
-  'cursor': 'cursor',
-  'direction': 'direction',
-  'display': 'display',
-  /*
-  "emptyCells": "empty-cells",
-  */
-  'flex': 'flex',
-  'flexBasis': 'flex-basis',
-  'flexDirection': 'flex-direction',
-  'flexFlow': 'flex-flow',
-  'flexGrow': 'flex-grow',
-  'flexShrink': 'flex-shrink',
-  'flexWrap': 'flex-wrap',
-  'float': 'float',
-  /*
-  "font": "font",
-  "fontFamily": "font-family",
-  */
-  'fontSize': 'font-size',
-  /*
-  "fontSizeAdjust": "font-size-adjust",
-  "fontStretch": "font-stretch",
-  "fontVariant": "font-variant",
-  */
-  'fontStyle': 'font-style',
-  'fontWeight': 'font-weight',
-  'gap': 'gap',
-  'grid': 'grid',
-  'gridAutoColumns': 'grid-auto-columns',
-  'gridColumnEnd': 'grid-column-end',
-  'gridColumnStart': 'grid-column-start',
-  'gridTemplate': 'grid-template',
-  'gridTemplateColumns': 'grid-template-columns',
-  'height': 'height',
-  'inset': 'inset',
-  'justifyContent': 'justify-content',
-  'left': 'left',
-  'letterSpacing': 'letter-spacing',
-  'lineHeight': 'line-height',
-  /*
-  "listStyle": "list-style",
-  "listStyleImage": "list-style-image",
-  "listStylePosition": "list-style-position",
-  "listStyleType": "list-style-type",
-  */
-  'margin': 'margin',
-  'marginBottom': 'margin-bottom',
-  'marginLeft': 'margin-left',
-  'marginRight': 'margin-right',
-  'marginTop': 'margin-top',
-  'maxHeight': 'max-height',
-  'maxWidth': 'max-width',
-  'minHeight': 'min-height',
-  'minWidth': 'min-width',
-  'opacity': 'opacity',
-  'order': 'order',
-  'outline': 'outline',
-  /*
-  "outlineColor": "outline-color",
-  "outlineOffset": "outline-offset",
-  "outlineStyle": "outline-style",
-  "outlineWidth": "outline-width",
-  */
-  'overflow': 'overflow',
-  'overflowX': 'overflow-x',
-  'overflowY': 'overflow-y',
-  'padding': 'padding',
-  'paddingBottom': 'padding-bottom',
-  'paddingLeft': 'padding-left',
-  'paddingRight': 'padding-right',
-  'paddingTop': 'padding-top',
-  /*
-  "pageBreakAfter": "page-break-after",
-  "pageBreakBefore": "page-break-before",
-  "pageBreakInside": "page-break-inside",
-  "perspective": "perspective",
-  "perspectiveOrigin": "perspective-origin",
-  */
-  'position': 'position',
-  /*
-  "quotes": "quotes",
-  "resize": "resize",
-  */
-  'right': 'right',
-  'rowGap': 'row-gap',
-  /*
-  "tabSize": "tab-size",
-  "tableLayout": "table-layout",
-  */
-  'textAlign': 'text-align',
-  /*
-  "textAlignLast": "text-align-last",
-  */
-  'textDecoration': 'text-decoration',
-  /*
-  "textDecorationColor": "text-decoration-color",
-  "textDecorationLine": "text-decoration-line",
-  "textDecorationStyle": "text-decoration-style",
-  "textIndent": "text-indent",
-  "textJustify": "text-justify",
-  "textOverflow": "text-overflow",
-  "textShadow": "text-shadow",
-  */
-  'textTransform': 'text-transform',
-  'top': 'top',
-  'transform': 'transform',
-  /*
-  "transformOrigin": "transform-origin",
-  "transformStyle": "transform-style",
-  */
-  'transition': 'transition',
-  /*
-  "transitionDelay": "transition-delay",
-  "transitionDuration": "transition-duration",
-  "transitionProperty": "transition-property",
-  "transitionTimingFunction": "transition-timing-function",
-  "verticalAlign": "vertical-align",
-  */
-  'visibility': 'visibility',
-  'whiteSpace': 'white-space',
-  'width': 'width',
-  /*
-  "wordBreak": "word-break",
-  "wordSpacing": "word-spacing",
-  "wordWrap": "word-wrap",
-  */
-  'zIndex': 'z-index'
+  alignContent: 'align-content',
+  alignItems: 'align-items',
+  alignSelf: 'align-self',
+  aspectRatio: 'aspect-ratio',
+  background: 'background',
+  backgroundColor: 'background-color',
+  border: 'border',
+  borderBottom: 'border-bottom',
+  borderLeft: 'border-left',
+  borderRadius: 'border-radius',
+  borderRight: 'border-right',
+  borderTop: 'border-top',
+  bottom: 'bottom',
+  boxShadow: 'box-shadow',
+  clip: 'clip',
+  color: 'color',
+  columnCount: 'column-count',
+  columnFill: 'column-fill',
+  columnGap: 'column-gap',
+  columnRule: 'column-rule',
+  columns: 'columns',
+  columnSpan: 'column-span',
+  columnWidth: 'column-width',
+  cursor: 'cursor',
+  direction: 'direction',
+  display: 'display',
+  flex: 'flex',
+  flexBasis: 'flex-basis',
+  flexDirection: 'flex-direction',
+  flexFlow: 'flex-flow',
+  flexGrow: 'flex-grow',
+  flexShrink: 'flex-shrink',
+  flexWrap: 'flex-wrap',
+  float: 'float',
+  fontSize: 'font-size',
+  fontStyle: 'font-style',
+  fontWeight: 'font-weight',
+  gap: 'gap',
+  grid: 'grid',
+  gridAutoColumns: 'grid-auto-columns',
+  gridColumnEnd: 'grid-column-end',
+  gridColumnStart: 'grid-column-start',
+  gridTemplate: 'grid-template',
+  gridTemplateColumns: 'grid-template-columns',
+  height: 'height',
+  inset: 'inset',
+  justifyContent: 'justify-content',
+  left: 'left',
+  letterSpacing: 'letter-spacing',
+  lineHeight: 'line-height',
+  margin: 'margin',
+  marginBottom: 'margin-bottom',
+  marginLeft: 'margin-left',
+  marginRight: 'margin-right',
+  marginTop: 'margin-top',
+  maxHeight: 'max-height',
+  maxWidth: 'max-width',
+  minHeight: 'min-height',
+  minWidth: 'min-width',
+  opacity: 'opacity',
+  order: 'order',
+  outline: 'outline',
+  overflow: 'overflow',
+  overflowX: 'overflow-x',
+  overflowY: 'overflow-y',
+  padding: 'padding',
+  paddingBlock: 'padding-block',
+  paddingBottom: 'padding-bottom',
+  paddingInline: 'padding-inline',
+  paddingLeft: 'padding-left',
+  paddingRight: 'padding-right',
+  paddingTop: 'padding-top',
+  placeContent: 'place-content',
+  pointerEvents: 'pointer-events',
+  position: 'position',
+  right: 'right',
+  rowGap: 'row-gap',
+  textAlign: 'text-align',
+  textDecoration: 'text-decoration',
+  textTransform: 'text-transform',
+  top: 'top',
+  transform: 'transform',
+  transition: 'transition',
+  visibility: 'visibility',
+  whiteSpace: 'white-space',
+  width: 'width',
+  zIndex: 'z-index'
 };
 const CssMap = new Map(Object.entries(CssObj));
 /*
@@ -9381,10 +9244,16 @@ function Combobox$1(_a) {
   }, [innerValue, outerValue]);
   React.useEffect(() => {
     const selectedValue = outerToInnerValue(outerSelectedValue);
-    // console.log('Combobox', selectedValue, innerSelectedValue);
     if (innerSelectedValue !== selectedValue) {
-      setInnerValue(Array.isArray(selectedValue) ? selectedValue[0] : selectedValue);
+      // const value = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue;
+      // setInnerValue(value);
       setInnerSelectedValue(selectedValue);
+      if (selectedValue) {
+        setInnerValue(Array.isArray(selectedValue) ? selectedValue[0] : selectedValue);
+      } else {
+        setInnerValue('');
+      }
+      // console.log('Combobox', innerSelectedValue, selectedValue);
     }
   }, [innerSelectedValue, outerSelectedValue]);
   const onBlur_ = event => {
@@ -9419,11 +9288,11 @@ function Combobox$1(_a) {
   const globalVariants = useVariants('combobox', comboboxVariants);
   variants = variants || globalVariants;
   return jsxRuntime.jsx(Ariakit__namespace.ComboboxProvider, Object.assign({
-    value: innerValue,
     defaultValue: defaultValue,
+    value: innerValue,
     setValue: onSetValue,
-    selectedValue: innerSelectedValue,
     defaultSelectedValue: defaultSelectedValue,
+    selectedValue: innerSelectedValue,
     setSelectedValue: onSetSelectedValue
   }, props, {
     children: jsxRuntime.jsx(ComboboxContext.Provider, {
@@ -9541,6 +9410,7 @@ const ComboboxCombobox = /*#__PURE__*/React.forwardRef(function ComboboxCombobox
   const onBlur = () => {
     // store.setValue(Array.isArray(selectedValue) ? selectedValue[0] : selectedValue);
   };
+  // console.log('selectedValue', selectedValue);
   const classNames = bomCore.getClassNames('combobox__combobox', {
     empty: isEmptyValue(selectedValue)
   }, className);
@@ -10611,10 +10481,10 @@ const Form = /*#__PURE__*/React.forwardRef((_a, ref) => {
   React.useEffect(() => {
     if (form) {
       const onChange = value => {
-        console.log('FormComponent.onChange', form.state);
+        // console.log('FormComponent.onChange', form.state);
         if (innerRef.current !== null) {
           const formElement = innerRef.current;
-          Object.entries(form.state).forEach(_ref => {
+          Object.entries(bomMixerForms.mapState_(form.state)).forEach(_ref => {
             let [k, v] = _ref;
             formElement.classList.toggle(k, v);
           });
@@ -12677,7 +12547,7 @@ function FieldCombobox(_ref) {
   const onChange = option => {
     setValue(option);
   };
-  console.log('FieldCombobox', control.value);
+  // console.log('FieldCombobox', control.value);
   return state.flags.hidden ? jsxRuntime.jsx("input", {
     type: "hidden",
     value: bomMixerForms.valueToString(state.value)