@dreamcommerce/aurora 3.0.0-279 → 3.0.0-280

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { TValuesSyncerControlProps } from './values_syncer_control_types';
-export declare const ValuesSyncerControl: React.FC<TValuesSyncerControlProps>;
+export declare const ValuesSyncerControl: {
+    <T>({ label, required, tooltip, errors, firstControl, secondControl, firstValue, secondValue, isLocked, onLock, onChange, disabled, helperText, className }: TValuesSyncerControlProps<T>): React.JSX.Element;
+    displayName: string;
+};

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js

@@ -14,13 +14,14 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
     errors = _ref.errors,
     firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
-    initialFirstValue = _ref.initialFirstValue,
-    initialSecondValue = _ref.initialSecondValue,
+    firstValue = _ref.firstValue,
+    secondValue = _ref.secondValue,
     isLocked = _ref.isLocked,
     onLock = _ref.onLock,
     onChange = _ref.onChange,
     disabled = _ref.disabled,
-    helperText = _ref.helperText;
+    helperText = _ref.helperText,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(Control, {
     classname: "aurora-flex-col"
   }, label ? (/*#__PURE__*/React.createElement(Label, {
@@ -29,11 +30,12 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
   }, label)) : null, /*#__PURE__*/React.createElement(ValuesSyncer, {
     firstControl: firstControl,
     secondControl: secondControl,
-    initialFirstValue: initialFirstValue,
-    initialSecondValue: initialSecondValue,
+    firstValue: firstValue,
+    secondValue: secondValue,
     isLocked: isLocked,
     onLock: onLock,
-    onChange: onChange
+    onChange: onChange,
+    className: className
   }), helperText ? /*#__PURE__*/React.createElement(HelperText, {
     color: disabled ? CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
   }, helperText) : null, errors ? /*#__PURE__*/React.createElement(ErrorList, {

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.d.ts

@@ -1,6 +1,6 @@
 import { TValuesSyncerProps } from "../../values_syncer/values_syncer_types";
 import React from 'react';
-export declare type TValuesSyncerControlProps = TValuesSyncerProps & {
+export declare type TValuesSyncerControlProps<T> = TValuesSyncerProps<T> & {
     label?: string | React.ReactNode;
     required?: boolean;
     tooltip?: string | React.ReactNode;

package/build/esm/packages/aurora/src/components/image_picker/image_picker.js

@@ -59,9 +59,6 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     imageSize = _useState2[0],
     setImageSize = _useState2[1];
   var acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
-  useEffect(function () {
-    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(imageSize);
-  }, [imageSize]);
   useEffect(function () {
     initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
   }, [initialFile]);
@@ -77,10 +74,12 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   };
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
     createImageFromUrl(fileUrl).then(function (image) {
-      setImageSize({
+      var size = {
         width: image.naturalWidth,
         height: image.naturalHeight
-      });
+      };
+      setImageSize(size);
+      onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(size);
     });
   };
   var createImageFromUrl = /*#__PURE__*/function () {
@@ -108,6 +107,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   var handleOnFileDelete = function handleOnFileDelete() {
     onFileDelete();
     setImageSize(undefined);
+    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(undefined);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "aurora-mb-1"

package/build/esm/packages/aurora/src/components/input/input.js

@@ -1,5 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { inputVariants } from './input_variants.js';
 
@@ -22,24 +22,6 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown = _ref.onKeyDown,
     onKeyUp = _ref.onKeyUp,
     props = _objectWithoutProperties(_ref, _excluded);
-  var preElRef = useRef(null);
-  var postElRef = useRef(null);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    preElWidth = _useState2[0],
-    setPreElWidth = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    postElWidth = _useState4[0],
-    setPostElWidth = _useState4[1];
-  useEffect(function () {
-    if (preElRef.current) {
-      setPreElWidth((Math.round(preElRef.current.getBoundingClientRect().width) + 8).toString());
-    }
-    if (postElRef.current) {
-      setPostElWidth((Math.round(postElRef.current.getBoundingClientRect().width) + 8).toString());
-    }
-  }, [preElement, postElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: cn(inputVariants(), {
       'aurora-border-danger aurora-border-2': !!(errors !== null && errors !== void 0 && errors.length),
@@ -47,8 +29,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'aurora-appearance-none': type === 'number'
     })
   }, preElement && (/*#__PURE__*/React.createElement("div", {
-    ref: preElRef,
-    className: 'aurora-absolute aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
+    className: 'aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
   }, preElement)), /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     id: id,
@@ -62,15 +43,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     type: type,
-    className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-3 aurora-rounded-6', className),
-    style: {
-      paddingLeft: preElWidth ? "".concat(preElWidth, "px") : '',
-      paddingRight: postElWidth ? "".concat(postElWidth, "px") : ''
-    }
-  })), postElement && (/*#__PURE__*/React.createElement("div", {
-    ref: postElRef,
-    className: "aurora-absolute aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
-  }, postElement)));
+    className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', className)
+  })), postElement && /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
+  }, postElement));
 });
 Input.displayName = 'Input';
 

package/build/esm/packages/aurora/src/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/input/input_variants.js

@@ -1,6 +1,6 @@
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
 
-var inputVariants = cva('aurora-relative aurora-flex aurora-rounded-6 focus aurora-border aurora-bg aurora-text-s aurora-placeholder-neutral-500 aurora-text hover:aurora-border-strong active:aurora-border-active disabled:aurora-opacity-50 aurora-w-full');
+var inputVariants = cva('aurora-relative aurora-flex aurora-items-center aurora-rounded-6 focus aurora-border aurora-bg aurora-text-s aurora-placeholder-neutral-500 aurora-text hover:aurora-border-strong active:aurora-border-active disabled:aurora-opacity-50 aurora-w-full');
 
 export { inputVariants };
 //# sourceMappingURL=input_variants.js.map

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TValuesSyncerProps } from './values_syncer_types';
-export declare const ValuesSyncer: React.FC<TValuesSyncerProps>;
+export declare const ValuesSyncer: <T>({ firstControl, secondControl, firstValue, secondValue, isLocked, onLock, onChange, className }: TValuesSyncerProps<T>) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { CSS_COLOR_TOKENS_VALUES } from '../../constants/css_tokens/css_color_tokens_values.js';
 import { cn } from '../../utilities/cn.js';
@@ -9,73 +9,101 @@ import { LockUnlockLineIcon } from '../../assets/icons/lock_unlock_icon.js';
 var ValuesSyncer = function ValuesSyncer(_ref) {
   var firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
-    initialFirstValue = _ref.initialFirstValue,
-    initialSecondValue = _ref.initialSecondValue,
-    _ref$isLocked = _ref.isLocked,
-    isLocked = _ref$isLocked === void 0 ? false : _ref$isLocked,
+    firstValue = _ref.firstValue,
+    secondValue = _ref.secondValue,
+    isLocked = _ref.isLocked,
     onLock = _ref.onLock,
-    onChange = _ref.onChange;
-  var _useState = useState(isLocked),
+    onChange = _ref.onChange,
+    className = _ref.className;
+  var _useState = useState(isLocked !== null && isLocked !== void 0 ? isLocked : false),
     _useState2 = _slicedToArray(_useState, 2),
     locked = _useState2[0],
     setLocked = _useState2[1];
-  var _useState3 = useState(initialFirstValue),
-    _useState4 = _slicedToArray(_useState3, 2),
-    firstControlValue = _useState4[0],
-    setFirstControlValue = _useState4[1];
-  var _useState5 = useState(initialSecondValue),
-    _useState6 = _slicedToArray(_useState5, 2),
-    secondControlValue = _useState6[0],
-    setSecondControlValue = _useState6[1];
-  useEffect(function () {
-    onLock === null || onLock === void 0 ? void 0 : onLock(locked);
+  var firstValueRef = useRef(firstValue);
+  var secondValueRef = useRef(secondValue);
+  var lockedRef = useRef(locked);
+  var handleFirstControlChange = useCallback(function (value) {
+    firstValueRef.current = value;
+    if (locked) {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: value,
+        isLocked: locked
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: secondValue,
+        isLocked: locked
+      });
+    }
+  }, [locked, onChange, secondValue]);
+  var handleSecondControlChange = useCallback(function (value) {
+    secondValueRef.current = value;
     if (locked) {
-      setSecondControlValue(firstControlValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: value,
+        second: value,
+        isLocked: locked
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: firstValue,
+        second: value,
+        isLocked: locked
+      });
+    }
+  }, [firstValue, locked, onChange]);
+  var handleLockedChange = useCallback(function (newLock) {
+    var triggerOnLock = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    setLocked(newLock);
+    lockedRef.current = newLock;
+    if (triggerOnLock && onLock) onLock(newLock);
+    if (newLock) {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        first: firstValue,
+        second: firstValue,
+        isLocked: newLock
+      });
     }
-  }, [locked]);
+  }, [firstValue, onChange, onLock]);
+  // Reagujemy na zmiany wszystkiego co przychodzi z gory
+  // zebysmy nigdy nie skonczyli z nielegalnym stanem -> first !== second && locked
   useEffect(function () {
-    setFirstControlValue(initialFirstValue);
-    setSecondControlValue(initialSecondValue);
-  }, [initialFirstValue, initialSecondValue]);
+    if (isLocked === undefined || isLocked === lockedRef.current) return;
+    handleLockedChange(isLocked, false);
+  }, [isLocked, handleLockedChange]);
   useEffect(function () {
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      first: firstControlValue,
-      second: secondControlValue,
-      isLocked: locked
-    });
-  }, [firstControlValue, secondControlValue, locked]);
-  var handleFirstControlChange = function handleFirstControlChange(value) {
-    setFirstControlValue(value);
-    if (locked) {
-      setSecondControlValue(value);
+    if (firstValue === firstValueRef.current) return;
+    firstValueRef.current = firstValue;
+    if (firstValue !== secondValueRef.current) {
+      handleLockedChange(false);
     }
-  };
-  var handleSecondControlChange = function handleSecondControlChange(value) {
-    setSecondControlValue(value);
-    if (locked) {
-      setFirstControlValue(value);
+  }, [firstValue, handleLockedChange]);
+  useEffect(function () {
+    if (secondValue === secondValueRef.current) return;
+    secondValueRef.current = secondValue;
+    if (secondValue !== firstValueRef.current) {
+      handleLockedChange(false);
     }
-  };
-  var toggleLock = function toggleLock() {
-    return setLocked(function (prev) {
-      return !prev;
-    });
-  };
+  }, [secondValue, handleLockedChange]);
   return /*#__PURE__*/React.createElement(Stack, {
     spacing: "3",
     align: "end",
-    className: "aurora-items-end"
-  }, firstControl(firstControlValue, handleFirstControlChange), /*#__PURE__*/React.createElement("button", {
+    className: cn('aurora-items-end', className)
+  }, firstControl(firstValue, handleFirstControlChange), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: cn(locked ? 'aurora-bg-active aurora-rounded-4' : 'aurora-bg-subtle', 'aurora-h-6 aurora-w-6 aurora-p-1 aurora-mb-2 aurora-rounded-4 focus'),
-    onClick: toggleLock
+    onClick: function onClick() {
+      return handleLockedChange(!locked);
+    }
   }, locked ? (/*#__PURE__*/React.createElement(LockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: CSS_COLOR_TOKENS_VALUES.neutral900
   })) : (/*#__PURE__*/React.createElement(LockUnlockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: CSS_COLOR_TOKENS_VALUES.neutral600
-  }))), secondControl(secondControlValue, handleSecondControlChange));
+  }))), secondControl(secondValue, handleSecondControlChange));
 };
 
 export { ValuesSyncer };

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer_types.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
-export declare type TValuesSyncerProps = {
-    firstControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
-    secondControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
-    initialFirstValue?: unknown;
-    initialSecondValue?: unknown;
+export declare type TValuesSyncerProps<T> = {
+    firstControl: (value: T, setValue: (value: T) => void) => React.ReactNode;
+    secondControl: (value: T, setValue: (value: T) => void) => React.ReactNode;
+    firstValue: T;
+    secondValue: T;
     isLocked?: boolean;
     onLock?: (isLocked: boolean) => void;
     onChange?: (props: {
-        first: unknown;
-        second: unknown;
+        first: T;
+        second: T;
         isLocked: boolean;
     }) => void;
+    className?: string;
 };