@eightshift/ui-components 5.6.1 → 6.0.0

package/dist/components/slider/column-config-slider.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-DfU6bRtH.js";
+import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-CL5CM9S8.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-0B6wWuDe.js";
 /**
  * A two-thumb slider for selecting a range of columns.
  *
@@ -25,6 +27,7 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @param {Function} props.onChangeEnd - Function to run when the value change ends.
  * @param {boolean} [props.disabled] - If `true`, the slider is disabled.
  * @param {string} [props.labelClassName] - Additional classes to pass to the label.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ColumnConfigSlider component.
@@ -54,6 +57,7 @@ const ColumnConfigSlider = (props) => {
     onChangeEnd,
     disabled,
     labelClassName,
+    flat,
     hidden,
     ...other
   } = props;
@@ -92,7 +96,7 @@ const ColumnConfigSlider = (props) => {
           children: /* @__PURE__ */ jsx(
             $6f909507e6374d18$export$105594979f116971,
             {
-              className: "es:isolate es:grid es:h-10 es:w-full es:grid-rows-1",
+              className: "es:isolate es:grid es:h-10 es:w-full es:grid-rows-1 es:has-dragging:cursor-grabbing",
               style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
               children: ({ state }) => {
                 return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -100,30 +104,51 @@ const ColumnConfigSlider = (props) => {
                     "div",
                     {
                       className: clsx(
-                        "es:col-span-full es:row-span-1 es:row-start-1 es:h-full es:w-full es:grow es:rounded-lg es:border",
-                        disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-sm"
-                      )
+                        "es:row-span-1 es:row-start-1 es:w-fill es:h-6 es:self-center es:my-0.5",
+                        "es:rounded-l-xl es:rounded-r-sm",
+                        "es:transition-plus-m es:duration-300 es:ease-spring-smooth",
+                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
+                        !disabled && ["es:bg-surface-200", "es:bg-linear-to-b es:from-surface-700/0 es:to-surface-700/5 es:from-25%", "es:inset-ring es:inset-ring-surface-300/20"],
+                        disabled && "es:bg-secondary-200",
+                        !disableOffset && "es:mr-1.25",
+                        value[0] < 2 && "es:hidden"
+                      ),
+                      style: { gridColumn: `1 / span ${Math.max(0, value[0] - 1)}` }
                     }
                   ),
-                  markerData.slice(0, -1).map((marker) => /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: clsx(
-                        "es:row-span-1 es:row-start-1 es:h-full es:w-px es:justify-self-center",
-                        marker >= value[0] - 1 && marker < value[1] ? "es:bg-accent-700/25" : "es:bg-secondary-300",
-                        (marker === value[0] - 2 || marker === value[1] - 1) && "es:hidden"
+                        "es:row-span-1 es:row-start-1 es:w-fill es:h-6 es:self-center es:my-0.5",
+                        "es:rounded-l-sm es:rounded-r-xl",
+                        "es:transition-plus-m es:duration-300 es:ease-spring-smooth",
+                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
+                        !disabled && ["es:bg-surface-200", "es:bg-linear-to-b es:from-surface-700/0 es:to-surface-700/5 es:from-25%", "es:inset-ring es:inset-ring-surface-300/20"],
+                        disabled && "es:bg-secondary-200",
+                        !disableWidth && "es:ml-1.25",
+                        value[1] === columns && "es:hidden"
                       ),
-                      style: { gridColumn: `${marker + 1} / span 2` }
-                    },
-                    marker
-                  )),
+                      style: { gridColumn: `${value[1] + 1} / span ${columns - value[1]}` }
+                    }
+                  ),
                   /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: clsx(
-                        "es:pointer-events-none es:col-start-1 es:row-start-1 es:border",
-                        "es:h-full es:w-full es:self-center es:rounded-lg",
-                        disabled ? "es:border-secondary-200 es:bg-secondary-50" : "es:border-accent-500 es:bg-accent-500/30"
+                        "es:pointer-events-none es:col-start-1 es:row-start-1",
+                        "es:h-6 es:w-fill es:self-center es:rounded-sm es:my-0.5",
+                        "es:transition es:duration-300",
+                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
+                        "es:mx-1.25",
+                        value[0] === 1 && "es:ml-4.25",
+                        value[1] === columns && "es:mr-4.25",
+                        !disabled && [
+                          "es:bg-accent-500 es:bg-linear-to-b es:from-accent-100/15 es:to-accent-100/0 es:from-25%",
+                          "es:inset-ring es:inset-ring-accent-700/10",
+                          "es:inset-shadow-sm es:inset-shadow-accent-50/30"
+                        ],
+                        disabled && "es:bg-secondary-400"
                       ),
                       style: {
                         gridColumn: `${value[0]} / span ${value[1] - value[0] + 1}`
@@ -135,43 +160,111 @@ const ColumnConfigSlider = (props) => {
                       "span",
                       {
                         className: clsx(
-                          "es:row-span-1 es:row-start-1 es:select-none es:place-self-center es:text-xs es:transition-colors",
-                          "es:inset-y-0 es:my-auto es:h-fit es:pl-px es:text-center",
-                          "es:icon:size-3 es:icon:stroke-[1.5]",
-                          marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-700" : "es:text-secondary-400"
+                          "es:row-span-1 es:row-start-1 es:select-none es:place-self-center",
+                          "es:icon:size-2 es:icon:stroke-3",
+                          "es:transition es:duration-300 es:ease-spring-smooth",
+                          marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-900" : "es:text-surface-400",
+                          disabled && "es:opacity-0",
+                          !disableOffset && index === 0 && value[0] === 2 && "es:-translate-x-0.25",
+                          !disableWidth && index === columns - 1 && value[1] === columns - 1 && "es:translate-x-0.25",
+                          !disableOffset && index === 0 && value[0] === 1 && "es:opacity-0 es:scale-50",
+                          !disableWidth && index === columns - 1 && value[1] === columns && "es:opacity-0 es:scale-50"
                         ),
-                        style: { gridColumn: `${index + 1} / span 1` },
+                        style: { gridColumn: index + 1 },
                         children: [
-                          showOuterAsGutter && marker === 0 && icons.chevronLeft,
-                          showOuterAsGutter && marker === columns - 1 && icons.chevronRight,
-                          showOuterAsGutter && marker > 0 && marker < columns - 1 && marker,
-                          !showOuterAsGutter && marker + 1
+                          showOuterAsGutter && index === 0 && icons.chevronLeft,
+                          showOuterAsGutter && index === columns - 1 && icons.chevronRight
                         ]
                       },
                       marker
                     );
                   }),
-                  state.values.map((_, i) => /* @__PURE__ */ jsx(
-                    $6f909507e6374d18$export$2c1b491743890dec,
+                  markerData.map((marker, i) => /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      index: i,
-                      "aria-label": thumbLabels?.[i],
-                      isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
                       className: clsx(
-                        "es:static! es:row-span-1 es:row-start-1 es:h-6 es:w-1.5 es:rounded-full es:border es:transition es:duration-300",
-                        i === 0 && "es:translate-y-1/2! es:self-center es:justify-self-start",
-                        i === 1 && "es:translate-x-full! es:translate-y-1/2! es:self-center es:justify-self-end",
-                        "es:shadow dragging:es:bg-accent-600 es:disabled:opacity-0",
-                        "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                        "es:border-accent-600 es:bg-accent-500 es:shadow-accent-600/50",
-                        "es:hover:cursor-grab dragging:es:cursor-grabbing"
+                        "es:row-span-1 es:row-start-1 es:size-0.75 es:place-self-center es:rounded-2xl",
+                        !disabled && marker >= value[0] - 1 && marker < value[1] && "es:bg-accent-50",
+                        !disabled && !(marker >= value[0] - 1 && marker < value[1]) && "es:bg-surface-500",
+                        disabled && marker >= value[0] - 1 && marker < value[1] && "es:bg-secondary-300",
+                        disabled && !(marker >= value[0] - 1 && marker < value[1]) && "es:bg-secondary-400",
+                        showOuterAsGutter && (i === 0 || i === columns - 1) && "es:hidden"
                       ),
-                      style: {
-                        gridColumn: `${state.values[i]} / span 1`
-                      }
+                      style: { gridColumn: i + 1 }
                     },
-                    i
-                  ))
+                    marker
+                  )),
+                  state.values.map((_, i) => {
+                    let gridCol = `${state.values[i] - (i === 0 ? 1 : 0)} / span 2`;
+                    if (i === 0 && state.values[0] === 1) {
+                      gridCol = "1";
+                    }
+                    if (i === 1 && state.values[1] === columns) {
+                      gridCol = `${columns}`;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      $6f909507e6374d18$export$2c1b491743890dec,
+                      {
+                        index: i,
+                        "aria-label": thumbLabels?.[i],
+                        isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
+                        className: clsx(
+                          "es:static! es:row-span-1 es:row-start-1 es:h-full es:w-1 es:rounded-md es:transition es:duration-300",
+                          "es:origin-center",
+                          "es:hover:ring-[0.25px] es:focus-visible:ring-[0.5px] es:dragging:ring-[1px] es:ring-accent-500",
+                          "es:transform-none!",
+                          "es:dragging:es:bg-accent-600 es:disabled:bg-secondary-400",
+                          "es:focus-visible:outline-2 es:outline-offset-2 es:outline-accent-500/40",
+                          "es:bg-accent-500",
+                          "es:hover:ring-accent-600",
+                          "es:dragging:bg-accent-600 es:dragging:ring-accent-600",
+                          !disabled && "es:hover:not-dragging:cursor-grab",
+                          i === 0 && disableOffset && "es:hidden",
+                          i === 1 && disableWidth && "es:hidden",
+                          "es:justify-self-center",
+                          !flat && !disabled && "es:shadow-xs es:shadow-black/5"
+                        ),
+                        style: {
+                          gridColumn: gridCol
+                        },
+                        children: /* @__PURE__ */ jsx(AnimatePresence, { children: i === state.focusedThumb && /* @__PURE__ */ jsxs(
+                          motion.div,
+                          {
+                            className: clsx(
+                              "es:absolute es:bottom-12 es:w-fit es:min-w-5 es:h-6 es:text-nowrap es:-translate-x-1/2",
+                              "es:bg-surface-50/80 es:text-surface-700",
+                              "es:backdrop-blur-xs",
+                              "es:text-12 es:leading-none",
+                              "es:py-1 es:px-2 es:rounded-lg",
+                              "es:text-center",
+                              "es:line-clamp-1",
+                              "es:flex es:items-center es:justify-center es:gap-1",
+                              "es:shadow",
+                              showOuterAsGutter && "es:icon:size-2 es:icon:stroke-3"
+                            ),
+                            initial: { y: 2, opacity: 0, scale: 0.85 },
+                            animate: { y: 0, opacity: 1, scale: 1 },
+                            exit: { y: 2, opacity: 0, scale: 0.85 },
+                            children: [
+                              i === 0 && showOuterAsGutter && state.values[0] > 1 && sprintf(__("From %d", "eightshfit-ui-components"), state.values[i] - 1),
+                              i === 0 && showOuterAsGutter && state.values[0] === 1 && __("From start gutter", "eightshfit-ui-components"),
+                              i === 1 && showOuterAsGutter && state.values[1] < columns && sprintf(__("To %d", "eightshfit-ui-components"), state.values[i]),
+                              i === 1 && showOuterAsGutter && state.values[1] === columns && __("To end gutter", "eightshfit-ui-components"),
+                              !showOuterAsGutter && i === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                state.values[0] > 1 && sprintf(__("From %d", "eightshfit-ui-components"), state.values[i]),
+                                state.values[0] === 1 && __("From start", "eightshfit-ui-components")
+                              ] }),
+                              !showOuterAsGutter && i === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                state.values[1] < columns && sprintf(__("To %d", "eightshfit-ui-components"), state.values[i]),
+                                state.values[1] === columns && __("To end", "eightshfit-ui-components")
+                              ] })
+                            ]
+                          }
+                        ) })
+                      },
+                      i
+                    );
+                  })
                 ] });
               }
             }