@eightshift/ui-components 1.1.3 → 1.2.0

package/dist/components/responsive-preview/responsive-preview.js

@@ -36,19 +36,20 @@ const ResponsivePreview = (props) => {
   var _a, _b;
   const {
     value,
-    isDesktopFirst,
+    isDesktopFirst: rawIsDesktopFirst,
     breakpoints: rawBreakpoints,
     desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
     options,
     breakpointData,
     breakpointUiData
   } = props;
+  const isDesktopFirst = rawIsDesktopFirst ?? (value == null ? void 0 : value["_desktopFirst"]) ?? false;
   const breakpoints = rawBreakpoints;
   const desktopFirstBreakpoints = rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1);
   const firstMobileFirstOverride = breakpoints.find((breakpoint) => value == null ? void 0 : value[breakpoint]);
   const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value == null ? void 0 : value[breakpoint]);
   let previewItems = [];
-  if (firstMobileFirstOverride) {
+  if (firstMobileFirstOverride && !isDesktopFirst) {
     previewItems = [
       ...previewItems,
       {
@@ -71,7 +72,7 @@ const ResponsivePreview = (props) => {
       ];
     });
   }
-  if (lastDesktopFirstOverride) {
+  if (lastDesktopFirstOverride && isDesktopFirst) {
     desktopFirstBreakpoints.forEach((breakpoint) => {
       var _a2, _b2;
       if (typeof (value == null ? void 0 : value[breakpoint]) === "undefined") {
@@ -90,13 +91,12 @@ const ResponsivePreview = (props) => {
     previewItems = [
       ...previewItems,
       {
-        alignEnd: true,
         breakpoint: __("Default", "eightshift-ui-components"),
         value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value["_default"])
       }
     ];
   }
-  return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-min-w-72 es-uic-flex-col es-uic-items-start es-uic-gap-4 es-uic-p-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-min-w-72 es-uic-flex-col es-uic-items-start es-uic-gap-4 es-uic-p-2 es-uic-text-sm", children: [
     /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-2.5", children: [
       /* @__PURE__ */ jsx(
         RichLabel,

package/dist/components/select/async-multi-select.js

@@ -18,7 +18,7 @@ import { c as components } from "../../index-a301f526.esm-ByOfDxiG.js";
  * @param {string} [props.subtitle] - Subtitle of the component.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
  * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
- * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
  * @param {Function<Promise>} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, [metadata]: Array}[]>`.
  * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
  * @param {Function} props.onChange - Function to call when the value changes.

package/dist/components/select/async-single-select.js

@@ -15,8 +15,8 @@ import { c as components } from "../../index-a301f526.esm-ByOfDxiG.js";
  * @param {string} [props.subtitle] - Subtitle of the component.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
  * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
- * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
- * @param {Function<Promise>} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, metadata: Object<string, any>?}[]>`.
+ * @param {boolean|{label: string, value: string, metadata: Object<string, any>?}[]} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, fetching only happens when an user types to search.
+ * @param {Function} props.loadOptions - Async function that returns an array of `{label: '', value: ''}`-formatted items. `loadOptions(searchText: string): Promise<{label: string, value: string, metadata: Object<string, any>?}[]>`.
  * @param {{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
  * @param {Function} props.onChange - Function to call when the value changes.
  * @param {boolean} [props.clearable=false] - Whether the select is clearable.

package/dist/components/select/shared.js

@@ -29,6 +29,10 @@ const getValue = (simpleValue, value, options) => {
  * @preserve
  */
 const customOnChange = (simpleValue, newValue, onChange) => {
+  if (typeof newValue === "undefined" || newValue === null || newValue === "") {
+    onChange(void 0);
+    return;
+  }
   delete newValue.id;
   if (!simpleValue) {
     onChange(newValue);

package/dist/components/select/styles.js

@@ -1,21 +1,20 @@
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 const controlStyles = {
-  base: "es-uic-border es-uic-rounded-md es-uic-bg-white es-uic-text-sm es-uic-transition es-uic-group es-uic-shadow-sm !es-uic-min-h-10",
-  focus: "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50",
-  nonFocus: "es-uic-border-gray-300"
+  base: "es-uic-border es-uic-border-gray-300 es-uic-rounded-md es-uic-bg-white es-uic-text-sm es-uic-transition es-uic-group es-uic-shadow-sm !es-uic-min-h-10",
+  focus: "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50"
 };
 const placeholderStyles = "es-uic-text-gray-400 es-uic-ml-0.5";
 const selectInputStyles = "focus:es-uic-outline-none [&_input]:!es-uic-shadow-none [&_input:focus]:!es-uic-shadow-none";
 const valueContainerStyles = "es-uic-gap-1 es-uic-ml-1 es-uic-my-1 !es-uic-overflow-visible";
 const singleValueStyles = "es-uic-ml-0.5";
 const multiValueStyles = clsx(
-  "es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 es-uic-hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible",
+  "es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible",
   "[:focus-visible_&]:es-uic-outline-none [:focus-visible_&]:es-uic-ring",
   "[:focus-visible_&]:es-uic-ring-teal-500 [:focus-visible_&]:es-uic-ring-opacity-50"
 );
 const multiValueLabelStyles = "es-uic-select-none";
 const multiValueRemoveStyles = "hover:es-uic-bg-red-500/15 hover:es-uic-text-red-900 es-uic-text-gray-500 es-uic-rounded es-uic-p-0.5 [&>svg]:es-uic-size-3.5 [&>svg]:es-uic-stroke-[1.5] es-uic-transition";
-const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md es-uic-hover:bg-red-50 es-uic-hover:text-red-800 es-uic-transition";
+const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md hover:bg-red-50 hover:text-red-800 es-uic-transition";
 const dropdownIndicatorStyles = "es-uic-text-gray-500 es-uic-px-1 group-hover:es-uic-text-black [&>svg]:es-uic-transition-transform [&>svg]:es-uic-duration-500 [&>svg]:es-uic-size-5.5";
 const menuStyles = "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
 const optionStyles = {
@@ -25,10 +24,11 @@ const optionStyles = {
 };
 const noOptionsMessageStyles = "es-uic-text-gray-400 es-uic-p-4";
 const groupHeadingStyles = "es-uic-ml-3 es-uic-mt-2 es-uic-text-gray-500 es-uic-empty:hidden";
-const groupStyles = "es-uic-border-b last:es-uic-border-b-0";
+const groupStyles = "es-uic-border-b es-uic-border-b-gray-200 last:es-uic-border-b-0";
+const loadingMessageStyles = "es-uic-p-4";
 const eightshiftSelectClasses = {
   clearIndicator: () => clearIndicatorStyles,
-  control: ({ isFocused }) => clsx(isFocused ? controlStyles.focus : controlStyles.nonFocus, controlStyles.base),
+  control: ({ isFocused }) => clsx(isFocused && controlStyles.focus, controlStyles.base),
   dropdownIndicator: () => dropdownIndicatorStyles,
   group: () => groupStyles,
   groupHeading: () => groupHeadingStyles,
@@ -41,7 +41,8 @@ const eightshiftSelectClasses = {
   option: ({ isFocused, isSelected }) => clsx(isFocused && optionStyles.focus, isSelected && optionStyles.selected, optionStyles.base),
   placeholder: () => placeholderStyles,
   singleValue: () => singleValueStyles,
-  valueContainer: () => valueContainerStyles
+  valueContainer: () => valueContainerStyles,
+  loadingMessage: () => loadingMessageStyles
 };
 export {
   eightshiftSelectClasses

package/dist/components/slider/slider.js

@@ -101,10 +101,10 @@ const Slider = (props) => {
       step,
       isDisabled: disabled,
       orientation: vertical ? "vertical" : "horizontal",
-      className: "es-uic-w-full es-uic-pb-3.5",
+      className: clsx("es-uic-w-full", (markerEntries == null ? void 0 : markerEntries.some(([_, value2]) => (value2 == null ? void 0 : value2.length) > 0)) && "es-uic-pb-3.5"),
       onChangeEnd,
       ...other,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         BaseControl,
         {
           icon,
@@ -128,8 +128,7 @@ const Slider = (props) => {
           ] }),
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           className: labelClassName,
-          controlContainerClassName: clsx("es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0", vertical && "es-uic-flex-col"),
-          children: [
+          children: /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0", vertical && "es-uic-flex-col"), children: [
             before && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", children: before }),
             /* @__PURE__ */ jsx(
               $6f909507e6374d18$export$105594979f116971,
@@ -312,7 +311,7 @@ const Slider = (props) => {
               }
             ),
             after && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", children: after })
-          ]
+          ] })
         }
       )
     }

package/dist/components/tabs/tabs.js

@@ -468,7 +468,7 @@ const Tabs = (props) => {
         cloneElement(child, {
           id: `tab-${baseId}-${tabPanelCounter++}`,
           key: index,
-          className: clsx(child.props.className, vertical && "es-uic-border-l es-uic-border-l-300 es-uic-pl-3")
+          className: clsx(child.props.className, vertical && "es-uic-border-l es-uic-border-l-gray-300 es-uic-pl-3")
         })
       ];
     }

package/dist/components/toggle-button/toggle-button.js

@@ -6,7 +6,7 @@ import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-SPRI0-SN.js";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-BS4dllCW.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { T as Tooltip } from "../../tooltip-BRQ4tvZL.js";
+import { T as Tooltip } from "../../tooltip-Do_imFfg.js";
 function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
   const { isSelected } = state;
   const { isPressed, buttonProps } = $701a24aa0da5b062$export$ea18c227d4417cc3({

package/dist/components/tooltip/tooltip.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { D, T } from "../../tooltip-BRQ4tvZL.js";
+import { D, T } from "../../tooltip-Do_imFfg.js";
 import "../../lite-DVmmD_-j.js";
 import "react";
 import "../../focusSafely-BS4dllCW.js";

package/dist/index.js

@@ -1,7 +1,7 @@
 import { AnimatedVisibility } from "./components/animated-visibility/animated-visibility.js";
 import { BaseControl } from "./components/base-control/base-control.js";
 import { BreakpointPreview } from "./components/breakpoint-preview/breakpoint-preview.js";
-import { B, a } from "./button-CD8Q1eok.js";
+import { B, a } from "./button-MFj-FKsM.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
 import { ComponentToggle } from "./components/component-toggle/component-toggle.js";
 import { ContainerPanel } from "./components/container-panel/container-panel.js";
@@ -24,7 +24,7 @@ import { MediaPlaceholder } from "./components/placeholders/media-placeholder.js
 import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./components/menu/menu.js";
 import { Notice } from "./components/notice/notice.js";
 import { NumberPicker } from "./components/number-picker/number-picker.js";
-import { P, T } from "./popover-Dk2o4S7K.js";
+import { P, T } from "./popover-CdonDPqG.js";
 import { RadioButton, RadioButtonGroup } from "./components/radio/radio.js";
 import { Repeater } from "./components/repeater/repeater.js";
 import { RepeaterItem } from "./components/repeater/repeater-item.js";
@@ -45,7 +45,7 @@ import { Tab, TabList, TabPanel, Tabs } from "./components/tabs/tabs.js";
 import { Toggle } from "./components/toggle/toggle.js";
 import { Switch } from "./components/toggle/switch.js";
 import { ToggleButton } from "./components/toggle-button/toggle-button.js";
-import { D, T as T2 } from "./tooltip-BRQ4tvZL.js";
+import { D, T as T2 } from "./tooltip-Do_imFfg.js";
 import { VStack } from "./components/layout/vstack.js";
 import { getColumnConfigOutputText } from "./components/slider/utils.js";
 export {

package/dist/{popover-Dk2o4S7K.js → popover-CdonDPqG.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { l as $df56164dff5785e2$export$4338b53315abf666, d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, e as $bdb11010cef70236$export$f680877a34711e37, g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, n as $ff5963eb1fccf552$export$e08e3b67e392101e, o as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $bdb11010cef70236$export$b4cc09c592e8fdb8, a as $64fa3d84918910a7$export$29f1550f4b0d4415, q as $64fa3d84918910a7$export$45fda7c47f93fd48, t as $64fa3d84918910a7$export$94b6d0abf7d33e8c, r as $64fa3d84918910a7$export$6d3443f2c48bfc20, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, s as $64fa3d84918910a7$export$c62b8e45d58ddad9 } from "./utils-Dc35LwuT.js";
 import { d as $4e85f108e88277b8$export$d688439359537581 } from "./RSPContexts-CrNYmadY.js";
-import { b as $dd149f63282afbbf$export$f6211563215e3b37, c as $2a41e45df1593e64$export$d39e1813b3bdd0e1, a as $fc909762b330b746$export$61c6a8c84e605fb6, d as $44f671af83e7d9e0$export$2de4954e8ae13b9f } from "./tooltip-BRQ4tvZL.js";
+import { b as $dd149f63282afbbf$export$f6211563215e3b37, c as $2a41e45df1593e64$export$d39e1813b3bdd0e1, a as $fc909762b330b746$export$61c6a8c84e605fb6, d as $44f671af83e7d9e0$export$2de4954e8ae13b9f } from "./tooltip-Do_imFfg.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.js";
 import React__default, { useRef, useContext, useEffect, useMemo, createContext, useState, forwardRef } from "react";
 import { $ as $62d8ded9296f3872$export$cfa2225e87938781, a as $5e3802645cc19319$export$1c3ebcada18427bf } from "./ariaHideOutside-Zn64-frS.js";
@@ -14,7 +14,7 @@ import { e as $ae1eeba8b9eafd08$export$5165eccb35aaadb5 } from "./usePress-CScNe
 import { $ as $dbSRa$reactdom } from "./index-CAPcSs9K.js";
 import { c as clsx } from "./lite-DVmmD_-j.js";
 import { _ as __ } from "./default-i18n-BqwLkgZv.js";
-import { B as Button } from "./button-CD8Q1eok.js";
+import { B as Button } from "./button-MFj-FKsM.js";
 const $f1ab8c75478c6f73$export$3351871ee4b288b8 = /* @__PURE__ */ React__default.forwardRef(({ children, ...props }, ref) => {
   let isRegistered = useRef(false);
   let prevContext = useContext($ae1eeba8b9eafd08$export$5165eccb35aaadb5);
@@ -958,6 +958,7 @@ const Popover = (props) => {
  * @param {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
  * @param {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
  * @param {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The TriggeredPopover component.
  *
@@ -985,8 +986,12 @@ const TriggeredPopover = (props) => {
     offset,
     crossOffset,
     containerPadding,
+    hidden,
     ...rest
   } = props;
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { onOpenChange, children: [
     trigger,
     !trigger && /* @__PURE__ */ jsx(

package/dist/{tooltip-BRQ4tvZL.js → tooltip-Do_imFfg.js}

@@ -933,9 +933,9 @@ const Tooltip = (props) => {
             crossOffset,
             className: ({ isEntering, isExiting }) => clsx(
               "es-uic-group",
-              "es-uic-z-20 es-uic-select-none es-uic-rounded-md es-uic-border es-uic-px-1.5 es-uic-py-0.5 es-uic-text-sm es-uic-shadow es-uic-backdrop-blur-xl es-uic-will-change-[transform,opacity] es-uic-fill-mode-forwards",
-              theme === "light" && "es-uic-border-gray-200 es-uic-bg-white/60 es-uic-text-gray-700",
-              theme === "dark" && "es-uic-border-gray-600 es-uic-bg-black/60 es-uic-text-gray-100",
+              "es-uic-z-20 es-uic-select-none es-uic-rounded-md es-uic-border es-uic-px-1.5 es-uic-py-0.5 es-uic-text-sm es-uic-shadow es-uic-backdrop-blur-3xl es-uic-will-change-[transform,opacity] es-uic-fill-mode-forwards",
+              theme === "light" && "es-uic-border-gray-200 es-uic-bg-white/90 es-uic-text-gray-700",
+              theme === "dark" && "es-uic-border-gray-600 es-uic-bg-black/80 es-uic-text-gray-100",
               isEntering && "es-uic-duration-300 es-uic-ease-out es-uic-animate-in es-uic-fade-in",
               isEntering && "placement-left:es-uic-slide-in-from-right-0.5 placement-right:es-uic-slide-in-from-left-0.5 placement-top:es-uic-slide-in-from-bottom-0.5 placement-bottom:es-uic-slide-in-from-top-0.5",
               isExiting && "es-uic-duration-150 es-uic-ease-in es-uic-animate-out es-uic-fade-out",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightshift/ui-components",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",