@dreamcommerce/aurora 3.1.36-6 → 3.1.36-7

package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useMemo, useRef, useState, useCallback } from 'react';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_ALPHA_MAX_VALUE } from '../color_picker_constants.js';
 import { getDetails } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
@@ -16,7 +16,6 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     isWithGradient = _ref$withGradient === void 0 ? false : _ref$withGradient;
   var colorValue = ColorPickerUtils.normalizeLinearGradient(value || COLOR_PICKER_INITIAL_STATE);
   var currentSelectedVariable = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.selectedVariable;
-  var colorValueRef = useRef(colorValue);
   var savedColorRef = useRef({
     value: colorValue,
     name: currentSelectedVariable || ''
@@ -34,26 +33,13 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isColorPickerOpened = _useState6[0],
     setIsColorPickerOpened = _useState6[1];
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    shadeName = _useState8[0],
-    setShadeName = _useState8[1];
-  var _useState9 = useState(ColorPickerUtils.getHexValueWithoutHash(colorValue)),
-    _useState10 = _slicedToArray(_useState9, 2),
-    typedInputValue = _useState10[0],
-    setTypedInputValue = _useState10[1];
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isColorPickerCurrentlyUsed = _useState12[0],
-    setIsColorPickerCurrentlyUsed = _useState12[1];
   var _getDetails = getDetails(colorValue),
     degrees = _getDetails.degrees;
   var savedDegRef = useRef(isNaN(degrees) ? 180 : degrees);
+  var inputRef = useRef(null);
   var variables = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables;
   var setColor = useCallback(function (newColor) {
-    var shadeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    var variableName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-    setShadeName(shadeName);
+    var variableName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     !ColorPickerUtils.isGradient(colorValue) ? setPreviousSolidColor(colorValue) : setPreviousGradientColor(colorValue);
     var isGradient = ColorPickerUtils.isGradient(newColor);
     var newColorVar = {
@@ -66,16 +52,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
       savedDegRef.current = Number(colorDegrees[2]);
     }
     var hexString = isGradient ? newColor : colorObject.hexString;
-    colorValueRef.current = hexString;
     onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread2(_objectSpread2({}, colorObject), {}, {
       hexString: hexString
     }));
-  }, [colorValue, variables, onChange]);
-  useEffect(function () {
-    if (colorValue === colorValueRef.current) return;
-    colorValueRef.current = colorValue;
-    setShadeName('');
-  }, [colorValue]);
+  }, [colorValue, onChange]);
   var _useBestGradientColor = useColorPicker(colorValue, setColor),
     hslArr = _useBestGradientColor.hslArr,
     rgbaArr = _useBestGradientColor.rgbaArr,
@@ -88,31 +68,31 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
   var tinyColor = ColorPickerUtils.getTinyColorInstance(colorValue);
   var hex = ColorPickerUtils.getHexValue(tinyColor);
   var alpha = rgbaArr[3] * 100;
-  var setSolid = function setSolid(value) {
+  var setSolid = useCallback(function (value) {
     setColor(value || COLOR_PICKER_INITIAL_STATE);
-  };
-  var setLinear = function setLinear(value) {
+  }, [setColor]);
+  var setLinear = useCallback(function (value) {
     var gradientColor = value || defaultGradient;
     var remaining = gradientColor.split(/,(.+)/)[1];
     setColor("linear-gradient(".concat(savedDegRef.current + 'deg', ", ").concat(remaining));
-  };
-  var setRadial = function setRadial(value) {
+  }, [setColor]);
+  var setRadial = useCallback(function (value) {
     var gradientColor = value || defaultGradient;
     var remaining = gradientColor.split(/,(.+)/)[1];
     setColor("radial-gradient(circle, ".concat(remaining));
-  };
-  var handleOnChangeAlpha = function handleOnChangeAlpha(value) {
+  }, [setColor]);
+  var handleOnChangeAlpha = useCallback(function (value) {
     var val = Math.min(value, COLOR_PICKER_ALPHA_MAX_VALUE);
     setA(val);
-  };
-  var handleCancel = function handleCancel() {
+  }, [setA]);
+  var handleCancel = useCallback(function () {
     var _savedColorRef$curren = savedColorRef.current,
       value = _savedColorRef$curren.value,
       name = _savedColorRef$curren.name;
-    setColor(value, '', name || '');
+    setColor(value, name || '');
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-  };
-  var handleSave = function handleSave() {
+  }, [onCancel, setColor]);
+  var handleSave = useCallback(function () {
     var newColorVar = {
       value: colorValue,
       name: variables && ColorPickerUtils.findVariable(variables, colorValue) || currentSelectedVariable || ''
@@ -122,39 +102,45 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
       name: newColorVar.name
     };
     onSave === null || onSave === void 0 ? void 0 : onSave(ColorPickerUtils.getAllColorTypes(newColorVar));
-  };
-  return {
-    color: colorValue,
-    previousSolidColor: previousSolidColor,
-    previousGradientColor: previousGradientColor,
-    setColor: setColor,
-    hex: hex,
-    hslArr: hslArr,
-    handleOnChangeAlpha: handleOnChangeAlpha,
-    alpha: alpha,
-    rgbaArr: rgbaArr,
-    setR: setR,
-    setG: setG,
-    setB: setB,
-    handleCancel: handleCancel,
-    handleSave: handleSave,
-    colorVariables: colorVariables,
-    isCurrentValueGradient: isGradient,
-    setSolid: setSolid,
-    setRadial: setRadial,
-    setLinear: setLinear,
-    gradientType: gradientType,
-    withGradient: withGradient,
-    isColorPickerOpened: isColorPickerOpened,
-    setIsColorPickerOpened: setIsColorPickerOpened,
-    typedInputValue: typedInputValue,
-    setTypedInputValue: setTypedInputValue,
-    isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
-    setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
-    degrees: degrees,
-    shadeName: shadeName,
-    currentSelectedVariable: currentSelectedVariable
-  };
+  }, [colorValue, currentSelectedVariable, onSave, variables]);
+  var setInputRef = useCallback(function (input) {
+    inputRef.current = input;
+  }, []);
+  var blurInput = useCallback(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+  }, []);
+  return useMemo(function () {
+    return {
+      color: colorValue,
+      previousSolidColor: previousSolidColor,
+      previousGradientColor: previousGradientColor,
+      setColor: setColor,
+      hex: hex,
+      hslArr: hslArr,
+      handleOnChangeAlpha: handleOnChangeAlpha,
+      alpha: alpha,
+      rgbaArr: rgbaArr,
+      setR: setR,
+      setG: setG,
+      setB: setB,
+      handleCancel: handleCancel,
+      handleSave: handleSave,
+      colorVariables: colorVariables,
+      isCurrentValueGradient: isGradient,
+      setSolid: setSolid,
+      setRadial: setRadial,
+      setLinear: setLinear,
+      gradientType: gradientType,
+      withGradient: withGradient,
+      isColorPickerOpened: isColorPickerOpened,
+      setIsColorPickerOpened: setIsColorPickerOpened,
+      degrees: degrees,
+      currentSelectedVariable: currentSelectedVariable,
+      setInputRef: setInputRef,
+      blurInput: blurInput
+    };
+  }, [alpha, colorValue, colorVariables, currentSelectedVariable, degrees, gradientType, handleCancel, handleOnChangeAlpha, handleSave, hex, hslArr, isColorPickerOpened, isGradient, previousGradientColor, previousSolidColor, rgbaArr, setB, setColor, setG, setLinear, setR, setRadial, setSolid, withGradient, setInputRef, blurInput]);
 };
 
 export default useSetupColorPicker;

package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/date_and_time_picker/date_time_picker.js

@@ -1,4 +1,4 @@
-import React__default, { useMemo, useState, useRef, useEffect } from 'react';
+import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Stack } from '../stack/stack.js';
 import { DatePicker } from '../date_picker/date_picker.js';
@@ -42,7 +42,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       timeRef.current = parsedValue.time;
     }
   }, [value, parsedValue]);
-  var handleDateChange = function handleDateChange(date) {
+  var handleDateChange = useCallback(function (date) {
     dateRef.current = date;
     setInternalDate(date);
     var currentTime = timeRef.current;
@@ -54,8 +54,8 @@ var DateTimePicker = function DateTimePicker(_ref) {
       lastValueRef.current = '';
       onChange === null || onChange === void 0 ? void 0 : onChange('');
     }
-  };
-  var handleTimeChange = function handleTimeChange(time) {
+  }, [onChange]);
+  var handleTimeChange = useCallback(function (time) {
     var timeValue = time || undefined;
     timeRef.current = timeValue;
     setInternalTime(timeValue);
@@ -68,7 +68,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       lastValueRef.current = '';
       onChange === null || onChange === void 0 ? void 0 : onChange('');
     }
-  };
+  }, [onChange]);
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     spacing: "3",

package/build/esm/packages/aurora/src/components/input/input_types.d.ts

@@ -6,4 +6,6 @@ export interface TInputProps extends React.InputHTMLAttributes<HTMLInputElement>
     postElement?: React.ReactNode;
     errors?: string | string[];
     hasCursorPointer?: boolean;
+    colorName?: string;
+    primary?: boolean;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "3.1.36-6",
+  "version": "3.1.36-7",
   "description": "aurora",
   "author": "zefirek",
   "license": "MIT",