@dreamcommerce/aurora 2.1.15 → 2.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker/components/label.js +1 -1
  2. package/build/cjs/packages/aurora/src/components/color_picker/index.js +2 -2
  3. package/build/cjs/packages/aurora/src/components/color_picker/utilities.js +2 -2
  4. package/build/cjs/packages/aurora/src/utilities/colors/color_converter.js +12 -3
  5. package/build/cjs/packages/aurora/src/utilities/colors/color_converter.js.map +1 -1
  6. package/build/esm/packages/aurora/src/components/color_picker/components/hue_picker.d.ts +1 -1
  7. package/build/esm/packages/aurora/src/components/color_picker/components/label.d.ts +1 -1
  8. package/build/esm/packages/aurora/src/components/color_picker/components/label.js +1 -1
  9. package/build/esm/packages/aurora/src/components/color_picker/index.js +2 -2
  10. package/build/esm/packages/aurora/src/components/color_picker/types.d.ts +1 -1
  11. package/build/esm/packages/aurora/src/components/color_picker/utilities.js +2 -2
  12. package/build/esm/packages/aurora/src/utilities/colors/color_converter.d.ts +3 -2
  13. package/build/esm/packages/aurora/src/utilities/colors/color_converter.js +12 -3
  14. package/build/esm/packages/aurora/src/utilities/colors/color_converter.js.map +1 -1
  15. package/build/esm/packages/aurora/src/utilities/colors/types.d.ts +5 -0
  16. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/color_picker/components/label.js CHANGED
@@ -24,7 +24,7 @@ const ColorPickerLabel = ({ name, isRequired, id }) => {
24
24
  const { isOpen } = React.useContext(index.DropdownContext);
25
25
  const classes = useStyles({ color });
26
26
  React.useEffect(() => {
27
- if (isOpen) {
27
+ if (isOpen && color.hex) {
28
28
  setInitialColor(color);
29
29
  }
30
30
  // eslint-disable-next-line
package/build/cjs/packages/aurora/src/components/color_picker/index.js CHANGED
@@ -48,7 +48,7 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
48
48
  const hueSliderRef = React.useRef(null);
49
49
  const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });
50
50
  React.useEffect(() => {
51
- const initialColor = utilities.getColorFromHex(color.hex);
51
+ const initialColor = utilities.getColorFromHex(color.hex || '#ffffff');
52
52
  setNewColorPickerPositions(initialColor);
53
53
  // eslint-disable-next-line react-hooks/exhaustive-deps
54
54
  }, []);
@@ -86,7 +86,7 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
86
86
  React__default['default'].createElement("div", { className: `${classes.preview} ${main_module['default'][css_classes.cssColorPickerPreview]}` }),
87
87
  React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerInputContainer] },
88
88
  React__default['default'].createElement("span", null, "#"),
89
- React__default['default'].createElement(input['default'], { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex.replace(/#/g, ''), onChange: inputOnChange }))),
89
+ React__default['default'].createElement(input['default'], { id: "color-picker-id", value: (color.hex || '').replace(/#/g, ''), onChange: inputOnChange }))),
90
90
  !hideChooseCancelButtons && React__default['default'].createElement(buttons['default'], { restoreInitialColor: restoreInitialColor })));
91
91
  };
92
92
  const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {
package/build/cjs/packages/aurora/src/components/color_picker/utilities.js CHANGED
@@ -16,12 +16,12 @@ var color_converter = require('../../utilities/colors/color_converter.js');
16
16
  */
17
17
  const getIndicatorPositionsFromHEX = ({ saturationLightnessPanelRef, hueSliderRef, hex }) => {
18
18
  var _a, _b;
19
- const { hue, saturation, lightness } = color_converter.ColorConverter.hex2hsl(hex);
19
+ const { hue, saturation, value } = color_converter.ColorConverter.hex2hsv(hex);
20
20
  const { width = 0, height = 0 } = ((_a = saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
21
21
  const hueSliderRect = (_b = hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
22
22
  const saturationLightnessPointer = {
23
23
  left: range_mappings.constrainToRange((saturation * width) / constants.MAX_SATURATION_VALUE, 0, width),
24
- top: range_mappings.constrainToRange((lightness * height) / constants.MAX_LIGHTNESS_VALUE, 0, height)
24
+ top: range_mappings.constrainToRange(((constants.MAX_LIGHTNESS_VALUE - value) * height) / constants.MAX_LIGHTNESS_VALUE, 0, height)
25
25
  };
26
26
  const hueSliderPointer = {
27
27
  top: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / constants.MAX_HUE_VALUE),
package/build/cjs/packages/aurora/src/utilities/colors/color_converter.js CHANGED
@@ -5,14 +5,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var index = require('../../../../../external/color-convert/index.js');
6
6
 
7
7
  class ColorConverter {
8
- static hex2hsl(value) {
9
- const valueToConvert = value.startsWith('#') ? value.substring(1) : value;
10
- const [hue, saturation, lightness] = index['default'].hex.hsl(valueToConvert);
8
+ static hex2hsl(hex) {
9
+ if (!hex)
10
+ return { hue: 0, saturation: 0, lightness: 100 };
11
+ const hexToConvert = hex.startsWith('#') ? hex.substring(1) : hex;
12
+ const [hue, saturation, lightness] = index['default'].hex.hsl(hexToConvert);
11
13
  return { hue, saturation, lightness };
12
14
  }
13
15
  static hsl2hex({ hue, saturation, lightness }) {
14
16
  return `#${index['default'].hsl.hex([hue, saturation, lightness])}`;
15
17
  }
18
+ static hex2hsv(hex) {
19
+ if (!hex)
20
+ return { hue: 0, saturation: 0, value: 100 };
21
+ const hexToConvert = hex.startsWith('#') ? hex.substring(1) : hex;
22
+ const [hue, saturation, value] = index['default'].hex.hsv(hexToConvert);
23
+ return { hue, saturation, value };
24
+ }
16
25
  }
17
26
 
18
27
  exports.ColorConverter = ColorConverter;
package/build/cjs/packages/aurora/src/utilities/colors/color_converter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;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/color_picker/components/hue_picker.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
1
  import { IHuePickerProps } from '../types';
2
+ import React from 'react';
3
3
  declare const HuePicker: React.FC<IHuePickerProps>;
4
4
  export default HuePicker;
package/build/esm/packages/aurora/src/components/color_picker/components/label.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
1
  import { IColorPickerLabelProps } from '../types';
2
+ import React from 'react';
3
3
  declare const ColorPickerLabel: React.FC<IColorPickerLabelProps>;
4
4
  export default ColorPickerLabel;
package/build/esm/packages/aurora/src/components/color_picker/components/label.js CHANGED
@@ -16,7 +16,7 @@ const ColorPickerLabel = ({ name, isRequired, id }) => {
16
16
  const { isOpen } = useContext(DropdownContext);
17
17
  const classes = useStyles({ color });
18
18
  useEffect(() => {
19
- if (isOpen) {
19
+ if (isOpen && color.hex) {
20
20
  setInitialColor(color);
21
21
  }
22
22
  // eslint-disable-next-line
package/build/esm/packages/aurora/src/components/color_picker/index.js CHANGED
@@ -40,7 +40,7 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
40
40
  const hueSliderRef = useRef(null);
41
41
  const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });
42
42
  useEffect(() => {
43
- const initialColor = getColorFromHex(color.hex);
43
+ const initialColor = getColorFromHex(color.hex || '#ffffff');
44
44
  setNewColorPickerPositions(initialColor);
45
45
  // eslint-disable-next-line react-hooks/exhaustive-deps
46
46
  }, []);
@@ -78,7 +78,7 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
78
78
  React.createElement("div", { className: `${classes.preview} ${styles[cssColorPickerPreview]}` }),
79
79
  React.createElement("div", { className: styles[cssColorPickerInputContainer] },
80
80
  React.createElement("span", null, "#"),
81
- React.createElement(Input, { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex.replace(/#/g, ''), onChange: inputOnChange }))),
81
+ React.createElement(Input, { id: "color-picker-id", value: (color.hex || '').replace(/#/g, ''), onChange: inputOnChange }))),
82
82
  !hideChooseCancelButtons && React.createElement(ColorPickerButtons, { restoreInitialColor: restoreInitialColor })));
83
83
  };
84
84
  const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {
package/build/esm/packages/aurora/src/components/color_picker/types.d.ts CHANGED
@@ -25,7 +25,7 @@ export interface IColorPickerProps extends IPureColorPickerProps {
25
25
  name?: string;
26
26
  }
27
27
  export interface IColorPickerContextProps {
28
- color: IColor;
28
+ color: Omit<IColor, 'hex'> & Pick<Partial<IColor>, 'hex'>;
29
29
  screenName: string;
30
30
  initialColor: IColor;
31
31
  setInitialColor: Dispatch<SetStateAction<IColor | undefined>>;
package/build/esm/packages/aurora/src/components/color_picker/utilities.js CHANGED
@@ -12,12 +12,12 @@ import { ColorConverter } from '../../utilities/colors/color_converter.js';
12
12
  */
13
13
  const getIndicatorPositionsFromHEX = ({ saturationLightnessPanelRef, hueSliderRef, hex }) => {
14
14
  var _a, _b;
15
- const { hue, saturation, lightness } = ColorConverter.hex2hsl(hex);
15
+ const { hue, saturation, value } = ColorConverter.hex2hsv(hex);
16
16
  const { width = 0, height = 0 } = ((_a = saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
17
17
  const hueSliderRect = (_b = hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
18
18
  const saturationLightnessPointer = {
19
19
  left: constrainToRange((saturation * width) / MAX_SATURATION_VALUE, 0, width),
20
- top: constrainToRange((lightness * height) / MAX_LIGHTNESS_VALUE, 0, height)
20
+ top: constrainToRange(((MAX_LIGHTNESS_VALUE - value) * height) / MAX_LIGHTNESS_VALUE, 0, height)
21
21
  };
22
22
  const hueSliderPointer = {
23
23
  top: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / MAX_HUE_VALUE),
package/build/esm/packages/aurora/src/utilities/colors/color_converter.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { THEXColor, THSLColor } from "./types";
1
+ import { THEXColor, THSLColor, THSVColor } from "./types";
2
2
  export declare class ColorConverter {
3
- static hex2hsl(value: THEXColor): THSLColor;
3
+ static hex2hsl(hex?: THEXColor): THSLColor;
4
4
  static hsl2hex({ hue, saturation, lightness }: THSLColor): THEXColor;
5
+ static hex2hsv(hex?: THEXColor): THSVColor;
5
6
  }
package/build/esm/packages/aurora/src/utilities/colors/color_converter.js CHANGED
@@ -1,14 +1,23 @@
1
1
  import colorConvert from '../../../../../external/color-convert/index.js';
2
2
 
3
3
  class ColorConverter {
4
- static hex2hsl(value) {
5
- const valueToConvert = value.startsWith('#') ? value.substring(1) : value;
6
- const [hue, saturation, lightness] = colorConvert.hex.hsl(valueToConvert);
4
+ static hex2hsl(hex) {
5
+ if (!hex)
6
+ return { hue: 0, saturation: 0, lightness: 100 };
7
+ const hexToConvert = hex.startsWith('#') ? hex.substring(1) : hex;
8
+ const [hue, saturation, lightness] = colorConvert.hex.hsl(hexToConvert);
7
9
  return { hue, saturation, lightness };
8
10
  }
9
11
  static hsl2hex({ hue, saturation, lightness }) {
10
12
  return `#${colorConvert.hsl.hex([hue, saturation, lightness])}`;
11
13
  }
14
+ static hex2hsv(hex) {
15
+ if (!hex)
16
+ return { hue: 0, saturation: 0, value: 100 };
17
+ const hexToConvert = hex.startsWith('#') ? hex.substring(1) : hex;
18
+ const [hue, saturation, value] = colorConvert.hex.hsv(hexToConvert);
19
+ return { hue, saturation, value };
20
+ }
12
21
  }
13
22
 
14
23
  export { ColorConverter };
package/build/esm/packages/aurora/src/utilities/colors/color_converter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,yBAAyB,gDAAoD;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,yBAAyB,gDAAoD;AAC7E;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/utilities/colors/types.d.ts CHANGED
@@ -3,4 +3,9 @@ export declare type THSLColor = {
3
3
  saturation: number;
4
4
  lightness: number;
5
5
  };
6
+ export declare type THSVColor = {
7
+ hue: number;
8
+ saturation: number;
9
+ value: number;
10
+ };
6
11
  export declare type THEXColor = string;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.1.15",
5
+ "version": "2.1.16",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",