@searchspring/snap-preact-components 0.63.4 → 0.64.0

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 (11) hide show
  1. package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts +4 -0
  2. package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
  3. package/dist/cjs/components/Atoms/Dropdown/Dropdown.js +53 -18
  4. package/dist/cjs/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map +1 -1
  5. package/dist/cjs/components/Molecules/OverlayBadge/OverlayBadge.js +1 -1
  6. package/dist/esm/components/Atoms/Dropdown/Dropdown.d.ts +4 -0
  7. package/dist/esm/components/Atoms/Dropdown/Dropdown.d.ts.map +1 -1
  8. package/dist/esm/components/Atoms/Dropdown/Dropdown.js +53 -18
  9. package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map +1 -1
  10. package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.js +1 -0
  11. package/package.json +11 -11
package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts CHANGED
@@ -9,10 +9,14 @@ export interface DropdownProps extends ComponentProps {
9
9
  children?: ComponentChildren;
10
10
  disabled?: boolean;
11
11
  open?: boolean;
12
+ disableClick?: boolean;
12
13
  disableOverlay?: boolean;
13
14
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
15
+ onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
16
+ onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
14
17
  onToggle?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, showContent: boolean) => void;
15
18
  startOpen?: boolean;
19
+ toggleOnHover?: boolean;
16
20
  disableClickOutside?: boolean;
17
21
  disableA11y?: boolean;
18
22
  }
package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WAiG5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WAmJ5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}
package/dist/cjs/components/Atoms/Dropdown/Dropdown.js CHANGED
@@ -56,32 +56,37 @@ exports.Dropdown = (0, mobx_react_1.observer)(function (properties) {
56
56
  var props = __assign(__assign(__assign({
57
57
  // default props
58
58
  startOpen: false, disableA11y: false }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.dropdown), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.dropdown);
59
- var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, disableOverlay = props.disableOverlay, onClick = props.onClick, onToggle = props.onToggle, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, style = props.style;
60
- var showContent, setShowContent;
59
+ var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, disableOverlay = props.disableOverlay, onClick = props.onClick, onToggle = props.onToggle, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, style = props.style;
60
+ var dropdownOpen, setDropdownOpen;
61
61
  var stateful = open === undefined;
62
62
  if (stateful) {
63
- _a = (0, hooks_1.useState)(startOpen), showContent = _a[0], setShowContent = _a[1];
63
+ _a = (0, hooks_1.useState)(startOpen), dropdownOpen = _a[0], setDropdownOpen = _a[1];
64
64
  }
65
65
  else {
66
- showContent = open;
66
+ dropdownOpen = open;
67
67
  }
68
+ // state to track touch interactions
69
+ var _e = (0, hooks_1.useState)(false), isTouchInteraction = _e[0], setIsTouchInteraction = _e[1];
68
70
  var innerRef;
69
71
  if (!disableClickOutside) {
70
72
  innerRef = (0, hooks_2.useClickOutside)(function (e) {
71
- if (showContent) {
73
+ if (dropdownOpen) {
72
74
  if (!disabled) {
73
- stateful && setShowContent && setShowContent(false);
75
+ stateful && setDropdownOpen && setDropdownOpen(false);
74
76
  onToggle && onToggle(e, false);
75
77
  }
76
78
  }
77
79
  });
78
80
  }
79
- var toggleShowContent = function (e) {
81
+ var toggleOpenDropdown = function (e, state) {
80
82
  if (stateful) {
81
- setShowContent &&
82
- setShowContent(function (prev) {
83
- onToggle && onToggle(e, !prev);
84
- return !prev;
83
+ setDropdownOpen &&
84
+ setDropdownOpen(function (prev) {
85
+ var newState = state !== null && state !== void 0 ? state : !prev;
86
+ if (newState != prev) {
87
+ onToggle && onToggle(e, newState);
88
+ }
89
+ return newState;
85
90
  });
86
91
  }
87
92
  };
@@ -92,15 +97,45 @@ exports.Dropdown = (0, mobx_react_1.observer)(function (properties) {
92
97
  else if (style) {
93
98
  styling.css = [style];
94
99
  }
100
+ var hoverProps = {
101
+ onMouseEnter: (toggleOnHover || onMouseEnter) &&
102
+ (function (e) {
103
+ // skip if it's a touch interaction
104
+ if (isTouchInteraction)
105
+ return;
106
+ if (toggleOnHover && !disabled) {
107
+ toggleOpenDropdown(e, true);
108
+ }
109
+ onMouseEnter && onMouseEnter(e);
110
+ }),
111
+ onMouseLeave: (toggleOnHover || onMouseLeave) &&
112
+ (function (e) {
113
+ // skip if it's a touch interaction
114
+ if (isTouchInteraction)
115
+ return;
116
+ if (toggleOnHover && !disabled) {
117
+ toggleOpenDropdown(e, false);
118
+ }
119
+ onMouseLeave && onMouseLeave(e);
120
+ }),
121
+ };
95
122
  return ((0, react_1.jsx)(providers_1.CacheProvider, null,
96
- (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': showContent }, className), ref: innerRef }),
97
- (0, react_1.jsx)("div", { className: "ss__dropdown__button", ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-expanded": showContent, role: "button", onClick: function (e) {
98
- if (!disabled) {
99
- toggleShowContent(e);
123
+ (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className), ref: innerRef }, hoverProps),
124
+ (0, react_1.jsx)("div", { className: "ss__dropdown__button", ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-expanded": dropdownOpen, role: "button", onTouchStart: function () {
125
+ // mark this as a touch interaction to avoid hover state conflicts
126
+ setIsTouchInteraction(true);
127
+ }, onClick: function (e) {
128
+ if (!disabled && !disableClick) {
129
+ toggleOpenDropdown(e);
100
130
  onClick && onClick(e);
101
131
  }
102
- } }, (0, utilities_1.cloneWithProps)(button, { open: showContent, toggleOpen: toggleShowContent })),
132
+ // reset touch interaction after a short delay
133
+ // this gives time for the click handler to complete before allowing hover events again
134
+ setTimeout(function () {
135
+ setIsTouchInteraction(false);
136
+ }, 300);
137
+ } }, (0, utilities_1.cloneWithProps)(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown })),
103
138
  (0, react_1.jsx)("div", { className: "ss__dropdown__content" },
104
- (0, utilities_1.cloneWithProps)(content, { open: showContent, toggleOpen: toggleShowContent }),
105
- (0, utilities_1.cloneWithProps)(children, { open: showContent, toggleOpen: toggleShowContent })))));
139
+ (0, utilities_1.cloneWithProps)(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown }),
140
+ (0, utilities_1.cloneWithProps)(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown })))));
106
141
  });
package/dist/cjs/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA8C7D,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAuFpE,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
1
+ {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA+C7D,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAuFpE,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
package/dist/cjs/components/Molecules/OverlayBadge/OverlayBadge.js CHANGED
@@ -39,7 +39,7 @@ var CSS = {
39
39
  }
40
40
  return (0, react_1.css)({
41
41
  position: 'relative',
42
- '& .ss__overlay-badge__grid-wrapper': __assign({ display: 'grid', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, gridProperties),
42
+ '& .ss__overlay-badge__grid-wrapper': __assign({ pointerEvents: 'none', display: 'grid', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, gridProperties),
43
43
  });
44
44
  },
45
45
  BadgePositioning: function (_a) {
package/dist/esm/components/Atoms/Dropdown/Dropdown.d.ts CHANGED
@@ -9,10 +9,14 @@ export interface DropdownProps extends ComponentProps {
9
9
  children?: ComponentChildren;
10
10
  disabled?: boolean;
11
11
  open?: boolean;
12
+ disableClick?: boolean;
12
13
  disableOverlay?: boolean;
13
14
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
15
+ onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
16
+ onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
14
17
  onToggle?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, showContent: boolean) => void;
15
18
  startOpen?: boolean;
19
+ toggleOnHover?: boolean;
16
20
  disableClickOutside?: boolean;
17
21
  disableA11y?: boolean;
18
22
  }
package/dist/esm/components/Atoms/Dropdown/Dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WAiG5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,eAAyB,aAAa,KAAG,WAmJ5D,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}
package/dist/esm/components/Atoms/Dropdown/Dropdown.js CHANGED
@@ -41,32 +41,37 @@ export const Dropdown = observer((properties) => {
41
41
  ...properties,
42
42
  ...properties.theme?.components?.dropdown,
43
43
  };
44
- const { button, content, children, disabled, open, disableOverlay, onClick, onToggle, startOpen, disableClickOutside, disableA11y, disableStyles, className, style, } = props;
45
- let showContent, setShowContent;
44
+ const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, disableOverlay, onClick, onToggle, startOpen, disableClickOutside, disableA11y, disableStyles, className, style, } = props;
45
+ let dropdownOpen, setDropdownOpen;
46
46
  const stateful = open === undefined;
47
47
  if (stateful) {
48
- [showContent, setShowContent] = useState(startOpen);
48
+ [dropdownOpen, setDropdownOpen] = useState(startOpen);
49
49
  }
50
50
  else {
51
- showContent = open;
51
+ dropdownOpen = open;
52
52
  }
53
+ // state to track touch interactions
54
+ const [isTouchInteraction, setIsTouchInteraction] = useState(false);
53
55
  let innerRef;
54
56
  if (!disableClickOutside) {
55
57
  innerRef = useClickOutside((e) => {
56
- if (showContent) {
58
+ if (dropdownOpen) {
57
59
  if (!disabled) {
58
- stateful && setShowContent && setShowContent(false);
60
+ stateful && setDropdownOpen && setDropdownOpen(false);
59
61
  onToggle && onToggle(e, false);
60
62
  }
61
63
  }
62
64
  });
63
65
  }
64
- const toggleShowContent = (e) => {
66
+ const toggleOpenDropdown = (e, state) => {
65
67
  if (stateful) {
66
- setShowContent &&
67
- setShowContent((prev) => {
68
- onToggle && onToggle(e, !prev);
69
- return !prev;
68
+ setDropdownOpen &&
69
+ setDropdownOpen((prev) => {
70
+ const newState = state ?? !prev;
71
+ if (newState != prev) {
72
+ onToggle && onToggle(e, newState);
73
+ }
74
+ return newState;
70
75
  });
71
76
  }
72
77
  };
@@ -77,15 +82,45 @@ export const Dropdown = observer((properties) => {
77
82
  else if (style) {
78
83
  styling.css = [style];
79
84
  }
85
+ const hoverProps = {
86
+ onMouseEnter: (toggleOnHover || onMouseEnter) &&
87
+ ((e) => {
88
+ // skip if it's a touch interaction
89
+ if (isTouchInteraction)
90
+ return;
91
+ if (toggleOnHover && !disabled) {
92
+ toggleOpenDropdown(e, true);
93
+ }
94
+ onMouseEnter && onMouseEnter(e);
95
+ }),
96
+ onMouseLeave: (toggleOnHover || onMouseLeave) &&
97
+ ((e) => {
98
+ // skip if it's a touch interaction
99
+ if (isTouchInteraction)
100
+ return;
101
+ if (toggleOnHover && !disabled) {
102
+ toggleOpenDropdown(e, false);
103
+ }
104
+ onMouseLeave && onMouseLeave(e);
105
+ }),
106
+ };
80
107
  return (jsx(CacheProvider, null,
81
- jsx("div", { ...styling, className: classnames('ss__dropdown', { 'ss__dropdown--open': showContent }, className), ref: innerRef },
82
- jsx("div", { className: "ss__dropdown__button", ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-expanded": showContent, role: "button", onClick: (e) => {
83
- if (!disabled) {
84
- toggleShowContent(e);
108
+ jsx("div", { ...styling, className: classnames('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className), ref: innerRef, ...hoverProps },
109
+ jsx("div", { className: "ss__dropdown__button", ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-expanded": dropdownOpen, role: "button", onTouchStart: () => {
110
+ // mark this as a touch interaction to avoid hover state conflicts
111
+ setIsTouchInteraction(true);
112
+ }, onClick: (e) => {
113
+ if (!disabled && !disableClick) {
114
+ toggleOpenDropdown(e);
85
115
  onClick && onClick(e);
86
116
  }
87
- } }, cloneWithProps(button, { open: showContent, toggleOpen: toggleShowContent })),
117
+ // reset touch interaction after a short delay
118
+ // this gives time for the click handler to complete before allowing hover events again
119
+ setTimeout(() => {
120
+ setIsTouchInteraction(false);
121
+ }, 300);
122
+ } }, cloneWithProps(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown })),
88
123
  jsx("div", { className: "ss__dropdown__content" },
89
- cloneWithProps(content, { open: showContent, toggleOpen: toggleShowContent }),
90
- cloneWithProps(children, { open: showContent, toggleOpen: toggleShowContent })))));
124
+ cloneWithProps(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown }),
125
+ cloneWithProps(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown })))));
91
126
  });
package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA8C7D,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAuFpE,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
1
+ {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA+C7D,eAAO,MAAM,YAAY,eAAyB,iBAAiB,KAAG,WAuFpE,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.js CHANGED
@@ -21,6 +21,7 @@ const CSS = {
21
21
  return css({
22
22
  position: 'relative',
23
23
  '& .ss__overlay-badge__grid-wrapper': {
24
+ pointerEvents: 'none',
24
25
  display: 'grid',
25
26
  position: 'absolute',
26
27
  top: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.63.4",
3
+ "version": "0.64.0",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "@cypress/react": "^8.0.0",
31
31
  "@emotion/react": "11.9.0",
32
- "@searchspring/snap-toolbox": "^0.63.4",
32
+ "@searchspring/snap-toolbox": "^0.64.0",
33
33
  "classnames": "^2.3.2",
34
34
  "cypress": "^13.7.1",
35
35
  "cypress-wait-until": "^1.7.2",
@@ -52,14 +52,14 @@
52
52
  "@babel/preset-env": "^7.21.4",
53
53
  "@babel/preset-react": "^7.18.6",
54
54
  "@babel/runtime": "^7.21.0",
55
- "@searchspring/snap-client": "^0.63.4",
56
- "@searchspring/snap-controller": "^0.63.4",
57
- "@searchspring/snap-event-manager": "^0.63.4",
58
- "@searchspring/snap-logger": "^0.63.4",
59
- "@searchspring/snap-profiler": "^0.63.4",
60
- "@searchspring/snap-store-mobx": "^0.63.4",
61
- "@searchspring/snap-tracker": "^0.63.4",
62
- "@searchspring/snap-url-manager": "^0.63.4",
55
+ "@searchspring/snap-client": "^0.64.0",
56
+ "@searchspring/snap-controller": "^0.64.0",
57
+ "@searchspring/snap-event-manager": "^0.64.0",
58
+ "@searchspring/snap-logger": "^0.64.0",
59
+ "@searchspring/snap-profiler": "^0.64.0",
60
+ "@searchspring/snap-store-mobx": "^0.64.0",
61
+ "@searchspring/snap-tracker": "^0.64.0",
62
+ "@searchspring/snap-url-manager": "^0.64.0",
63
63
  "@storybook/addon-actions": "6.4.22",
64
64
  "@storybook/addon-controls": "6.4.22",
65
65
  "@storybook/addon-docs": "6.4.22",
@@ -84,5 +84,5 @@
84
84
  "webpack-merge": "^5.8.0"
85
85
  },
86
86
  "sideEffects": false,
87
- "gitHead": "8d744ee5f79d14ed44a3d2f1dcf8cd2a08f12485"
87
+ "gitHead": "fc0fb9a2fe535b394a2f0d340a20b2b72ab84bff"
88
88
  }