@edvisor/product-language 0.7.1 → 0.7.3

package/index.js

@@ -6578,7 +6578,17 @@ class ControlsSlot$1 extends Slot {}
 const InputFrame = /*#__PURE__*/styled.label.withConfig({
   displayName: "input-field__InputFrame",
   componentId: "sc-1yq0rb7-5"
-})(["width:100%;padding:", " ", " ", " ", ";flex-direction:column;display:flex;"], Padding.xs, Padding.none, Padding.none, Padding.none);
+})(["width:100%;padding:", " ", " ", " ", ";display:flex;flex-direction:", ";", ""], Padding.xs, Padding.none, Padding.none, Padding.none, ({
+  label,
+  labelPosition
+}) => isDefined(label) && !isEmpty(label) && labelPosition === "side"
+/* labelPositionType.SIDE */
+? 'row' : 'column', ({
+  label,
+  labelPosition
+}) => isDefined(label) && !isEmpty(label) && labelPosition === "side"
+/* labelPositionType.SIDE */
+&& css(["width:fit-content;white-space:pre;"]));
 const ControlsFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "input-field__ControlsFrame",
   componentId: "sc-1yq0rb7-6"
@@ -6586,7 +6596,11 @@ const ControlsFrame = /*#__PURE__*/styled(Flex).withConfig({
 const InputLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "input-field__InputLabel",
   componentId: "sc-1yq0rb7-7"
-})(["margin-bottom:", ";"], Margin.xxs);
+})(["margin-bottom:", ";", ""], Margin.xxs, ({
+  labelPosition
+}) => labelPosition === "side"
+/* labelPositionType.SIDE */
+&& css(["padding-right:", ";"], Padding.xs));
 const InputField$1 = forwardRef((props, ref) => {
   const {
     children,
@@ -6594,9 +6608,12 @@ const InputField$1 = forwardRef((props, ref) => {
     suffix,
     label,
     className,
-    style
+    style,
+    labelPosition = "top"
+    /* labelPositionType.TOP */
+
   } = props,
-        inputProps = __rest(props, ["children", "prefix", "suffix", "label", "className", "style"]);
+        inputProps = __rest(props, ["children", "prefix", "suffix", "label", "className", "style", "labelPosition"]);
 
   const icon = getSlot(IconSlot, children);
   const controls = getSlot(ControlsSlot$1, children);
@@ -6606,11 +6623,15 @@ const InputField$1 = forwardRef((props, ref) => {
     className: className,
     style: style
   }, {
-    children: [jsxs(InputFrame, {
+    children: [jsxs(InputFrame, Object.assign({
+      label: label,
+      labelPosition: labelPosition
+    }, {
       children: [jsx(If, Object.assign({
         is: label
       }, {
         children: jsxs(InputLabel, Object.assign({
+          labelPosition: labelPosition,
           subtle: true,
           subdued: true
         }, {
@@ -6639,7 +6660,7 @@ const InputField$1 = forwardRef((props, ref) => {
           }))
         }))]
       })]
-    }), jsx(If, Object.assign({
+    })), jsx(If, Object.assign({
       is: icon
     }, {
       children: jsx(ControlsFrame, Object.assign({
@@ -8700,7 +8721,7 @@ const Button = props => {
 const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "value__ValueContainer",
   componentId: "sc-1aps7dx-0"
-})(["pointer-events:", ";padding:", " ", " ", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, Padding.none, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
+})(["pointer-events:", ";padding:", " ", ";background:", ";cursor:default;border:1px solid ", ";border-radius:6px;outline-offset:-2px;", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
 
     &:focus  {
       outline: 2px solid ${Focused.Default}
@@ -8713,7 +8734,7 @@ const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
 const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueWrapper",
   componentId: "sc-1aps7dx-1"
-})(["width:100%;padding-bottom:", ";display:", ";"], Padding.xs, ({
+})(["width:100%;display:", ";"], ({
   label,
   labelPosition
 }) => isDefined(label) && !isEmpty(label) && labelPosition === "top"
@@ -8722,7 +8743,15 @@ const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
 const ValueLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "value__ValueLabel",
   componentId: "sc-1aps7dx-2"
-})(["padding-left:", ";margin-bottom:", ";width:fit-content;white-space:pre;", ""], Padding.xs, Margin.xxs, ({
+})(["padding-left:", ";margin-bottom:", ";display:flex;align-self:", ";width:fit-content;white-space:pre;", ""], Padding.xs, ({
+  labelPosition
+}) => labelPosition === "top"
+/* labelPositionType.TOP */
+? Margin.xxs : Margin.none, ({
+  labelPosition
+}) => labelPosition === "top"
+/* labelPositionType.TOP */
+? 'flex-start' : 'center', ({
   labelPosition
 }) => labelPosition === "top"
 /* labelPositionType.TOP */
@@ -8734,7 +8763,7 @@ const ValueLeft = /*#__PURE__*/styled(Flex).withConfig({
 const ValueRight = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueRight",
   componentId: "sc-1aps7dx-4"
-})(["padding-right:", ";pointer-events:none;"], Padding.xxs);
+})(["padding-right:", ";cursor:pointer;"], Padding.xxs);
 const Placeholder = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "value__Placeholder",
   componentId: "sc-1aps7dx-5"
@@ -8858,22 +8887,22 @@ const Value = props => {
     }
   };
 
-  const onClear = e => {
-    e.stopPropagation();
+  const onClear = event => {
+    event.stopPropagation();
     props.onClear();
   };
 
-  const onSearch = e => {
+  const onSearch = event => {
     if (is(props.searchable)) {
-      props.onSearch(e.currentTarget.innerText.trim());
+      props.onSearch(event.currentTarget.innerText.trim());
     } else {
-      e.preventDefault();
+      event.preventDefault();
     }
   };
 
-  const onKeyDown = e => {
-    if (!is(searchable) && e.key !== keys.TAB || e.key === keys.ENTER || e.key === keys.ARROW_UP || e.key === keys.ARROW_DOWN) {
-      e.preventDefault();
+  const onKeyDown = event => {
+    if (!is(searchable) && event.key !== keys.TAB || event.key === keys.ENTER || event.key === keys.ARROW_UP || event.key === keys.ARROW_DOWN) {
+      event.preventDefault();
     }
   };
 
@@ -9039,7 +9068,9 @@ const SelectImpl = (props, selectRef) => {
 
   function addDocumentListener() {
     removeDocumentListener();
-    document === null || document === void 0 ? void 0 : document.addEventListener('click', onDocumentClick);
+    document === null || document === void 0 ? void 0 : document.addEventListener('click', onDocumentClick, {
+      capture: true
+    });
   }
 
   function onOptionSelect(selectValue, option) {
@@ -9052,7 +9083,9 @@ const SelectImpl = (props, selectRef) => {
   }
 
   function removeDocumentListener() {
-    document === null || document === void 0 ? void 0 : document.removeEventListener('click', onDocumentClick);
+    document === null || document === void 0 ? void 0 : document.removeEventListener('click', onDocumentClick, {
+      capture: true
+    });
   }
 
   function onKeyDown({
@@ -9989,7 +10022,7 @@ const FieldContainer = /*#__PURE__*/styled.div.withConfig({
 const HandleContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "handle__HandleContainer",
   componentId: "sc-1ylwh31-0"
-})(["background-color:", ";margin-left:-6px;margin-top:-6px;width:", "px;height:", "px;border:0;border-radius:50%;white-space:nowrap;position:absolute;cursor:pointer;left:", ";"], Actions.Primary.Default, ({
+})(["background-color:", ";margin-left:-6px;margin-top:-6px;width:", "px;height:", "px;border:0;border-radius:50%;white-space:nowrap;position:absolute;z-index:2;cursor:pointer;left:", ";"], Actions.Primary.Default, ({
   thumbHeight
 }) => thumbHeight, ({
   thumbHeight
@@ -10050,7 +10083,7 @@ const RailComponent = /*#__PURE__*/memo(props => {
 const Track = /*#__PURE__*/styled.div.withConfig({
   displayName: "track__Track",
   componentId: "sc-20rwgc-0"
-})(["background-color:", ";height:", "px;position:absolute;pointer-events:none;left:", ";width:", ";"], Actions.Primary.Default, ({
+})(["background-color:", ";height:", "px;position:absolute;z-index:1;pointer-events:none;left:", ";width:", ";"], Actions.Primary.Default, ({
   trackHeight
 }) => trackHeight, ({
   left
@@ -10112,13 +10145,20 @@ const SliderComponent = props => {
     onChange,
     onUpdate
   } = props;
+
+  const handleOnChange = newValues => {
+    if (values.some((val, index) => val !== newValues[index])) {
+      onChange(newValues);
+    }
+  };
+
   return jsxs(Slider$1, Object.assign({
     mode: mode,
     step: 1,
     domain: domain,
     values: values,
     rootStyle: sliderStyle,
-    onChange: onChange,
+    onChange: handleOnChange,
     onUpdate: newValues => {
       onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
     }
@@ -10212,23 +10252,43 @@ const SliderInputs = props => {
   const handleOnBlur = (e, valueType) => {
     const intValue = +e.target.value;
     const newValue = getNewValue(intValue, valueType, props);
+    mayCallOnChange(newValue, valueType);
 
     if (type === SliderType.SLIDER) {
-      onChange([newValue]);
       setMaxValue(newValue);
       return;
     }
 
     if (valueType === ValueType.MIN) {
-      onChange([newValue, stateMaxValue]);
       setMinValue(newValue);
       return;
     }
 
-    onChange([stateMinValue, newValue]);
     setMaxValue(newValue);
   };
 
+  const mayCallOnChange = (newValue, valueType) => {
+    if (type === SliderType.SLIDER) {
+      if (newValue !== maxValue) {
+        onChange([newValue]);
+      }
+
+      return;
+    }
+
+    if (valueType === ValueType.MIN) {
+      if (newValue !== minValue) {
+        onChange([newValue, stateMaxValue]);
+      }
+
+      return;
+    }
+
+    if (newValue !== maxValue) {
+      onChange([stateMinValue, newValue]);
+    }
+  };
+
   return type === SliderType.RANGE_SLIDER ? jsxs(Fragment$1, {
     children: [jsx(FieldContainer, Object.assign({
       margin: 'right'

package/lib/components/input-field/input-field.d.ts

@@ -16,6 +16,7 @@ interface IInputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     prefix?: string;
     suffix?: string;
     label?: string;
+    labelPosition?: string;
 }
 export declare const InputField: import("react").ForwardRefExoticComponent<IInputFieldProps & import("react").RefAttributes<HTMLInputElement>> & {
     Icon: typeof IconSlot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",