@eightshift/ui-components 6.0.11 → 6.0.12

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 (6) hide show
  1. package/dist/components/menu/menu.js +5 -4
  2. package/dist/components/responsive/responsive-legacy.js +1 -1
  3. package/dist/components/responsive/responsive.js +1 -1
  4. package/dist/components/slider/slider.js +5 -1
  5. package/dist/icons/icons.js +32 -2
  6. package/package.json +1 -1
package/dist/components/menu/menu.js CHANGED
@@ -100,6 +100,7 @@ const Menu = (props) => {
100
100
  additionalProps.trigger = "longPress";
101
101
  }
102
102
  const hasSubmenuItems = Array.isArray(children) ? children.some((child) => child?.type?.displayName === "SubMenuItem") : children?.type?.displayName === "SubMenuItem";
103
+ let { className: popoverClassName, wrapperClassName: popoverWrapperClassName, ...otherPopoverProps } = popoverProps || {};
103
104
  return /* @__PURE__ */ jsxs(
104
105
  $3674c52c6b3c5bce$export$27d2ad3c5815583e,
105
106
  {
@@ -122,11 +123,11 @@ const Menu = (props) => {
122
123
  "aria-label": ariaLabel,
123
124
  popoverProps: {
124
125
  maxHeight: Math.max(240, window.innerHeight * 0.42),
125
- ...popoverProps
126
+ ...otherPopoverProps
126
127
  },
127
- ...popoverProps,
128
- className: clsx("es:p-1.5 es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
129
- wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverProps?.wrapperClassName),
128
+ ...otherPopoverProps,
129
+ className: clsx("es:p-1.5 es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverClassName),
130
+ wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverWrapperClassName),
130
131
  children: /* @__PURE__ */ jsx(
131
132
  $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
132
133
  {
package/dist/components/responsive/responsive-legacy.js CHANGED
@@ -214,7 +214,7 @@ const ResponsiveLegacy = (props) => {
214
214
  visible: detailsVisible,
215
215
  children: [
216
216
  /* @__PURE__ */ jsx(DefaultTooltip, {}),
217
- /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
217
+ /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2 es:w-full", children: children({
218
218
  breakpoint: defaultBreakpoint,
219
219
  currentValue: value?.[attribute[defaultBreakpoint]],
220
220
  options,
package/dist/components/responsive/responsive.js CHANGED
@@ -346,7 +346,7 @@ const Responsive = (props) => {
346
346
  visible: detailsVisible,
347
347
  children: [
348
348
  /* @__PURE__ */ jsx(DefaultTooltip, {}),
349
- /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
349
+ /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2 es:w-full", children: children({
350
350
  breakpoint: "_default",
351
351
  currentValue: value?.["_default"],
352
352
  handleChange: (newValue) => onChange({
package/dist/components/slider/slider.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { useState } from "react";
2
3
  import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DPWyf-gp.js";
3
4
  import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-CZV3HhHY.js";
4
5
  import { BaseControl } from "../base-control/base-control.js";
@@ -87,6 +88,7 @@ const Slider = (props) => {
87
88
  hidden,
88
89
  ...other
89
90
  } = props;
91
+ const [hoveredThumbs, setHoveredThumbs] = useState([]);
90
92
  if (hidden) {
91
93
  return null;
92
94
  }
@@ -247,6 +249,8 @@ const Slider = (props) => {
247
249
  $6f909507e6374d18$export$2c1b491743890dec,
248
250
  {
249
251
  index: i,
252
+ onHoverStart: () => setHoveredThumbs((prev) => [...prev, i]),
253
+ onHoverEnd: () => setHoveredThumbs((prev) => prev.filter((val) => val !== i)),
250
254
  "aria-label": thumbLabels?.[i],
251
255
  className: clsx(
252
256
  !vertical && ["es:h-10 es:w-0.75", "es:row-1"],
@@ -271,7 +275,7 @@ const Slider = (props) => {
271
275
  },
272
276
  children: [
273
277
  thumbContent && thumbContent(i),
274
- /* @__PURE__ */ jsx(AnimatePresence, { children: i === state.focusedThumb && /* @__PURE__ */ jsx(
278
+ /* @__PURE__ */ jsx(AnimatePresence, { children: (state.focusedThumb === i || hoveredThumbs.includes(i)) && /* @__PURE__ */ jsx(
275
279
  motion.div,
276
280
  {
277
281
  className: clsx(
package/dist/icons/icons.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { GenericColorSwatch } from "./generic-color-swatch.js";
3
3
  const icons = {
4
4
  width: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
@@ -3407,7 +3407,37 @@ const icons = {
3407
3407
  /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 14.5h15", fill: "none" }),
3408
3408
  /* @__PURE__ */ jsx("path", { d: "M12.5 3h-5a.5.5 0 0 1-.3-.9L9.7.225a.5.5 0 0 1 .6 0L12.8 2.1a.5.5 0 0 1-.3.9Zm0 14h-5a.5.5 0 0 0-.3.9l2.5 1.875a.5.5 0 0 0 .6 0l2.5-1.875a.5.5 0 0 0-.3-.9Z", fill: "currentColor" })
3409
3409
  ] }),
3410
- loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) })
3410
+ loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) }),
3411
+ verticalAlignAround: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
3412
+ /* @__PURE__ */ jsx("rect", { x: "2.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
3413
+ /* @__PURE__ */ jsx("rect", { x: "12.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
3414
+ /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
3415
+ ] }),
3416
+ verticalAlignEvenly: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
3417
+ /* @__PURE__ */ jsx("rect", { x: "3.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
3418
+ /* @__PURE__ */ jsx("rect", { x: "11.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
3419
+ /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
3420
+ ] }),
3421
+ verticalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
3422
+ /* @__PURE__ */ jsx("rect", { x: "0.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
3423
+ /* @__PURE__ */ jsx("rect", { x: "14.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
3424
+ /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
3425
+ ] }),
3426
+ horizontalAlignAround: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
3427
+ /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 2.75)", fill: "currentColor", fillOpacity: "0.5" }),
3428
+ /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 12.75)", fill: "currentColor", fillOpacity: "0.5" }),
3429
+ /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
3430
+ ] }),
3431
+ horizontalAlignEvenly: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
3432
+ /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 3.75)", fill: "currentColor", fillOpacity: "0.5" }),
3433
+ /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 11.75)", fill: "currentColor", fillOpacity: "0.5" }),
3434
+ /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
3435
+ ] }),
3436
+ horizontalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
3437
+ /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 .75)", fill: "currentColor", fillOpacity: "0.5" }),
3438
+ /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 14.75)", fill: "currentColor", fillOpacity: "0.5" }),
3439
+ /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
3440
+ ] })
3411
3441
  };
3412
3442
  const blockIcons = {
3413
3443
  // Eightshift blocks.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eightshift/ui-components",
3
- "version": "6.0.11",
3
+ "version": "6.0.12",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",