@lumx/react 3.7.6-test.1 → 3.8.0

package/index.d.ts

@@ -394,8 +394,8 @@ interface CheckboxProps extends GenericProps, HasTheme {
     id?: string;
     /** Native input ref. */
     inputRef?: React.Ref<HTMLInputElement>;
-    /** Whether it is checked or not. */
-    isChecked?: boolean;
+    /** Whether it is checked or not or intermediate. */
+    isChecked?: boolean | 'intermediate';
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Label text. */
@@ -404,10 +404,10 @@ interface CheckboxProps extends GenericProps, HasTheme {
     name?: string;
     /** Native input value property. */
     value?: string;
-    /** On change callback. */
-    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
     /** optional props for input */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /** On change callback. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
 }
 /**
  * Checkbox component.
@@ -1301,6 +1301,8 @@ interface ThumbnailProps extends GenericProps, HasTheme {
     size?: ThumbnailSize;
     /** Image loading mode. */
     loading?: ImgHTMLProps['loading'];
+    /** Ref of an existing placeholder image to display while loading. */
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */

package/index.js

@@ -341,7 +341,7 @@ var classnames = createCommonjsModule(function (module) {
 }());
 });
 
-const mdiAlert='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';const mdiAlertCircle='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiArrowDown='M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z';const mdiArrowUp='M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z';const mdiCheck='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';const mdiCheckCircle='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z';const mdiChevronDown='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';const mdiChevronLeft='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z';const mdiChevronRight='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z';const mdiChevronUp='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';const mdiClose='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';const mdiCloseCircle='M12 2a10 10 0 1 1 0 20 10 10 0 1 1 0-20m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z';const mdiDragVertical='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';const mdiImageBroken='M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';const mdiInformation='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiMenuDown='m7 10 5 5 5-5z';const mdiPauseCircleOutline='M13 16V8h2v8zm-4 0V8h2v8zm3-14a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8';const mdiPlayCircleOutline='M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';const mdiRadioboxBlank='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiRadioboxMarked='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
+const mdiAlert='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';const mdiAlertCircle='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiArrowDown='M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z';const mdiArrowUp='M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z';const mdiCheck='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';const mdiCheckCircle='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z';const mdiChevronDown='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';const mdiChevronLeft='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z';const mdiChevronRight='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z';const mdiChevronUp='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';const mdiClose='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';const mdiCloseCircle='M12 2a10 10 0 1 1 0 20 10 10 0 1 1 0-20m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z';const mdiDragVertical='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';const mdiImageBroken='M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';const mdiInformation='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiMenuDown='m7 10 5 5 5-5z';const mdiMinus='M19 13H5v-2h14z';const mdiPauseCircleOutline='M13 16V8h2v8zm-4 0V8h2v8zm3-14a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8';const mdiPlayCircleOutline='M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';const mdiRadioboxBlank='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiRadioboxMarked='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
 
 var IDX=256, HEX=[], SIZE=256, BUFFER;
 while (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);
@@ -1589,6 +1589,11 @@ ButtonGroup.defaultProps = DEFAULT_PROPS$7;
 
 const _excluded$b = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
+/**
+ * Intermediate state of checkbox.
+ */
+const INTERMEDIATE_STATE = 'intermediate';
+
 /**
  * Defines the props of the component.
  */
@@ -1635,17 +1640,24 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       inputProps = {}
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$b);
+  const localInputRef = React.useRef(null);
   const inputId = useMemo(() => id || `${CLASSNAME$8.toLowerCase()}-${uid()}`, [id]);
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
     }
   };
+  const intermediateState = isChecked === INTERMEDIATE_STATE;
+  React.useEffect(() => {
+    const input = localInputRef.current;
+    if (input) input.indeterminate = intermediateState;
+  }, [intermediateState]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      isChecked,
+      // Whether state is intermediate class name will "-checked"
+      isChecked: intermediateState ? true : isChecked,
       isDisabled,
       isUnchecked: !isChecked,
       prefix: CLASSNAME$8,
@@ -1654,7 +1666,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__input-wrapper`
   }, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef,
+    ref: useMergeRefs(inputRef, localInputRef),
     type: "checkbox",
     id: inputId,
     className: `${CLASSNAME$8}__input-native`,
@@ -1664,7 +1676,8 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    "aria-describedby": helper ? `${inputId}-helper` : undefined
+    "aria-describedby": helper ? `${inputId}-helper` : undefined,
+    "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked)
   }, inputProps)), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__input-placeholder`
   }, /*#__PURE__*/React.createElement("div", {
@@ -1672,7 +1685,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__input-indicator`
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: mdiCheck
+    icon: intermediateState ? mdiMinus : mdiCheck
   })))), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__content`
   }, label && /*#__PURE__*/React.createElement(InputLabel, {
@@ -12872,7 +12885,7 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
   return style;
 };
 
-const _excluded$1m = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
+const _excluded$1m = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "loadingPlaceholderImageRef", "size", "theme", "variant", "linkProps", "linkAs"];
 
 /**
  * Defines the props of the component.
@@ -12905,6 +12918,7 @@ const DEFAULT_PROPS$$ = {
  * @return React element.
  */
 const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
+  var _loadingPlaceholderIm;
   const {
       align,
       alt,
@@ -12923,6 +12937,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading: isLoadingProp,
       objectFit,
       loading,
+      loadingPlaceholderImageRef,
       size,
       theme,
       variant,
@@ -12963,6 +12978,14 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     wrapperProps.type = forwardedProps.type || 'button';
     wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
   }
+
+  // If we have a loading placeholder image that is really loaded (complete)
+  const loadingPlaceholderImage = isLoading && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : (_loadingPlaceholderIm = loadingPlaceholderImageRef.current) === null || _loadingPlaceholderIm === void 0 ? void 0 : _loadingPlaceholderIm.complete) && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : loadingPlaceholderImageRef.current) || undefined;
+
+  // Set loading placeholder image as background
+  const loadingStyle = loadingPlaceholderImage ? {
+    backgroundImage: `url(${loadingPlaceholderImage.src})`
+  } : undefined;
   return /*#__PURE__*/React.createElement(Wrapper, _extends({}, wrapperProps, {
     ref: ref,
     className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
@@ -12982,9 +13005,16 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     }), fillHeight && `${CLASSNAME$1e}--fill-height`)
   }), /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1e}__background`
-  }, /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle),
-    ref: mergeRefs(setImgElement, propImgRef),
+  }, /*#__PURE__*/React.createElement("img", _extends({
+    // Use placeholder image size
+    width: loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalWidth,
+    height: loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalHeight
+  }, imgProps, {
+    style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+      // Reserve space while loading (when possible)
+      width: isLoading ? (imgProps === null || imgProps === void 0 ? void 0 : imgProps.width) || (loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalWidth) : undefined
+    }, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle), loadingStyle),
+    ref: useMergeRefs(setImgElement, propImgRef),
     className: classnames(handleBasicClasses({
       prefix: `${CLASSNAME$1e}__image`,
       isLoading,