@eightshift/ui-components 1.4.3 → 1.4.5

package/dist/assets/wp-ui-enhancements.css

@@ -1 +1 @@
-.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{padding:.25rem!important;position:static!important}.components-dropdown.block-editor-inserter{width:-moz-fit-content!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}.edit-post-header__toolbar .components-button{min-height:2.25rem!important}.edit-post-header__toolbar .components-button{min-width:2.25rem!important}.editor-styles-wrapper .wp-block:not(:-webkit-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:-moz-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:is(.editor-post-title,.block-list-appender)){max-width:100%!important}.components-tooltip{--tw-border-opacity:1;border-width:1px;border-color:rgb(31 41 55/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);--tw-backdrop-brightness:brightness(1.05);--tw-backdrop-saturate:saturate(1.5);-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);background-color:#030712b3;padding:.125rem .25rem;border-radius:.375rem!important}.components-tooltip:has(>:first-child){--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity));background-color:#fffc}
+.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.editor-document-tools__left .components-button,.editor-header__center .components-button,.editor-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button,.edit-post-text-editor__toolbar .components-button,.edit-post-text-editor__body .components-textarea-control__input,.media-modal-content,.media-modal-content .components-button,.components-guide__container .components-button,.components-notice__content .components-button,.editor-post-featured-image__toggle.components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content,.components-guide{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.media-menu-item.active{border-top-left-radius:.375rem!important;border-top-right-radius:.375rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar,.interface-interface-skeleton__sidebar:not(:empty)>.interface-complementary-area__fill[style="width: 280px;"],.interface-complementary-area.editor-sidebar{width:20rem!important}.block-list-appender.wp-block{padding:.25rem!important;position:static!important}.components-dropdown.block-editor-inserter{width:-moz-fit-content!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}:is(.edit-post-header__toolbar,.edit-post-header__settings,.editor-document-tools__left,.editor-header__center,.editor-header__settings) .components-button{min-height:2.25rem!important}:is(.edit-post-header__toolbar,.edit-post-header__settings,.editor-document-tools__left,.editor-header__center,.editor-header__settings) .components-button{min-width:2.25rem!important}.editor-styles-wrapper .wp-block:not(:-webkit-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:-moz-any(.editor-post-title,.block-list-appender)){max-width:100%!important}.editor-styles-wrapper .wp-block:not(:is(.editor-post-title,.block-list-appender)){max-width:100%!important}.components-tooltip{--tw-border-opacity:1;border-width:1px;border-color:rgb(31 41 55/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-backdrop-blur:blur(24px);--tw-backdrop-brightness:brightness(1.05);--tw-backdrop-saturate:saturate(1.5);-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);background-color:#030712b3;padding:.125rem .25rem;border-radius:.375rem!important}.components-tooltip:has(>:first-child){--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity));background-color:#fffc}

package/dist/components/button/button.js

@@ -93,7 +93,7 @@ const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef($13
  * @param {ButtonType} [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} [props.tooltip] - Tooltip text to display on hover.
+ * @param {string|boolean} [props.tooltip] - Tooltip text to display on hover. If set to `true` and an `aria-label` is not provided, the tooltip text will be used as the `aria-label`.
  * @param {Function} [props.onPress] - Function to run when the button is pressed.
  * @param {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
  * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
@@ -121,7 +121,7 @@ const Button = (props) => {
     type = "default",
     disabled,
     className,
-    tooltip,
+    tooltip: rawTooltip,
     onPress,
     forwardedRef,
     wrapperClassName,
@@ -130,6 +130,10 @@ const Button = (props) => {
     hidden,
     ...other
   } = props;
+  let tooltip = rawTooltip;
+  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
+    tooltip = ariaLabel;
+  }
   const objRef = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
   if (hidden) {
     return null;

package/dist/components/input-field/input-field.js

@@ -143,6 +143,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @param {boolean} [props.disabled] - If `true`, the input is disabled.
  * @param {boolean} [props.readOnly] - If `true`, the input is read-only.
  * @param {string} [props.className] - Classes to pass to the input field.
+ * @param {string} [props.wrapperClassName] - Classes to pass to the input field wrapping element.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The InputField component.
@@ -159,7 +160,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bc
  * @preserve
  */
 const InputField = (props) => {
-  const { icon, label, subtitle, help, actions, value, onChange, type = "text", disabled, readOnly, className, hidden, ...other } = props;
+  const { icon, label, subtitle, help, actions, value, onChange, type = "text", disabled, readOnly, className, wrapperClassName, hidden, ...other } = props;
   if (hidden) {
     return null;
   }
@@ -170,6 +171,7 @@ const InputField = (props) => {
       onChange,
       isDisabled: disabled,
       isReadOnly: readOnly,
+      className: wrapperClassName,
       ...other,
       children: /* @__PURE__ */ jsxs(
         BaseControl,

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

@@ -31,7 +31,7 @@ import { _ as __ } from "../../default-i18n-BqWys-1G.js";
  * @param {Object} [props.itemProps] - Props to pass to each item.
  * @param {boolean} [props.noTriggerLabel] - Whether the trigger label should be hidden. Applies only to the `menu` type.
  * @param {boolean} [props.noTriggerIcon] - Whether the trigger icon should be hidden. Applies only to the `menu` type.
- * @param {string} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip. Applies only to the `menu` type.
+ * @param {string|boolean} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip. Applies only to the `menu` type. If `true` is set and an `aria-label` is provided, the tooltip will show the same text as the `aria-label`.
  * @param {boolean} [props.noItemLabel] - Whether the option label should be hidden.
  * @param {boolean} [props.noItemIcon] - Whether the option icon should be hidden.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
@@ -75,16 +75,21 @@ const OptionSelect = (props) => {
     itemProps,
     noTriggerLabel,
     noTriggerIcon,
-    tooltip,
+    tooltip: rawTooltip,
     noItemLabel,
     noItemIcon,
     children,
     hidden,
+    "aria-label": ariaLabel,
     ...rest
   } = props;
   if (hidden) {
     return null;
   }
+  let tooltip = rawTooltip;
+  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
+    tooltip = ariaLabel;
+  }
   const currentItem = options == null ? void 0 : options.find(({ value: optionValue }) => optionValue === value);
   const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es-uic-leading-3 es-uic-opacity-50", children: __("Not set", "eightshift-ui-components") });
   return /* @__PURE__ */ jsxs(
@@ -103,7 +108,7 @@ const OptionSelect = (props) => {
           ButtonGroup,
           {
             vertical,
-            "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
+            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
             ...wrapperProps,
             children: options.map(
               ({
@@ -151,7 +156,7 @@ const OptionSelect = (props) => {
             orientation: vertical ? "vertical" : "horizontal",
             onChange: (v) => onChange(v),
             design: type === "radios" ? "default" : "segmented",
-            "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"],
+            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
             value,
             ...wrapperProps,
             children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => {
@@ -189,7 +194,7 @@ const OptionSelect = (props) => {
             ) : tooltip,
             triggerProps: {
               ...wrapperProps == null ? void 0 : wrapperProps.triggerProps,
-              "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"]
+              "aria-label": typeof label !== "undefined" ? null : ariaLabel
             },
             keepOpen: true,
             ...wrapperProps,

package/dist/components/repeater/repeater.js

@@ -5174,7 +5174,8 @@ const Repeater = (props) => {
               if (event.canceled) {
                 return;
               }
-              onChange(move([...items], source, target));
+              setItems((items2) => move(items2, source, target));
+              onChange(items);
             },
             children: items.map((item, index) => /* @__PURE__ */ jsx(
               SortableItem,
@@ -5191,6 +5192,7 @@ const Repeater = (props) => {
                       index,
                       canDelete,
                       deleteItem: () => {
+                        setItems([...items].filter((i2) => i2.id !== item.id));
                         onChange([...items].filter((i2) => i2.id !== item.id));
                         if (onAfterItemRemove) {
                           onAfterItemRemove(item);
@@ -5219,9 +5221,11 @@ const Repeater = (props) => {
                         updateData: (newValue) => {
                           const updated = [...items].map((i2) => i2.id === item.id ? { ...i2, ...newValue } : i2);
                           onChange(updated);
+                          setItems(updated);
                         },
                         itemIndex: index,
                         deleteItem: () => {
+                          setItems([...items].filter((i2) => i2.id !== item.id));
                           onChange([...items].filter((i2) => i2.id !== item.id));
                           if (onAfterItemRemove) {
                             onAfterItemRemove(item);

package/package.json

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

package/dist/hooks/use-cell-edit-mode.js

@@ -1,35 +0,0 @@
-import { useRef, useEffect } from "react";
-function useCellEditMode() {
-  const isFocusedRef = useRef(false);
-  const isEditModeRef = useRef(false);
-  useEffect(() => {
-    const handler = (e) => {
-      if (isFocusedRef.current) {
-        if (e.code === "Enter") {
-          isEditModeRef.current = true;
-        } else if (e.code === "Escape" || e.code === "Tab") {
-          isEditModeRef.current = false;
-        }
-        if (isEditModeRef.current) {
-          e.stopPropagation();
-        }
-      }
-    };
-    window.addEventListener("keydown", handler, true);
-    return () => {
-      window.removeEventListener("keydown", handler, true);
-    };
-  }, []);
-  const setFocus = (should) => isFocusedRef.current = should;
-  const preventProps = {
-    onFocus: () => setFocus(true),
-    onBlur: () => setFocus(false),
-    onClick: () => {
-      isEditModeRef.current = true;
-    }
-  };
-  return preventProps;
-}
-export {
-  useCellEditMode
-};