@eightshift/ui-components 5.0.2 → 5.0.3

package/dist/components/repeater/repeater.js

@@ -38,6 +38,7 @@ const fixIds = (items, itemIdBase) => {
  * @param {JSX.Element} [props.addButton] - If provided, overrides the default add button. `(props: { addItem: (additional: Object<string, any>?) => void, disabled: Boolean }) => JSX.Element`.
  * @param {string} [props.className] - Classes to pass to the item wrapper.
  * @param {boolean} [props.noExpandAllButton] - If `true`, the "Expand all"/"Collapse all" button is not displayed.
+ * @param {boolean} [props.noDragToRemove] - If `true`, the "drag to remove" functionality will be disabled.
  * @param {JSX.Element|JSX.Element[]} [props.moreOptions] - Options to add in the "More options" menu.
  * @param {JSX.Element} [props.emptyState] - Allows overriding the default empty state.
  *
@@ -92,10 +93,12 @@ const Repeater = (props) => {
     className,
     emptyState,
     noExpandAllButton,
+    noDragToRemove,
     moreOptions,
     hidden
   } = props;
   const [allOpen, setAllOpen] = useState(false);
+  const [openItems, setOpenItems] = useState({});
   if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
     console.warn(__("Repeater: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
@@ -168,7 +171,7 @@ const Repeater = (props) => {
         /* @__PURE__ */ jsx(
           List,
           {
-            values: items,
+            values: items.map((item) => ({ ...item, disabled: openItems[item.id] })),
             onChange: ({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)),
             renderList: ({ children: children2, props: props2 }) => {
               const { key, ...rest } = props2;
@@ -214,7 +217,9 @@ const Repeater = (props) => {
                         canDelete,
                         canAdd,
                         allOpen,
-                        setAllOpen
+                        setAllOpen,
+                        setOpenItems,
+                        isItemOpen: openItems[item.id] ?? allOpen
                       },
                       children: children({
                         ...item,
@@ -236,7 +241,7 @@ const Repeater = (props) => {
                 (item == null ? void 0 : item.id) ?? key
               );
             },
-            removableByMove: true
+            removableByMove: !noDragToRemove
           }
         ),
         /* @__PURE__ */ jsxs(AnimatedVisibility, { visible: items.length < 1, children: [

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

@@ -143,6 +143,7 @@ const AsyncMultiSelect = (props) => {
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
                 ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
               },
+              menuPlacement: "auto",
               menuPortalTarget: document.body,
               ...additionalProps
             }

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

@@ -125,6 +125,7 @@ const AsyncSelect = (props) => {
             DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
             ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
           },
+          menuPlacement: "auto",
           menuPortalTarget: document.body,
           ...additionalProps
         }

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

@@ -137,6 +137,7 @@ const MultiSelect = (props) => {
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
                 ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
               },
+              menuPlacement: "auto",
               menuPortalTarget: document.body,
               ...additionalProps
             }

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

@@ -119,6 +119,7 @@ const Select = (props) => {
             DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
             ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
           },
+          menuPlacement: "auto",
           menuPortalTarget: document.body,
           ...additionalProps
         }

package/dist/components/select/styles.js

@@ -1,6 +1,6 @@
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 const controlStyles = {
-  base: "es:border es:border-gray-300 es:rounded-lg es:bg-white es:text-sm es:transition es:group es:shadow-xs es:min-h-10! es:inset-ring es:inset-ring-secondary-100",
+  base: "es:border es:border-gray-300 es:rounded-10 es:bg-white es:text-sm es:transition es:group es:shadow-sm es:min-h-10! es:inset-ring es:inset-ring-secondary-100",
   focus: "es:ring-2 es:ring-accent-500/50 es:border-accent-500!"
 };
 const placeholderStyles = "es:text-gray-400 es:ml-1";

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

@@ -171,7 +171,7 @@ const __ExperimentalAsyncSelect = (props) => {
               {
                 className: clsx(
                   "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                  "es:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
+                  "es:h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
                   "es:any-focus:outline-hidden",
                   !inline && "es:w-full",
                   disabled && "es:select-none",

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

@@ -873,7 +873,7 @@ const __ExperimentalSelect = (props) => {
               {
                 className: clsx(
                   "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                  "es:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
+                  "es:h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
                   "es:any-focus:outline-hidden",
                   !inline && "es:w-full",
                   disabled && "es:select-none",

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

@@ -101,7 +101,7 @@ const ColumnConfigSlider = (props) => {
                     {
                       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-xs"
+                        disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-sm"
                       )
                     }
                   ),

package/dist/components/slider/slider.js

@@ -194,7 +194,7 @@ const Slider = (props) => {
                       "es:relative es:col-start-1 es:row-start-1 es:rounded-full es:border",
                       !vertical && "es:h-1.5 es:w-full es:self-center",
                       vertical && "es:h-full es:w-1.5 es:flex-col es:justify-self-center",
-                      disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-xs"
+                      disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-sm"
                     ),
                     style: trackStyle
                   }

package/dist/components/tabs/tabs.js

@@ -601,10 +601,10 @@ const Tab = (props) => {
       variants: {
         type: {
           underline: "es:disabled:text-secondary-400 es:selected:text-accent-950",
-          pill: "es:font-[450] es:border es:border-transparent es:px-3 es:py-2 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-accent-400/15 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillInverse: "es:font-[450] es:border es:border-transparent es:px-3 es:py-2 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-accent-600 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillCompact: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-accent-400/15 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
-          pillCompactInverse: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-1.5 es:py-1 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-accent-600 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75"
+          pill: "es:font-[450] es:border es:border-transparent es:px-3 es:py-1.5 es:rounded-xl es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-gradient-to-br es:selected:from-accent-300/10 es:selected:to-accent-400/20 es:selected:border-accent-400/10 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
+          pillInverse: "es:font-[450] es:border es:border-transparent es:px-3 es:py-1.5 es:rounded-xl es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-accent-600 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
+          pillCompact: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-2.5 es:py-1 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-gradient-to-br es:selected:from-accent-300/10 es:selected:to-accent-400/20 es:selected:border-accent-400/10 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
+          pillCompactInverse: "es:icon:size-4 es:font-[450] es:border es:border-transparent es:px-2.5 es:py-1 es:rounded-10 es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-gradient-to-br es:selected:from-accent-500 es:selected:to-accent-600 es:selected:border-accent-600 es:has-icon:pl-1 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75"
         }
       },
       compoundVariants: [
@@ -615,7 +615,7 @@ const Tab = (props) => {
             "es:px-2 es:py-2.5 es:rounded-lg",
             'es:after:content-[""] es:after:absolute es:after:bottom-px es:after:left-0 es:after:right-0 es:after:w-5/6 es:after:mx-auto es:after:h-0.75',
             "es:after:bg-linear-to-b es:hover:not-selected:not-disabled:after:from-secondary-200 es:hover:not-selected:not-disabled:after:to-secondary-300 es:selected:after:from-accent-500 es:selected:after:to-accent-600",
-            "es:after:rounded-t-full es:selected:after:shadow-xs es:selected:after:shadow-accent-700/30 es:after:transition"
+            "es:after:rounded-t-full es:selected:after:shadow-sm es:selected:after:shadow-accent-700/30 es:after:transition"
           ]
         },
         {
@@ -625,7 +625,7 @@ const Tab = (props) => {
             "es:pl-3 es:pr-2 es:py-2.5 es:rounded-lg es:selected:bg-accent-50/50 es:selected:text-accent-950 es:transition",
             'es:after:content-[""] es:after:absolute es:after:-left-0 es:after:top-0 es:after:bottom-0 es:after:h-5/6 es:after:my-auto es:after:w-1',
             "es:after:bg-linear-to-r es:hover:not-selected:not-disabled:after:from-secondary-200 es:hover:not-selected:not-disabled:after:to-secondary-300 es:selected:after:from-accent-500 es:selected:after:to-accent-600",
-            "es:after:rounded-full es:selected:after:shadow-xs es:selected:after:shadow-accent-700/30 es:after:transition"
+            "es:after:rounded-full es:selected:after:shadow-sm es:selected:after:shadow-accent-700/30 es:after:transition"
           ]
         }
       ]

package/dist/components/toggle/switch.js

@@ -128,7 +128,7 @@ const Switch2 = (props) => {
               !checked && !disabled && "es:border-secondary-400 es:inset-ring-secondary-100 es:from-white es:to-secondary-100",
               checked && !disabled && "es:border-accent-700/75 es:inset-ring-accent-500 es:to-accent-500 es:from-accent-600 es:shadow-accent-600/30",
               disabled && "es:cursor-default es:border-secondary-300 es:from-white es:to-secondary-50 es:inset-ring-secondary-200/30 es:inset-shadow-secondary-100",
-              !disabled && "es:shadow-xs"
+              !disabled && "es:shadow-sm"
             ),
             children: /* @__PURE__ */ jsx(
               "span",
@@ -139,7 +139,7 @@ const Switch2 = (props) => {
                   !checked && "es:scale-95",
                   !checked && !disabled && "es:border-secondary-500 es:from-secondary-500 es:to-secondary-600",
                   checked && "es:translate-x-4",
-                  checked && !disabled && "es:border-accent-600/20 es:from-white es:to-accent-500/30 es:from-40% es:bg-white es:shadow-xs es:shadow-accent-900/60",
+                  checked && !disabled && "es:border-accent-600/20 es:from-white es:to-accent-500/30 es:from-40% es:bg-white es:shadow-sm es:shadow-accent-900/60",
                   disabled && "es:border-secondary-400 es:bg-secondary-100",
                   isIndeterminate && "es:translate-x-2 es:scale-100"
                 )

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

@@ -102,8 +102,8 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
  * @component
  * @param {Object} props - Component props.
  * @param {JSX.Element} [props.icon] - Icon to display within the button.
- * @param {ButtonSize} [props.size='default'] - The size of the button.
- * @param {ButtonType} [props.type='default'] - The type of the button.
+ * @param {ToggleButtonSize} [props.size='default'] - The size of the button.
+ * @param {ToggleButtonType} [props.type='default'] - The type of the button.
  * @param {boolean} [props.disabled] - If `true`, the button is disabled.
  * @param {string} [props.className] - Classes to pass to the button.
  * @param {string|boolean} [props.tooltip] - Tooltip text to display on hover.
@@ -113,10 +113,10 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
  * @param {Object} [props.tooltipProps] - Props to pass to the tooltip.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
- * @returns {JSX.Element} The Button component.
+ * @returns {JSX.Element} The ToggleButton component.
  *
- * @typedef {'small' | 'default' | 'large'} ButtonSize
- * @typedef {'default' | 'selected' | 'ghost' | 'danger'} ButtonType
+ * @typedef {'small' | 'default' | 'large'} ToggleButtonSize
+ * @typedef {'default'| 'ghost'} ToggleButtonType
  *
  * @example
  * const [selected, setSelected] = useState(false);
@@ -167,6 +167,7 @@ const ToggleButton2 = (props) => {
       "es:btn-group-mid:rounded-none",
       "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
       "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
+      "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm",
       "es:cursor-pointer",
       icon && children ? "es:justify-start" : "es:justify-center",
       className
@@ -174,9 +175,9 @@ const ToggleButton2 = (props) => {
     {
       variants: {
         size: {
-          small: "es:icon:size-4.5 es:rounded-md",
-          default: "es:icon:size-5.5 es:rounded-lg",
-          large: "es:icon:size-6 es:rounded-lg"
+          small: "es:icon:size-4.5 es:rounded-7",
+          default: "es:icon:size-5.5 es:rounded-10",
+          large: "es:icon:size-6 es:rounded-xl"
         },
         type: {
           default: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
@@ -194,7 +195,7 @@ const ToggleButton2 = (props) => {
             "es:border-secondary-300",
             "es:inset-ring-secondary-100",
             "es:inset-shadow-secondary-100/50",
-            "es:shadow-xs",
+            "es:shadow-sm",
             "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
             "es:hover:text-accent-950",
             "es:focus-visible:text-accent-950"
@@ -213,7 +214,7 @@ const ToggleButton2 = (props) => {
             "es:focus-visible:border-accent-700",
             "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
             "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
-            "es:shadow-xs es:shadow-accent-600/30"
+            "es:shadow-sm es:shadow-accent-600/30"
           ]
         },
         {
@@ -224,7 +225,7 @@ const ToggleButton2 = (props) => {
           type: "ghost",
           disabled: false,
           selected: true,
-          class: ["es:bg-accent-600 es:text-white es:border-accent-600 es:shadow-xs es:shadow-accent-500/25", "es:hover:shadow-accent-600/50"]
+          class: ["es:bg-accent-600 es:text-white es:border-accent-600 es:shadow-sm es:shadow-accent-500/25", "es:hover:shadow-accent-600/50"]
         },
         // Sizes.
         {

package/package.json

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