react-asc 19.0.3 → 19.0.4

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 (4) hide show
  1. package/hooks/useHover.d.ts +2 -2
  2. package/index.es.js +19 -16
  3. package/index.js +19 -16
  4. package/package.json +1 -1
package/hooks/useHover.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { RefObject } from 'react';
2
- export declare function useHover<T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>): boolean;
1
+ /// <reference types="react" />
2
+ export declare function useHover(): (boolean | import("react").MutableRefObject<null>)[];
package/index.es.js CHANGED
@@ -243,22 +243,26 @@ function useWindowSize() {
243
243
  return windowSize;
244
244
  }
245
245
 
246
- function useHover(elementRef) {
246
+ function useHover() {
247
247
  const [value, setValue] = useState(false);
248
+ const ref = useRef(null);
248
249
  const handleMouseOver = () => setValue(true);
249
250
  const handleMouseOut = () => setValue(false);
250
- const node = elementRef.current;
251
- if (node) {
252
- node.addEventListener("mouseover", handleMouseOver);
253
- node.addEventListener("mouseout", handleMouseOut);
254
- useEffect(() => {
251
+ useEffect(() => {
252
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
253
+ const node = ref.current;
254
+ if (node) {
255
+ node.addEventListener("mouseover", handleMouseOver);
256
+ node.addEventListener("mouseout", handleMouseOut);
255
257
  return () => {
256
258
  node.removeEventListener("mouseover", handleMouseOver);
257
259
  node.removeEventListener("mouseout", handleMouseOut);
258
260
  };
259
- }, [elementRef.current]);
260
- }
261
- return value;
261
+ }
262
+ return;
263
+ }, [ref.current] // Recall only if ref changes
264
+ );
265
+ return [ref, value];
262
266
  }
263
267
 
264
268
  const useConstructor = (callBack) => {
@@ -572,7 +576,7 @@ const Breadcrumb = (props) => {
572
576
 
573
577
  const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
574
578
 
575
- var css_248z$F = ".BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
579
+ var css_248z$F = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
576
580
  var styles$F = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
577
581
  styleInject(css_248z$F);
578
582
 
@@ -989,9 +993,11 @@ const FormInput = (props) => {
989
993
  !isValid && cssClasses.push('is-invalid');
990
994
  return cssClasses.filter(css => css).join(' ');
991
995
  };
996
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
992
997
  const handleOnInput = (value, type, name) => {
993
998
  onInput && onInput({ value, type, name });
994
999
  };
1000
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
995
1001
  const handleOnChange = (value, type, name) => {
996
1002
  onChange && onChange({ value, type, name });
997
1003
  };
@@ -1017,9 +1023,7 @@ const FormInput = (props) => {
1017
1023
  type === 'autocomplete' &&
1018
1024
  React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), options: options }),
1019
1025
  type === 'checkbox' &&
1020
- React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''),
1021
- // onChange={e => handleOnChange((e?.target as HTMLInputElement).checked, type, name as string)}
1022
- checked: value === 'true' ? true : false }),
1026
+ React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value === 'true' ? true : false }),
1023
1027
  type === 'radio' &&
1024
1028
  React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
1025
1029
  React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
@@ -2212,8 +2216,7 @@ styleInject(css_248z$6);
2212
2216
 
2213
2217
  const Step = (props) => {
2214
2218
  const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
2215
- const hoverRef = useRef(null);
2216
- const isHover = useHover(hoverRef);
2219
+ const [hoverRef, isHovered] = useHover();
2217
2220
  const handleClick = (event) => {
2218
2221
  if (!isDisabled) {
2219
2222
  onClick && onClick({ event, value });
@@ -2243,7 +2246,7 @@ const Step = (props) => {
2243
2246
  };
2244
2247
  return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
2245
2248
  React.createElement("div", { className: getCssClassesStep() },
2246
- React.createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHover || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
2249
+ React.createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
2247
2250
  React.createElement(CircleSolidIcon, null)),
2248
2251
  React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
2249
2252
  React.createElement(Icon, null,
package/index.js CHANGED
@@ -251,22 +251,26 @@ function useWindowSize() {
251
251
  return windowSize;
252
252
  }
253
253
 
254
- function useHover(elementRef) {
254
+ function useHover() {
255
255
  const [value, setValue] = React.useState(false);
256
+ const ref = React.useRef(null);
256
257
  const handleMouseOver = () => setValue(true);
257
258
  const handleMouseOut = () => setValue(false);
258
- const node = elementRef.current;
259
- if (node) {
260
- node.addEventListener("mouseover", handleMouseOver);
261
- node.addEventListener("mouseout", handleMouseOut);
262
- React.useEffect(() => {
259
+ React.useEffect(() => {
260
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
261
+ const node = ref.current;
262
+ if (node) {
263
+ node.addEventListener("mouseover", handleMouseOver);
264
+ node.addEventListener("mouseout", handleMouseOut);
263
265
  return () => {
264
266
  node.removeEventListener("mouseover", handleMouseOver);
265
267
  node.removeEventListener("mouseout", handleMouseOut);
266
268
  };
267
- }, [elementRef.current]);
268
- }
269
- return value;
269
+ }
270
+ return;
271
+ }, [ref.current] // Recall only if ref changes
272
+ );
273
+ return [ref, value];
270
274
  }
271
275
 
272
276
  const useConstructor = (callBack) => {
@@ -580,7 +584,7 @@ const Breadcrumb = (props) => {
580
584
 
581
585
  const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
582
586
 
583
- var css_248z$F = ".BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
587
+ var css_248z$F = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
584
588
  var styles$F = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
585
589
  styleInject(css_248z$F);
586
590
 
@@ -997,9 +1001,11 @@ const FormInput = (props) => {
997
1001
  !isValid && cssClasses.push('is-invalid');
998
1002
  return cssClasses.filter(css => css).join(' ');
999
1003
  };
1004
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1000
1005
  const handleOnInput = (value, type, name) => {
1001
1006
  onInput && onInput({ value, type, name });
1002
1007
  };
1008
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1003
1009
  const handleOnChange = (value, type, name) => {
1004
1010
  onChange && onChange({ value, type, name });
1005
1011
  };
@@ -1025,9 +1031,7 @@ const FormInput = (props) => {
1025
1031
  type === 'autocomplete' &&
1026
1032
  React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), options: options }),
1027
1033
  type === 'checkbox' &&
1028
- React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''),
1029
- // onChange={e => handleOnChange((e?.target as HTMLInputElement).checked, type, name as string)}
1030
- checked: value === 'true' ? true : false }),
1034
+ React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value === 'true' ? true : false }),
1031
1035
  type === 'radio' &&
1032
1036
  React__default["default"].createElement(React__default["default"].Fragment, null, options.map((option) => React__default["default"].createElement("div", { className: "form-check", key: option.id },
1033
1037
  React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
@@ -2220,8 +2224,7 @@ styleInject(css_248z$6);
2220
2224
 
2221
2225
  const Step = (props) => {
2222
2226
  const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
2223
- const hoverRef = React.useRef(null);
2224
- const isHover = useHover(hoverRef);
2227
+ const [hoverRef, isHovered] = useHover();
2225
2228
  const handleClick = (event) => {
2226
2229
  if (!isDisabled) {
2227
2230
  onClick && onClick({ event, value });
@@ -2251,7 +2254,7 @@ const Step = (props) => {
2251
2254
  };
2252
2255
  return (React__default["default"].createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
2253
2256
  React__default["default"].createElement("div", { className: getCssClassesStep() },
2254
- React__default["default"].createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHover || isActive) && !isDisabled ? exports.COLOR.primary : exports.COLOR.secondary },
2257
+ React__default["default"].createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? exports.COLOR.primary : exports.COLOR.secondary },
2255
2258
  React__default["default"].createElement(CircleSolidIcon, null)),
2256
2259
  React__default["default"].createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
2257
2260
  React__default["default"].createElement(Icon, null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-asc",
3
- "version": "19.0.3",
3
+ "version": "19.0.4",
4
4
  "description": "handcrafted react components",
5
5
  "main": "index.js",
6
6
  "module": "index.es.js",