@lumx/react 3.8.2-alpha.2 → 3.9.0

package/index.d.ts

@@ -2943,7 +2943,7 @@ declare const Uploader: Comp<UploaderProps>;
 /**
  * User block sizes.
  */
-type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
+type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;
 /**
  * Defines the props of the component.
  */

package/index.js

@@ -19,7 +19,6 @@ import pick from 'lodash/pick';
 import isInteger from 'lodash/isInteger';
 import throttle from 'lodash/throttle';
 import take from 'lodash/take';
-import uniqueId from 'lodash/uniqueId';
 import isObject from 'lodash/isObject';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
@@ -344,20 +343,6 @@ 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 mdiMagnifyMinusOutline='M15.5 14h-.79l-.28-.27A6.5 6.5 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7z';const mdiMagnifyPlusOutline='m15.5 14 5 5-1.5 1.5-5-5v-.79l-.27-.28A6.5 6.5 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3 6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-6 0C12 14 14 12 14 9.5S12 5 9.5 5 5 7 5 9.5 7 14 9.5 14m2.5-4h-2v2H9v-2H7V9h2V7h1v2h2z';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);
-
-function uid(len) {
-	var i=0, tmp=(len || 11);
-	if (!BUFFER || ((IDX + tmp) > SIZE*2)) {
-		for (BUFFER='',IDX=0; i < SIZE; i++) {
-			BUFFER += HEX[Math.random() * 256 | 0];
-		}
-	}
-
-	return BUFFER.substring(IDX, IDX++ + tmp);
-}
-
 /**
  * The prefix to use for the CSS classes.
  */
@@ -633,6 +618,20 @@ const getTypographyClassName = typography => {
   return `lumx-typography-${typography}`;
 };
 
+let i = 0;
+
+/**
+ * Generate a unique id (for use in a11y or other id based DOM linking).
+ *
+ * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
+ */
+function useId() {
+  return React.useMemo(() => {
+    i += 1;
+    return `:lumx${i}:`;
+  }, []);
+}
+
 const _excluded$1 = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
@@ -706,7 +705,8 @@ const AlertDialog = /*#__PURE__*/forwardRef((props, ref) => {
   } = CONFIG[kind] || {};
 
   // Define a unique ID to target title and description for aria attributes.
-  const uniqueId = React.useMemo(() => id || uid(), [id]);
+  const generatedId = useId();
+  const uniqueId = id || generatedId;
   const titleId = `${uniqueId}-title`;
   const descriptionId = `${uniqueId}-description`;
 
@@ -1654,7 +1654,8 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$b);
   const localInputRef = React.useRef(null);
-  const inputId = useMemo(() => id || `${CLASSNAME$8.toLowerCase()}-${uid()}`, [id]);
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
@@ -2299,6 +2300,14 @@ const getYearDisplayName = locale => {
   return label;
 };
 
+function formatDayNumber(locale, date) {
+  const formattedDate = date.toLocaleDateString(locale, {
+    day: 'numeric'
+  });
+  if (formattedDate.match(/\d/)) return formattedDate.replace(/\D*(\d+)\D*/g, '$1');
+  return formattedDate;
+}
+
 /**
  * Defines the props of the component.
  */
@@ -2463,9 +2472,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
         onClick: () => onChange(date)
       }, /*#__PURE__*/React.createElement("span", {
         "aria-hidden": true
-      }, date.toLocaleDateString(locale, {
-        day: 'numeric'
-      })), /*#__PURE__*/React.createElement("span", {
+      }, formatDayNumber(locale, date)), /*#__PURE__*/React.createElement("span", {
         className: "visually-hidden"
       }, date.toLocaleDateString(locale, {
         day: 'numeric',
@@ -9203,7 +9210,7 @@ const CONFIG$1 = {
     icon: mdiAlert
   },
   [Kind.info]: {
-    color: ColorPalette.dark,
+    color: ColorPalette.blue,
     icon: mdiInformation
   },
   [Kind.success]: {
@@ -9449,7 +9456,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
     forwardedProps = _objectWithoutProperties(props, _excluded$N);
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef(null);
-  const sectionId = useMemo(() => uniqueId('section'), []);
+  const sectionId = useId();
   const {
     orientation
   } = useContext(NavigationContext) || {};
@@ -9569,7 +9576,7 @@ const NOTIFICATION_CONFIGURATION = {
     icon: mdiAlert
   },
   info: {
-    color: 'dark',
+    color: 'blue',
     icon: mdiInformation
   },
   success: {
@@ -10093,9 +10100,8 @@ const useTabProviderContext = (type, originalId) => {
   const [state, dispatch] = context;
 
   // Current tab or tab panel id.
-  const id = useMemo(() => originalId || `${type}-${uid()}`,
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
+  const generatedId = useId();
+  const id = originalId || generatedId;
   useEffect(() => {
     // On mount: register tab or tab panel id.
     dispatch({
@@ -10563,7 +10569,8 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       inputProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$Z);
-  const inputId = useMemo(() => id || `${CLASSNAME$S.toLowerCase()}-${uid()}`, [id]);
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(value, name, event);
@@ -10728,7 +10735,8 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
       variant = DEFAULT_PROPS$H.variant
     } = _ref,
     forwardedProps = _objectWithoutProperties(_ref, _excluded$$);
-  const selectId = useMemo(() => id || `select-${uid()}`, [id]);
+  const generatedSelectId = useId();
+  const selectId = id || generatedSelectId;
   const anchorRef = useRef(null);
   const selectRef = useRef(null);
   const dropdownRef = useRef(null);
@@ -11155,7 +11163,7 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
   const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
-  const contentId = React.useMemo(uid, []);
+  const contentId = useId();
   const ariaProps = {};
   if (hasContent) {
     ariaProps['aria-expanded'] = !!showChildren;
@@ -11496,7 +11504,8 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$18);
-  const sliderId = useMemo(() => id || `slider-${uid()}`, [id]);
+  const generatedId = useId();
+  const sliderId = id || generatedId;
   const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
   const sliderRef = useRef(null);
 
@@ -11843,8 +11852,10 @@ const useSlideshowControls = _ref => {
     if (!onChange) return;
     onChange(currentIndex);
   }, [currentIndex, onChange]);
-  const slideshowId = useMemo(() => id || uniqueId('slideshow'), [id]);
-  const slideshowSlidesId = useMemo(() => slidesId || uniqueId('slideshow-slides'), [slidesId]);
+  const generatedSlideshowId = useId();
+  const slideshowId = id || generatedSlideshowId;
+  const generatedSlidesId = useId();
+  const slideshowSlidesId = slidesId || generatedSlidesId;
   const toggleAutoPlay = () => {
     if (isSlideshowAutoPlaying) {
       stopAutoPlay();
@@ -12547,7 +12558,8 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       inputProps = {}
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1e);
-  const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
@@ -13349,7 +13361,8 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       afterElement
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2$3);
-  const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+  const generatedTextFieldId = useId();
+  const textFieldId = id || generatedTextFieldId;
   /** Keep a clean local input ref to manage focus */
   const localInputRef = useRef(null);
   /** Merge prop input ref and local input ref */
@@ -13360,8 +13373,8 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
    * we want to first use the most important one, which is the errorId. That way, screen readers will read first
    * the error and then the helper
    */
-  const helperId = helper ? `text-field-helper-${uid()}` : undefined;
-  const errorId = error ? `text-field-error-${uid()}` : undefined;
+  const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;
+  const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
   const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
   const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   const [isFocus, setFocus] = useState(false);
@@ -14118,7 +14131,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
   if (!DOCUMENT || !label) {
     return /*#__PURE__*/React.createElement(TooltipContextProvider, null, children);
   }
-  const id = useMemo(() => `tooltip-${uid()}`, []);
+  const id = useId();
   const [popperElement, setPopperElement] = useState(null);
   const [anchorElement, setAnchorElement] = useState(null);
   const {
@@ -14227,7 +14240,8 @@ const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$1s);
   // Adjust to square aspect ratio when using circle variants.
   const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
-  const inputId = React.useMemo(() => (fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id) || uniqueId('uploader-input-'), [fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id]);
+  const generatedInputId = useId();
+  const inputId = (fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id) || generatedInputId;
   const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
   const wrapper = fileInputProps ? {
     Component: 'label',
@@ -14370,7 +14384,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return /*#__PURE__*/React.createElement(NameComponent, nProps, name);
   }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
-  const fieldsBlock = fields && componentSize !== Size.s && /*#__PURE__*/React.createElement("div", {
+  const fieldsBlock = fields && componentSize !== Size.s && componentSize !== Size.xs && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1j}__fields`
   }, fields.map((field, idx) => /*#__PURE__*/React.createElement("span", {
     key: idx,