@loadsmart/loadsmart-ui 8.0.6 → 8.0.7

package/dist/styles/typography.d.ts

@@ -20,5 +20,5 @@ export declare const typographyProperties: TypographyProperties;
  * @param variant Name of the variant
  * @param options Add boldness, italics and color
  */
-declare function typography<P>(variant?: TypographyVariants | ((props: P) => string), options?: TypographyOptions): FlattenInterpolation<ThemeProps<any>> | ((props: P) => FlattenInterpolation<ThemeProps<any>> | ((props: unknown) => FlattenInterpolation<ThemeProps<any>> | /*elided*/ any));
+declare function typography<P>(variant?: TypographyVariants | ((props: P) => string), options?: TypographyOptions): ((props: P) => FlattenInterpolation<ThemeProps<any>> | ((props: unknown) => FlattenInterpolation<ThemeProps<any>> | /*elided*/ any)) | FlattenInterpolation<ThemeProps<any>>;
 export default typography;

package/dist/testing/index.js

@@ -1,281 +1,380 @@
-import { queries, fireEvent, act, waitFor, createEvent, within, waitForElementToBeRemoved, render } from "@testing-library/react";
-import { t as toArray } from "../toArray-BJJzFRD1.js";
+import { alice } from "../themes.js";
+import { toArray } from "../toArray.js";
+import { DragDropFileContext } from "../DragDropFile.context.js";
+import React from "react";
 import { isFunction } from "@loadsmart/utils-function";
-import { a as alice } from "../miranda-compatibility.theme-CIu9fa89.js";
-import React__default from "react";
-import { D as DragDropFileContext } from "../DragDropFile.context-oKnUu6d3.js";
+import { act, createEvent, fireEvent, queries, render, waitFor, waitForElementToBeRemoved, within } from "@testing-library/react";
+//#region src/testing/DatePickerEvent/DatePickerEvent.ts
 function getContainerFromInput(input) {
-  return input.parentNode.parentNode.parentNode.parentNode;
+	return input.parentNode.parentNode.parentNode.parentNode;
 }
+/**
+* Expand the `DatePicker` calendar, if it not already expanded.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function expand$2(input) {
-  const datePickerContainer = getContainerFromInput(input);
-  if (queries.queryByRole(datePickerContainer, "menu")) {
-    return;
-  }
-  fireEvent.click(input);
-  await waitFor(() => {
-    expect(queries.getByRole(datePickerContainer, "menu")).toBeInTheDocument();
-  });
+	const datePickerContainer = getContainerFromInput(input);
+	if (queries.queryByRole(datePickerContainer, "menu")) return;
+	fireEvent.click(input);
+	await waitFor(() => {
+		expect(queries.getByRole(datePickerContainer, "menu")).toBeInTheDocument();
+	});
 }
+/**
+* Collapse the `DatePicker` calendar, if it not already collapsed.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function collapse$2(input) {
-  const datePickerContainer = getContainerFromInput(input);
-  if (!queries.queryByRole(datePickerContainer, "menu")) {
-    return;
-  }
-  fireEvent.click(queries.getByText(datePickerContainer, "Close"));
-  await waitFor(() => {
-    expect(queries.queryByRole(datePickerContainer, "menu")).not.toBeInTheDocument();
-  });
+	const datePickerContainer = getContainerFromInput(input);
+	if (!queries.queryByRole(datePickerContainer, "menu")) return;
+	fireEvent.click(queries.getByText(datePickerContainer, "Close"));
+	await waitFor(() => {
+		expect(queries.queryByRole(datePickerContainer, "menu")).not.toBeInTheDocument();
+	});
 }
+/**
+* Pick (select)  the provided day in the current month/year.
+* Notice that we programmatically expand the `DatePicker` calendar before picking the date.
+* @param day - Label for the day to be picked, formatted as mm/dd/yyyy.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function pick$1(day, input) {
-  const datePickerContainer = getContainerFromInput(input);
-  await expand$2(input);
-  act(() => {
-    input.focus();
-  });
-  const dayElement = queries.getByLabelText(datePickerContainer, day);
-  if (dayElement.getAttribute("aria-checked") == "false") {
-    fireEvent.click(dayElement);
-  }
-  await collapse$2(input);
+	const datePickerContainer = getContainerFromInput(input);
+	await expand$2(input);
+	act(() => {
+		input.focus();
+	});
+	const dayElement = queries.getByLabelText(datePickerContainer, day);
+	if (dayElement.getAttribute("aria-checked") == "false") fireEvent.click(dayElement);
+	await collapse$2(input);
 }
+/**
+* Clear the selection, if there are any options selected.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function clear$2(input) {
-  const datePickerContainer = getContainerFromInput(input);
-  const clearButton = queries.getByLabelText(datePickerContainer, "Clear selection");
-  fireEvent.click(clearButton);
-  await collapse$2(input);
+	const datePickerContainer = getContainerFromInput(input);
+	const clearButton = queries.getByLabelText(datePickerContainer, "Clear selection");
+	fireEvent.click(clearButton);
+	await collapse$2(input);
 }
+/**
+* Get options elements currently selected in the `DatePicker` calendar.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function getSelectedDates$1(input) {
-  const datePickerContainer = getContainerFromInput(input);
-  await expand$2(input);
-  const selectedDays = queries.queryAllByRole(datePickerContainer, "checkbox", {
-    checked: true
-  });
-  await collapse$2(input);
-  return selectedDays;
+	const datePickerContainer = getContainerFromInput(input);
+	await expand$2(input);
+	const selectedDays = queries.queryAllByRole(datePickerContainer, "checkbox", { checked: true });
+	await collapse$2(input);
+	return selectedDays;
 }
-const datePickerEvent = {
-  getContainer: getContainerFromInput,
-  expand: expand$2,
-  collapse: collapse$2,
-  pick: pick$1,
-  clear: clear$2,
-  getSelectedDates: getSelectedDates$1
+var datePickerEvent = {
+	getContainer: getContainerFromInput,
+	expand: expand$2,
+	collapse: collapse$2,
+	pick: pick$1,
+	clear: clear$2,
+	getSelectedDates: getSelectedDates$1
 };
+//#endregion
+//#region src/testing/DatePickerEvent/DateRangePickerEvent.ts
+/**
+* Expand the `DatePicker` calendar, if it not already expanded.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function expand$1(input) {
-  await datePickerEvent.expand(input);
+	await datePickerEvent.expand(input);
 }
+/**
+* Collapse the `DatePicker` calendar, if it not already collapsed.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function collapse$1(input) {
-  await datePickerEvent.collapse(input);
+	await datePickerEvent.collapse(input);
 }
+/**
+* Pick (select)  the provided day in the current month/year.
+* Notice that we programmatically expand the `DatePicker` calendar before picking the date.
+* @param day - Label for the day to be picked, formatted as mm/dd/yyyy.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function pick(range, input) {
-  const dateRangePickerContainer = datePickerEvent.getContainer(input);
-  await expand$1(input);
-  const [rangeStart, rangeEnd] = range;
-  if (rangeStart != null) {
-    const dateRangeStartInput = queries.getByTestId(dateRangePickerContainer, "input-date-range-start");
-    await datePickerEvent.pick(rangeStart, dateRangeStartInput);
-  }
-  if (rangeEnd != null) {
-    const dateRangeEndInput = queries.getByTestId(dateRangePickerContainer, "input-date-range-end");
-    await datePickerEvent.pick(rangeEnd, dateRangeEndInput);
-  }
-  await collapse$1(input);
+	const dateRangePickerContainer = datePickerEvent.getContainer(input);
+	await expand$1(input);
+	const [rangeStart, rangeEnd] = range;
+	if (rangeStart != null) {
+		const dateRangeStartInput = queries.getByTestId(dateRangePickerContainer, "input-date-range-start");
+		await datePickerEvent.pick(rangeStart, dateRangeStartInput);
+	}
+	if (rangeEnd != null) {
+		const dateRangeEndInput = queries.getByTestId(dateRangePickerContainer, "input-date-range-end");
+		await datePickerEvent.pick(rangeEnd, dateRangeEndInput);
+	}
+	await collapse$1(input);
 }
+/**
+* Clear the selection, if there are any options selected.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function clear$1(input) {
-  await datePickerEvent.clear(input);
+	await datePickerEvent.clear(input);
 }
+/**
+* Get options elements currently selected in the `DatePicker` calendar.
+* @param input - You can refer to this element by the label you applied to the `DatePicker`
+*/
 async function getSelectedDates(input) {
-  return datePickerEvent.getSelectedDates(input);
+	return datePickerEvent.getSelectedDates(input);
 }
-const dateRangePickerEvent = {
-  getContainer: datePickerEvent.getContainer,
-  expand: expand$1,
-  collapse: collapse$1,
-  pick,
-  clear: clear$1,
-  getSelectedDates
+var dateRangePickerEvent = {
+	getContainer: datePickerEvent.getContainer,
+	expand: expand$1,
+	collapse: collapse$1,
+	pick,
+	clear: clear$1,
+	getSelectedDates
 };
-const getDropZoneFromInput = (input) => input.parentNode;
-const dragOver = (input) => {
-  const dropzone = getDropZoneFromInput(input);
-  const dragOverEvent = createEvent.dragOver(dropzone);
-  fireEvent(dropzone, dragOverEvent);
+//#endregion
+//#region src/testing/DragDropFileEvent/DragDropFileEvent.ts
+/**
+* Get the input dropzone, which is the input parent (label).
+* @param input - You can refer to this element by the aria-label you provide to the DragDropFile component
+*/
+var getDropZoneFromInput = (input) => input.parentNode;
+/**
+* Simulates the onDragOver event on the drop zone.
+* @param input - You can refer to this element by the aria-label you provide to the DragDropFile component
+*/
+var dragOver = (input) => {
+	const dropzone = getDropZoneFromInput(input);
+	fireEvent(dropzone, createEvent.dragOver(dropzone));
 };
-const dragLeave = (input) => {
-  const dropzone = getDropZoneFromInput(input);
-  const dragLeaveEvent = createEvent.dragLeave(dropzone);
-  fireEvent(dropzone, dragLeaveEvent);
+/**
+* Simulates the onDragLeave event on the drop zone.
+* @param input - You can refer to this element by the aria-label you provide to the DragDropFile component
+*/
+var dragLeave = (input) => {
+	const dropzone = getDropZoneFromInput(input);
+	fireEvent(dropzone, createEvent.dragLeave(dropzone));
 };
-const dropFiles = (input, files) => {
-  const dropzone = getDropZoneFromInput(input);
-  const fileDropEvent = createEvent.drop(dropzone);
-  Object.defineProperty(fileDropEvent, "dataTransfer", {
-    value: {
-      files: toArray(files)
-    }
-  });
-  fireEvent(dropzone, fileDropEvent);
+/**
+* Simulates the onDrop event on the drop zone. You can provide a list of files or a single file.
+* @param input - You can refer to this element by the aria-label you provide to the DragDropFile component
+*/
+var dropFiles = (input, files) => {
+	const dropzone = getDropZoneFromInput(input);
+	const fileDropEvent = createEvent.drop(dropzone);
+	Object.defineProperty(fileDropEvent, "dataTransfer", { value: { files: toArray(files) } });
+	fireEvent(dropzone, fileDropEvent);
 };
-const DragDropFileEvent = {
-  dragOver,
-  dragLeave,
-  dropFiles
+var DragDropFileEvent = {
+	dragOver,
+	dragLeave,
+	dropFiles
 };
+//#endregion
+//#region src/testing/SelectEvent/SelectEvent.ts
 function getSelectContainer(input) {
-  return input.parentNode.parentNode.parentNode;
+	return input.parentNode.parentNode.parentNode;
 }
+/**
+* Please, make sure to call expand before trying to get the menu container
+*/
 function getSelectMenu(input) {
-  return input.parentNode.parentNode.nextSibling;
+	return input.parentNode.parentNode.nextSibling;
 }
 function getSelectTriggerHandle(input) {
-  return input.parentNode.nextSibling.nextSibling;
+	return input.parentNode.nextSibling.nextSibling;
 }
 function getSelectSearchContainer(input) {
-  return input.parentNode;
+	return input.parentNode;
 }
 function isSelectMenuExpanded(input) {
-  const selectContainer = getSelectContainer(input);
-  return selectContainer.children.length === 3;
+	/**
+	* Once the select is expanded, we have the following structure:
+	* +-------------+
+	* | Close button (visually hidden)
+	* +-------------+
+	* | DropdownTrigger
+	* +-------------+
+	* | Popover
+	* +-------------+
+	*
+	* This, if the container has 3 children, we assume the menu is expanded
+	*/
+	return getSelectContainer(input).children.length === 3;
 }
+/**
+* This is needed because some datasources might be asynchronous.
+* To ensure that the data they retrieve will be available, we wait for the
+* querying phase to finish.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function waitForPendingQuery(input) {
-  const searchContainer = getSelectSearchContainer(input);
-  if (!within(searchContainer).queryByTestId("select-trigger-loading")) {
-    return;
-  }
-  await waitForElementToBeRemoved(() => within(searchContainer).queryByTestId("select-trigger-loading"), {
-    timeout: 2500
-  });
+	const searchContainer = getSelectSearchContainer(input);
+	if (!within(searchContainer).queryByTestId("select-trigger-loading")) return;
+	await waitForElementToBeRemoved(() => within(searchContainer).queryByTestId("select-trigger-loading"), { timeout: 2500 });
 }
+/**
+* Expand the `Select` menu, if it not already expanded.
+* input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function expand(input) {
-  await waitForPendingQuery(input);
-  if (isSelectMenuExpanded(input)) {
-    return;
-  }
-  const triggerHandle = getSelectTriggerHandle(input);
-  await waitFor(() => {
-    expect(triggerHandle).toBeEnabled();
-  });
-  act(() => {
-    input.dispatchEvent(new MouseEvent("click", {
-      bubbles: true
-    }));
-  });
-  await waitFor(() => {
-    expect(within(getSelectContainer(input)).getByRole("listbox")).toBeInTheDocument();
-  });
+	await waitForPendingQuery(input);
+	if (isSelectMenuExpanded(input)) return;
+	const triggerHandle = getSelectTriggerHandle(input);
+	await waitFor(() => {
+		expect(triggerHandle).toBeEnabled();
+	});
+	/**
+	* Using act and a manually dispatched event so we can account for the
+	* state changes that happen when the search input is clicked.
+	* This is mainly related to the `handleEvent` from the `useClickOutside` hook.
+	*/
+	act(() => {
+		input.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+	});
+	await waitFor(() => {
+		expect(within(getSelectContainer(input)).getByRole("listbox")).toBeInTheDocument();
+	});
 }
+/**
+* Collapse the `Select` menu, if it not already collapsed.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function collapse(input) {
-  if (!isSelectMenuExpanded(input)) {
-    return;
-  }
-  const triggerHandle = getSelectTriggerHandle(input);
-  fireEvent.click(triggerHandle);
-  await waitFor(() => {
-    expect(within(getSelectContainer(input)).queryByRole("listbox")).not.toBeInTheDocument();
-  });
+	if (!isSelectMenuExpanded(input)) return;
+	const triggerHandle = getSelectTriggerHandle(input);
+	fireEvent.click(triggerHandle);
+	await waitFor(() => {
+		expect(within(getSelectContainer(input)).queryByRole("listbox")).not.toBeInTheDocument();
+	});
 }
+/**
+* Select the provided option(s), if they are present in the menu.
+* Notice that we programatically expand the `Select` menu before select the item
+* @param option - Label for the option to be selected.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function select(option, input) {
-  await expand(input);
-  const menuContainer = getSelectMenu(input);
-  const optionElement = await within(menuContainer).findByLabelText(option);
-  if (optionElement.getAttribute("aria-selected") == "false") {
-    fireEvent.mouseDown(optionElement);
-    act(() => {
-      optionElement.focus();
-    });
-    fireEvent.mouseUp(optionElement);
-    fireEvent.click(optionElement);
-  }
-  await collapse(input);
+	await expand(input);
+	const optionElement = await within(getSelectMenu(input)).findByLabelText(option);
+	if (optionElement.getAttribute("aria-selected") == "false") {
+		/**
+		* This is a replacement for the `userEvent.click`.
+		* We are adopting this approach to remove the peer dep to @testing-library/user-event for
+		* applications using this helper, so they are not tied to the same user-event as this library.
+		* It follows the same sequence of event stated in the documentation available at:
+		* https://testing-library.com/docs/guide-events/#interactions-vs-events
+		*/
+		fireEvent.mouseDown(optionElement);
+		act(() => {
+			optionElement.focus();
+		});
+		fireEvent.mouseUp(optionElement);
+		fireEvent.click(optionElement);
+	}
+	await collapse(input);
 }
+/**
+* Unselect the provided option(s), if they are present in the menu AND are selected.
+* Notice that we programatically expand the `Select` menu before select the item
+* @param option - Label for the option to be unselected.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function unselect(option, input) {
-  await expand(input);
-  const menuContainer = getSelectMenu(input);
-  const optionElement = await within(menuContainer).findByLabelText(option);
-  if (optionElement.getAttribute("aria-selected") === "true") {
-    fireEvent.click(optionElement);
-  }
-  await collapse(input);
+	await expand(input);
+	const optionElement = await within(getSelectMenu(input)).findByLabelText(option);
+	if (optionElement.getAttribute("aria-selected") === "true") fireEvent.click(optionElement);
+	await collapse(input);
 }
+/**
+* Clear the selection, if there are any options selected.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function clear(input) {
-  await waitForPendingQuery(input);
-  const searchContainer = getSelectSearchContainer(input);
-  const clearButton = within(searchContainer).getByTestId("select-trigger-clear");
-  fireEvent.click(clearButton);
+	await waitForPendingQuery(input);
+	const clearButton = within(getSelectSearchContainer(input)).getByTestId("select-trigger-clear");
+	fireEvent.click(clearButton);
 }
+/**
+* Perform search based on the given `query`. It will fail if the option is not found.
+* @param query - Search term.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function search(query, input) {
-  fireEvent.change(input, {
-    target: {
-      value: query
-    }
-  });
-  await waitForPendingQuery(input);
-  const menuContainer = getSelectMenu(input);
-  await within(menuContainer).findAllByRole("option");
+	fireEvent.change(input, { target: { value: query } });
+	await waitForPendingQuery(input);
+	await within(getSelectMenu(input)).findAllByRole("option");
 }
+/**
+* Get options elements currently available in the `Select` menu.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function getOptions(input) {
-  await expand(input);
-  const menuContainer = getSelectMenu(input);
-  const options = within(menuContainer).queryAllByRole("option");
-  await collapse(input);
-  return options;
+	await expand(input);
+	const options = within(getSelectMenu(input)).queryAllByRole("option");
+	await collapse(input);
+	return options;
 }
+/**
+* Get options elements currently selected in the `Select` menu.
+* @param input - You can refer to this element by the label you applied to the `Select`.
+*/
 async function getSelectedOptions(input) {
-  await expand(input);
-  const menuContainer = getSelectMenu(input);
-  let selectedOptions = [];
-  try {
-    selectedOptions = await within(menuContainer).findAllByRole("option", {
-      selected: true
-    });
-  } catch {
-    selectedOptions = [];
-  }
-  await collapse(input);
-  return selectedOptions;
+	await expand(input);
+	const menuContainer = getSelectMenu(input);
+	let selectedOptions = [];
+	try {
+		selectedOptions = await within(menuContainer).findAllByRole("option", { selected: true });
+	} catch {
+		selectedOptions = [];
+	}
+	await collapse(input);
+	return selectedOptions;
 }
-const selectEvent = {
-  select,
-  unselect,
-  clear,
-  search,
-  expand,
-  collapse,
-  getOptions,
-  getSelectedOptions,
-  isMenuExpanded: isSelectMenuExpanded
+var selectEvent = {
+	select,
+	unselect,
+	clear,
+	search,
+	expand,
+	collapse,
+	getOptions,
+	getSelectedOptions,
+	isMenuExpanded: isSelectMenuExpanded
 };
+//#endregion
+//#region src/testing/getInterpolatedStyles/getInterpolatedStyles.ts
+/**
+* Use this function to simulate the CSS that would be generated by styled-components
+* @param styles - A `css` reference with interpolated styles
+* @returns The final CSS
+*/
 function getInterpolatedStyles(styles) {
-  return toArray(styles).map((interpolation) => {
-    while (isFunction(interpolation)) {
-      interpolation = interpolation({
-        theme: alice
-      });
-    }
-    return interpolation;
-  }).join("");
+	return toArray(styles).map((interpolation) => {
+		while (isFunction(interpolation)) interpolation = interpolation({ theme: alice });
+		return interpolation;
+	}).join("");
 }
-const defaultContextValueMock = {
-  fileList: [],
-  onFilesAdded: jest.fn(),
-  onRetryUpload: jest.fn(),
-  onRemoveFile: jest.fn()
+//#endregion
+//#region src/testing/renderWithDragDropFileProvider/renderWithDragDropFileProvider.tsx
+var defaultContextValueMock = {
+	fileList: [],
+	onFilesAdded: jest.fn(),
+	onRetryUpload: jest.fn(),
+	onRemoveFile: jest.fn()
 };
-const renderWithDragDropFileProvider = (ui, customContext) => {
-  const contextValue = {
-    ...defaultContextValueMock,
-    ...customContext
-  };
-  const renderedUi = (children) => /* @__PURE__ */ React__default.createElement(DragDropFileContext.Provider, { value: contextValue }, children);
-  return render(renderedUi(ui));
+var renderWithDragDropFileProvider = (ui, customContext) => {
+	const contextValue = {
+		...defaultContextValueMock,
+		...customContext
+	};
+	const renderedUi = (children) => /* @__PURE__ */ React.createElement(DragDropFileContext.Provider, { value: contextValue }, children);
+	return render(renderedUi(ui));
 };
-export {
-  datePickerEvent as DatePickerEvent,
-  dateRangePickerEvent as DateRangePickerEvent,
-  DragDropFileEvent,
-  selectEvent as SelectEvent,
-  getInterpolatedStyles,
-  renderWithDragDropFileProvider
-};
-//# sourceMappingURL=index.js.map
+//#endregion
+export { datePickerEvent as DatePickerEvent, dateRangePickerEvent as DateRangePickerEvent, DragDropFileEvent, selectEvent as SelectEvent, getInterpolatedStyles, renderWithDragDropFileProvider };
+
+//# sourceMappingURL=index.js.map