@loadsmart/loadsmart-ui 7.3.2 → 7.4.0

package/dist/testing/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/testing/DatePickerEvent/DatePickerEvent.ts","../../src/testing/DatePickerEvent/DateRangePickerEvent.ts","../../src/testing/DragDropFileEvent/DragDropFileEvent.ts","../../src/testing/SelectEvent/SelectEvent.ts","../../src/testing/renderWithDragDropFileProvider/renderWithDragDropFileProvider.tsx","../../src/testing/getInterpolatedStyles/getInterpolatedStyles.ts"],"sourcesContent":["/* eslint-disable */\nimport { act, queries, fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react'\n// find the date picker container from its input field 🤷\nfunction getContainerFromInput(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  // if menu is rendered, then the select is already expanded\n  if (queries.queryByRole(datePickerContainer, 'menu')) {\n    return\n  }\n\n  fireEvent.click(input)\n\n  await waitFor(() => {\n    expect(queries.getByRole(datePickerContainer, 'menu')).toBeInTheDocument()\n  })\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  // if menu is not rendered, then the select is already collapsed\n  if (!queries.queryByRole(datePickerContainer, 'menu')) {\n    return\n  }\n\n  fireEvent.click(queries.getByText(datePickerContainer, 'Close'))\n\n  await waitFor(() => {\n    expect(queries.queryByRole(datePickerContainer, 'menu')).not.toBeInTheDocument()\n  })\n}\n\n/**\n * Pick (select)  the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(day: string, input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  await expand(input)\n\n  act(() => {\n    input.focus()\n  })\n\n  const dayElement = queries.getByLabelText(datePickerContainer, day)\n\n  if (dayElement && dayElement.getAttribute('aria-checked') == 'false') {\n    fireEvent.click(dayElement)\n  }\n\n  await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  const clearButton = queries.getByLabelText(datePickerContainer, 'Clear selection')\n\n  fireEvent.click(clearButton)\n\n  await collapse(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  await expand(input)\n\n  const selectedDays: HTMLElement[] = queries.queryAllByRole(datePickerContainer, 'checkbox', {\n    checked: true,\n  })\n\n  await collapse(input)\n\n  return selectedDays\n}\n\nconst datePickerEvent = {\n  getContainer: getContainerFromInput,\n  expand,\n  collapse,\n  pick,\n  clear,\n  getSelectedDates,\n}\n\nexport default datePickerEvent\n","/* eslint-disable */\nimport { queries } from '@testing-library/react'\n\nimport DatePickerEvent from './DatePickerEvent'\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n  await DatePickerEvent.expand(input)\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n  await DatePickerEvent.collapse(input)\n}\n\n/**\n * Pick (select)  the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(range: [string | null, string | null], input: HTMLElement): Promise<void> {\n  const dateRangePickerContainer = DatePickerEvent.getContainer(input)\n\n  await expand(input)\n\n  const [rangeStart, rangeEnd] = range\n\n  if (rangeStart != null) {\n    const dateRangeStartInput = queries.getByTestId(\n      dateRangePickerContainer,\n      'input-date-range-start'\n    )\n\n    await DatePickerEvent.pick(rangeStart, dateRangeStartInput)\n  }\n\n  if (rangeEnd != null) {\n    const dateRangeEndInput = queries.getByTestId(dateRangePickerContainer, 'input-date-range-end')\n\n    await DatePickerEvent.pick(rangeEnd, dateRangeEndInput)\n  }\n\n  await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n  await DatePickerEvent.clear(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n  return DatePickerEvent.getSelectedDates(input)\n}\n\nexport const dateRangePickerEvent = {\n  getContainer: DatePickerEvent.getContainer,\n  expand,\n  collapse,\n  pick,\n  clear,\n  getSelectedDates,\n}\n\nexport default dateRangePickerEvent\n","import { createEvent, fireEvent } from '@testing-library/react'\n\nimport toArray from 'utils/toolset/toArray'\n\n/**\n * Get the input dropzone, which is the input parent (label).\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst getDropZoneFromInput = (input: HTMLInputElement): HTMLLabelElement =>\n  input.parentNode as HTMLLabelElement\n\n/**\n * Simulates the onDragOver event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragOver = (input: HTMLInputElement) => {\n  const dropzone = getDropZoneFromInput(input)\n\n  const dragOverEvent = createEvent.dragOver(dropzone)\n\n  fireEvent(dropzone, dragOverEvent)\n}\n\n/**\n * Simulates the onDragLeave event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragLeave = (input: HTMLInputElement) => {\n  const dropzone = getDropZoneFromInput(input)\n\n  const dragLeaveEvent = createEvent.dragLeave(dropzone)\n\n  fireEvent(dropzone, dragLeaveEvent)\n}\n\n/**\n * Simulates the onDrop event on the drop zone. You can provide a list of files or a single file.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dropFiles = (input: HTMLInputElement, files: File | File[]) => {\n  const dropzone = getDropZoneFromInput(input)\n\n  const fileDropEvent = createEvent.drop(dropzone)\n\n  Object.defineProperty(fileDropEvent, 'dataTransfer', { value: { files: toArray(files) } })\n\n  fireEvent(dropzone, fileDropEvent)\n}\n\nexport const DragDropFileEvent = {\n  dragOver,\n  dragLeave,\n  dropFiles,\n}\n\nexport default DragDropFileEvent\n","import { act, waitFor, within, waitForElementToBeRemoved, fireEvent } from '@testing-library/react'\n\n// based on https://github.com/romgain/react-select-event/blob/master/src/index.ts\n\n// find the select container from its input field 🤷\nfunction getSelectContainer(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Please, make sure to call expand before trying to get the menu container\n */\nfunction getSelectMenu(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.parentNode!.nextSibling as HTMLElement\n}\n\nfunction getSelectTriggerHandle(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.nextSibling!.nextSibling as HTMLElement\n}\n\nfunction getSelectSearchContainer(input: HTMLElement): HTMLElement {\n  return input.parentNode as HTMLElement\n}\n\nfunction isSelectMenuExpanded(input: HTMLElement): boolean {\n  const selectContainer = getSelectContainer(input)\n\n  /**\n   * Once the select is expanded, we have the following structure:\n   * +-------------+\n   * | Close button (visually hidden)\n   * +-------------+\n   * | DropdownTrigger\n   * +-------------+\n   * | Popover\n   * +-------------+\n   *\n   * This, if the container has 3 children, we assume the menu is expanded\n   */\n  return selectContainer.children.length === 3\n}\n\n/**\n * This is needed because some datasources might be asynchronous.\n * To ensure that the data they retrieve will be available, we wait for the\n * querying phase to finish.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n */\nasync function waitForPendingQuery(input: HTMLElement) {\n  const searchContainer = getSelectSearchContainer(input)\n\n  if (!within(searchContainer).queryByTestId('select-trigger-loading')) {\n    return\n  }\n\n  await waitForElementToBeRemoved(\n    () => within(searchContainer).queryByTestId('select-trigger-loading'),\n    { timeout: 2500 }\n  )\n}\n\n/**\n * Expand the `Select` menu, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n  await waitForPendingQuery(input)\n\n  if (isSelectMenuExpanded(input)) {\n    return\n  }\n\n  const triggerHandle = getSelectTriggerHandle(input)\n\n  await waitFor(() => {\n    expect(triggerHandle).toBeEnabled()\n  })\n\n  /**\n   * Using act and a manually dispatched event so we can account for the\n   * state changes that happen when the search input is clicked.\n   * This is mainly related to the `handleEvent` from the `useClickOutside` hook.\n   */\n  act(() => {\n    input.dispatchEvent(new MouseEvent('click', { bubbles: true }))\n  })\n\n  await waitFor(() => {\n    expect(within(getSelectContainer(input)).getByRole('listbox')).toBeInTheDocument()\n  })\n}\n\n/**\n * Collapse the `Select` menu, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n  if (!isSelectMenuExpanded(input)) {\n    return\n  }\n\n  const triggerHandle = getSelectTriggerHandle(input)\n\n  fireEvent.click(triggerHandle)\n\n  await waitFor(() => {\n    expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()\n  })\n}\n\n/**\n * Select the provided option(s), if they are present in the menu.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string | RegExp} option - Label for the option to be selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function select(option: string | RegExp, input: HTMLElement): Promise<void> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  const optionElement = await within(menuContainer).findByLabelText(option)\n\n  // click the option if exists; Select currently closes when an item is clicked.\n  if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {\n    /**\n     * This is a replacement for the `userEvent.click`.\n     * We are adopting this approach to remove the peer dep to @testing-library/user-event for\n     * applications using this helper, so they are not tied to the same user-event as this library.\n     * It follows the same sequence of event stated in the documentation available at:\n     * https://testing-library.com/docs/guide-events/#interactions-vs-events\n     */\n    fireEvent.mouseDown(optionElement)\n\n    act(() => {\n      optionElement.focus()\n    })\n\n    fireEvent.mouseUp(optionElement)\n    fireEvent.click(optionElement)\n  }\n\n  // we collapse in the case the option was not clicked\n  await collapse(input)\n}\n\n/**\n * Unselect the provided option(s), if they are present in the menu AND are selected.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string} option - Label for the option to be unselected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function unselect(option: string, input: HTMLElement): Promise<void> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  const optionElement = await within(menuContainer).findByLabelText(option)\n\n  // ensures that the option exists and IS selected\n  if (optionElement && optionElement.getAttribute('aria-selected') === 'true') {\n    fireEvent.click(optionElement)\n  }\n\n  // we collapse in the case the option was not clicked\n  await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n  await waitForPendingQuery(input)\n\n  const searchContainer = getSelectSearchContainer(input)\n\n  const clearButton = within(searchContainer).getByTestId('select-trigger-clear')\n\n  if (clearButton) {\n    fireEvent.click(clearButton)\n  }\n}\n\n/**\n * Perform search based on the given `query`. It will fail if the option is not found.\n * @param {string} query - Search term.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function search(query: string, input: HTMLElement): Promise<void> {\n  fireEvent.change(input, {\n    target: { value: query },\n  })\n\n  await waitForPendingQuery(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  await within(menuContainer).findAllByRole('option')\n}\n\n/**\n * Get options elements currently available in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getOptions(input: HTMLElement): Promise<HTMLElement[]> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  const options = within(menuContainer).queryAllByRole('option')\n\n  await collapse(input)\n\n  return options\n}\n\n/**\n * Get options elements currently selected in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n  let selectedOptions: HTMLElement[] = []\n\n  try {\n    selectedOptions = await within(menuContainer).findAllByRole('option', {\n      selected: true,\n    })\n  } catch (err) {\n    selectedOptions = []\n  }\n\n  await collapse(input)\n\n  return selectedOptions\n}\n\nexport const selectEvent = {\n  select,\n  unselect,\n  clear,\n  search,\n  expand,\n  collapse,\n  getOptions,\n  getSelectedOptions,\n  isMenuExpanded: isSelectMenuExpanded,\n}\n\nexport default selectEvent\n","import React, { ReactNode } from 'react'\nimport { render } from '@testing-library/react'\nimport type { RenderResult } from '@testing-library/react'\n\nimport type { DragDropFileContextValue } from '../../components/DragDropFile/types'\nimport { DragDropFileContext } from '../../components/DragDropFile/DragDropFile.context'\n\nconst defaultContextValueMock: DragDropFileContextValue = {\n  fileList: [],\n  onFilesAdded: jest.fn(),\n  onRetryUpload: jest.fn(),\n  onRemoveFile: jest.fn(),\n}\n\nconst renderWithDragDropFileProvider = (\n  ui: ReactNode,\n  customContext?: Partial<DragDropFileContextValue>\n): RenderResult => {\n  const contextValue = { ...defaultContextValueMock, ...customContext }\n\n  const renderedUi = (children: ReactNode) => (\n    <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>\n  )\n\n  return render(renderedUi(ui))\n}\n\nexport default renderWithDragDropFileProvider\n","import type { Interpolation, ThemeProps } from 'styled-components'\nimport { isFunction } from '@loadsmart/utils-function'\n\nimport { Alice } from '../../theming/themes'\nimport type { CustomTheme } from '../../theming'\nimport toArray from 'utils/toolset/toArray'\n\ntype ThemedInterpolation = Interpolation<ThemeProps<CustomTheme>>\n\n/**\n * Use this function to simulate the CSS that would be generated by styled-components\n * @param {Interpolation<ThemeProps<CustomTheme>>} styles - A `css` reference with interpolated styles\n * @returns {string} The final CSS\n */\nexport default function getInterpolatedStyles(styles: ThemedInterpolation): string {\n  return toArray(styles)\n    .map((interpolation) => {\n      while (isFunction(interpolation)) {\n        interpolation = interpolation({ theme: Alice })\n      }\n\n      return interpolation\n    })\n    .join('')\n}\n"],"names":["getContainerFromInput","input","parentNode","expand","datePickerContainer","queries","queryByRole","fireEvent","click","waitFor","expect","getByRole","toBeInTheDocument","collapse","getByText","not","datePickerEvent","getContainer","day","act","focus","dayElement","getByLabelText","getAttribute","clearButton","selectedDays","queryAllByRole","checked","DatePickerEvent","dateRangePickerEvent","pick","range","dateRangePickerContainer","rangeStart","rangeEnd","dateRangeStartInput","getByTestId","dateRangeEndInput","clear","getSelectedDates","getDropZoneFromInput","DragDropFileEvent","dragOver","dropzone","dragOverEvent","createEvent","dragLeave","dragLeaveEvent","dropFiles","files","fileDropEvent","drop","Object","defineProperty","value","toArray","getSelectContainer","getSelectMenu","nextSibling","getSelectTriggerHandle","getSelectSearchContainer","isSelectMenuExpanded","children","length","waitForPendingQuery","searchContainer","within","queryByTestId","waitForElementToBeRemoved","timeout","triggerHandle","toBeEnabled","dispatchEvent","MouseEvent","bubbles","selectEvent","select","option","menuContainer","optionElement","findByLabelText","mouseDown","mouseUp","unselect","search","query","change","target","findAllByRole","getOptions","options","getSelectedOptions","selectedOptions","selected","err","isMenuExpanded","defaultContextValueMock","fileList","onFilesAdded","jest","fn","onRetryUpload","onRemoveFile","styles","map","interpolation","isFunction","theme","Alice","join","ui","customContext","contextValue","assign","render","React","createElement","DragDropFileContext","Provider"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/testing/DatePickerEvent/DatePickerEvent.ts","../../src/testing/DatePickerEvent/DateRangePickerEvent.ts","../../src/testing/DragDropFileEvent/DragDropFileEvent.ts","../../src/testing/SelectEvent/SelectEvent.ts","../../src/testing/renderWithDragDropFileProvider/renderWithDragDropFileProvider.tsx","../../src/testing/getInterpolatedStyles/getInterpolatedStyles.ts"],"sourcesContent":["/* eslint-disable */\nimport { act, queries, fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react'\n// find the date picker container from its input field 🤷\nfunction getContainerFromInput(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  // if menu is rendered, then the select is already expanded\n  if (queries.queryByRole(datePickerContainer, 'menu')) {\n    return\n  }\n\n  fireEvent.click(input)\n\n  await waitFor(() => {\n    expect(queries.getByRole(datePickerContainer, 'menu')).toBeInTheDocument()\n  })\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  // if menu is not rendered, then the select is already collapsed\n  if (!queries.queryByRole(datePickerContainer, 'menu')) {\n    return\n  }\n\n  fireEvent.click(queries.getByText(datePickerContainer, 'Close'))\n\n  await waitFor(() => {\n    expect(queries.queryByRole(datePickerContainer, 'menu')).not.toBeInTheDocument()\n  })\n}\n\n/**\n * Pick (select)  the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(day: string, input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  await expand(input)\n\n  act(() => {\n    input.focus()\n  })\n\n  const dayElement = queries.getByLabelText(datePickerContainer, day)\n\n  if (dayElement && dayElement.getAttribute('aria-checked') == 'false') {\n    fireEvent.click(dayElement)\n  }\n\n  await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  const clearButton = queries.getByLabelText(datePickerContainer, 'Clear selection')\n\n  fireEvent.click(clearButton)\n\n  await collapse(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n  const datePickerContainer = getContainerFromInput(input)\n\n  await expand(input)\n\n  const selectedDays: HTMLElement[] = queries.queryAllByRole(datePickerContainer, 'checkbox', {\n    checked: true,\n  })\n\n  await collapse(input)\n\n  return selectedDays\n}\n\nconst datePickerEvent = {\n  getContainer: getContainerFromInput,\n  expand,\n  collapse,\n  pick,\n  clear,\n  getSelectedDates,\n}\n\nexport default datePickerEvent\n","/* eslint-disable */\nimport { queries } from '@testing-library/react'\n\nimport DatePickerEvent from './DatePickerEvent'\n\n/**\n * Expand the `DatePicker` calendar, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n  await DatePickerEvent.expand(input)\n}\n\n/**\n * Collapse the `DatePicker` calendar, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n  await DatePickerEvent.collapse(input)\n}\n\n/**\n * Pick (select)  the provided day in the current month/year.\n * Notice that we programatically expand the `DatePicker` calendar before picking the date.\n * @param {string} day - Label for the day to be picked, formatted as mm/dd/yyyy.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function pick(range: [string | null, string | null], input: HTMLElement): Promise<void> {\n  const dateRangePickerContainer = DatePickerEvent.getContainer(input)\n\n  await expand(input)\n\n  const [rangeStart, rangeEnd] = range\n\n  if (rangeStart != null) {\n    const dateRangeStartInput = queries.getByTestId(\n      dateRangePickerContainer,\n      'input-date-range-start'\n    )\n\n    await DatePickerEvent.pick(rangeStart, dateRangeStartInput)\n  }\n\n  if (rangeEnd != null) {\n    const dateRangeEndInput = queries.getByTestId(dateRangePickerContainer, 'input-date-range-end')\n\n    await DatePickerEvent.pick(rangeEnd, dateRangeEndInput)\n  }\n\n  await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n  await DatePickerEvent.clear(input)\n}\n\n/**\n * Get options elements currently selected in the `DatePicker` calendar.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `DatePicker`\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedDates(input: HTMLElement): Promise<HTMLElement[]> {\n  return DatePickerEvent.getSelectedDates(input)\n}\n\nexport const dateRangePickerEvent = {\n  getContainer: DatePickerEvent.getContainer,\n  expand,\n  collapse,\n  pick,\n  clear,\n  getSelectedDates,\n}\n\nexport default dateRangePickerEvent\n","import { createEvent, fireEvent } from '@testing-library/react'\n\nimport toArray from 'utils/toolset/toArray'\n\n/**\n * Get the input dropzone, which is the input parent (label).\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst getDropZoneFromInput = (input: HTMLInputElement): HTMLLabelElement =>\n  input.parentNode as HTMLLabelElement\n\n/**\n * Simulates the onDragOver event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragOver = (input: HTMLInputElement) => {\n  const dropzone = getDropZoneFromInput(input)\n\n  const dragOverEvent = createEvent.dragOver(dropzone)\n\n  fireEvent(dropzone, dragOverEvent)\n}\n\n/**\n * Simulates the onDragLeave event on the drop zone.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dragLeave = (input: HTMLInputElement) => {\n  const dropzone = getDropZoneFromInput(input)\n\n  const dragLeaveEvent = createEvent.dragLeave(dropzone)\n\n  fireEvent(dropzone, dragLeaveEvent)\n}\n\n/**\n * Simulates the onDrop event on the drop zone. You can provide a list of files or a single file.\n * @param {HTMLInputElement} input - You can refer to this element by the aria-label you provide to the DragDropFile component\n */\nconst dropFiles = (input: HTMLInputElement, files: File | File[]) => {\n  const dropzone = getDropZoneFromInput(input)\n\n  const fileDropEvent = createEvent.drop(dropzone)\n\n  Object.defineProperty(fileDropEvent, 'dataTransfer', { value: { files: toArray(files) } })\n\n  fireEvent(dropzone, fileDropEvent)\n}\n\nexport const DragDropFileEvent = {\n  dragOver,\n  dragLeave,\n  dropFiles,\n}\n\nexport default DragDropFileEvent\n","import { act, waitFor, within, waitForElementToBeRemoved, fireEvent } from '@testing-library/react'\n\n// based on https://github.com/romgain/react-select-event/blob/master/src/index.ts\n\n// find the select container from its input field 🤷\nfunction getSelectContainer(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.parentNode!.parentNode as HTMLElement\n}\n\n/**\n * Please, make sure to call expand before trying to get the menu container\n */\nfunction getSelectMenu(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.parentNode!.nextSibling as HTMLElement\n}\n\nfunction getSelectTriggerHandle(input: HTMLElement): HTMLElement {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  return input.parentNode!.nextSibling!.nextSibling as HTMLElement\n}\n\nfunction getSelectSearchContainer(input: HTMLElement): HTMLElement {\n  return input.parentNode as HTMLElement\n}\n\nfunction isSelectMenuExpanded(input: HTMLElement): boolean {\n  const selectContainer = getSelectContainer(input)\n\n  /**\n   * Once the select is expanded, we have the following structure:\n   * +-------------+\n   * | Close button (visually hidden)\n   * +-------------+\n   * | DropdownTrigger\n   * +-------------+\n   * | Popover\n   * +-------------+\n   *\n   * This, if the container has 3 children, we assume the menu is expanded\n   */\n  return selectContainer.children.length === 3\n}\n\n/**\n * This is needed because some datasources might be asynchronous.\n * To ensure that the data they retrieve will be available, we wait for the\n * querying phase to finish.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n */\nasync function waitForPendingQuery(input: HTMLElement) {\n  const searchContainer = getSelectSearchContainer(input)\n\n  if (!within(searchContainer).queryByTestId('select-trigger-loading')) {\n    return\n  }\n\n  await waitForElementToBeRemoved(\n    () => within(searchContainer).queryByTestId('select-trigger-loading'),\n    { timeout: 2500 }\n  )\n}\n\n/**\n * Expand the `Select` menu, if it not already expanded.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function expand(input: HTMLElement): Promise<void> {\n  await waitForPendingQuery(input)\n\n  if (isSelectMenuExpanded(input)) {\n    return\n  }\n\n  const triggerHandle = getSelectTriggerHandle(input)\n\n  await waitFor(() => {\n    expect(triggerHandle).toBeEnabled()\n  })\n\n  /**\n   * Using act and a manually dispatched event so we can account for the\n   * state changes that happen when the search input is clicked.\n   * This is mainly related to the `handleEvent` from the `useClickOutside` hook.\n   */\n  act(() => {\n    input.dispatchEvent(new MouseEvent('click', { bubbles: true }))\n  })\n\n  await waitFor(() => {\n    expect(within(getSelectContainer(input)).getByRole('listbox')).toBeInTheDocument()\n  })\n}\n\n/**\n * Collapse the `Select` menu, if it not already collapsed.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function collapse(input: HTMLElement): Promise<void> {\n  if (!isSelectMenuExpanded(input)) {\n    return\n  }\n\n  const triggerHandle = getSelectTriggerHandle(input)\n\n  fireEvent.click(triggerHandle)\n\n  await waitFor(() => {\n    expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()\n  })\n}\n\n/**\n * Select the provided option(s), if they are present in the menu.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string | RegExp} option - Label for the option to be selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function select(option: string | RegExp, input: HTMLElement): Promise<void> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  const optionElement = await within(menuContainer).findByLabelText(option)\n\n  // click the option if exists; Select currently closes when an item is clicked.\n  if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {\n    /**\n     * This is a replacement for the `userEvent.click`.\n     * We are adopting this approach to remove the peer dep to @testing-library/user-event for\n     * applications using this helper, so they are not tied to the same user-event as this library.\n     * It follows the same sequence of event stated in the documentation available at:\n     * https://testing-library.com/docs/guide-events/#interactions-vs-events\n     */\n    fireEvent.mouseDown(optionElement)\n\n    act(() => {\n      optionElement.focus()\n    })\n\n    fireEvent.mouseUp(optionElement)\n    fireEvent.click(optionElement)\n  }\n\n  // we collapse in the case the option was not clicked\n  await collapse(input)\n}\n\n/**\n * Unselect the provided option(s), if they are present in the menu AND are selected.\n * Notice that we programatically expand the `Select` menu before select the item\n * @param {string} option - Label for the option to be unselected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function unselect(option: string, input: HTMLElement): Promise<void> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  const optionElement = await within(menuContainer).findByLabelText(option)\n\n  // ensures that the option exists and IS selected\n  if (optionElement && optionElement.getAttribute('aria-selected') === 'true') {\n    fireEvent.click(optionElement)\n  }\n\n  // we collapse in the case the option was not clicked\n  await collapse(input)\n}\n\n/**\n * Clear the selection, if there are any options selected.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function clear(input: HTMLElement): Promise<void> {\n  await waitForPendingQuery(input)\n\n  const searchContainer = getSelectSearchContainer(input)\n\n  const clearButton = within(searchContainer).getByTestId('select-trigger-clear')\n\n  if (clearButton) {\n    fireEvent.click(clearButton)\n  }\n}\n\n/**\n * Perform search based on the given `query`. It will fail if the option is not found.\n * @param {string} query - Search term.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<void>}\n */\nasync function search(query: string, input: HTMLElement): Promise<void> {\n  fireEvent.change(input, {\n    target: { value: query },\n  })\n\n  await waitForPendingQuery(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  await within(menuContainer).findAllByRole('option')\n}\n\n/**\n * Get options elements currently available in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getOptions(input: HTMLElement): Promise<HTMLElement[]> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n\n  const options = within(menuContainer).queryAllByRole('option')\n\n  await collapse(input)\n\n  return options\n}\n\n/**\n * Get options elements currently selected in the `Select` menu.\n * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.\n * @returns {Promise<HTMLElement[]>}\n */\nasync function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {\n  await expand(input)\n\n  const menuContainer = getSelectMenu(input)\n  let selectedOptions: HTMLElement[] = []\n\n  try {\n    selectedOptions = await within(menuContainer).findAllByRole('option', {\n      selected: true,\n    })\n  } catch (err) {\n    selectedOptions = []\n  }\n\n  await collapse(input)\n\n  return selectedOptions\n}\n\nexport const selectEvent = {\n  select,\n  unselect,\n  clear,\n  search,\n  expand,\n  collapse,\n  getOptions,\n  getSelectedOptions,\n  isMenuExpanded: isSelectMenuExpanded,\n}\n\nexport default selectEvent\n","import React, { ReactNode } from 'react'\nimport { render } from '@testing-library/react'\nimport type { RenderResult } from '@testing-library/react'\n\nimport type { DragDropFileContextValue } from '../../components/DragDropFile/types'\nimport { DragDropFileContext } from '../../components/DragDropFile/DragDropFile.context'\n\nconst defaultContextValueMock: DragDropFileContextValue = {\n  fileList: [],\n  onFilesAdded: jest.fn(),\n  onRetryUpload: jest.fn(),\n  onRemoveFile: jest.fn(),\n}\n\nconst renderWithDragDropFileProvider = (\n  ui: ReactNode,\n  customContext?: Partial<DragDropFileContextValue>\n): RenderResult => {\n  const contextValue = { ...defaultContextValueMock, ...customContext }\n\n  const renderedUi = (children: ReactNode) => (\n    <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>\n  )\n\n  return render(renderedUi(ui))\n}\n\nexport default renderWithDragDropFileProvider\n","import type { Interpolation, ThemeProps } from 'styled-components'\nimport { isFunction } from '@loadsmart/utils-function'\n\nimport { Alice } from '../../theming/themes'\nimport type { CustomTheme } from '../../theming'\nimport toArray from 'utils/toolset/toArray'\n\ntype ThemedInterpolation = Interpolation<ThemeProps<CustomTheme>>\n\n/**\n * Use this function to simulate the CSS that would be generated by styled-components\n * @param {Interpolation<ThemeProps<CustomTheme>>} styles - A `css` reference with interpolated styles\n * @returns {string} The final CSS\n */\nexport default function getInterpolatedStyles(styles: ThemedInterpolation): string {\n  return toArray(styles)\n    .map((interpolation) => {\n      while (isFunction(interpolation)) {\n        interpolation = interpolation({ theme: Alice })\n      }\n\n      return interpolation\n    })\n    .join('')\n}\n"],"names":["getContainerFromInput","input","parentNode","expand","datePickerContainer","queries","queryByRole","fireEvent","click","waitFor","expect","getByRole","toBeInTheDocument","collapse","getByText","not","datePickerEvent","getContainer","day","act","focus","dayElement","getByLabelText","getAttribute","clearButton","selectedDays","queryAllByRole","checked","DatePickerEvent","dateRangePickerEvent","pick","range","dateRangePickerContainer","rangeStart","rangeEnd","dateRangeStartInput","getByTestId","dateRangeEndInput","clear","getSelectedDates","getDropZoneFromInput","DragDropFileEvent","dragOver","dropzone","dragOverEvent","createEvent","dragLeave","dragLeaveEvent","dropFiles","files","fileDropEvent","drop","Object","defineProperty","value","toArray","getSelectContainer","getSelectMenu","nextSibling","getSelectTriggerHandle","getSelectSearchContainer","isSelectMenuExpanded","children","length","waitForPendingQuery","searchContainer","within","queryByTestId","waitForElementToBeRemoved","timeout","triggerHandle","toBeEnabled","dispatchEvent","MouseEvent","bubbles","selectEvent","select","option","menuContainer","optionElement","findByLabelText","mouseDown","mouseUp","unselect","search","query","change","target","findAllByRole","getOptions","options","getSelectedOptions","selectedOptions","selected","err","isMenuExpanded","defaultContextValueMock","fileList","onFilesAdded","jest","fn","onRetryUpload","onRemoveFile","styles","map","interpolation","isFunction","theme","Alice","join","ui","customContext","contextValue","assign","render","React","createElement","DragDropFileContext","Provider"],"mappings":"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"}

package/dist/theming/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../miranda-compatibility.theme-8689186b.js");require("@loadsmart/miranda-tokens");var t=Object.freeze({__proto__:null,Alice:e.alice,Loadsmart:e.loadsmart,Miranda:e.mirandaCompatibility});function r(t,r){const i=e.isFunction(t)?t(r):t;return r.theme[i]}exports.Themes=t,exports.getToken=function(e,t){return void 0===t?t=>r(e,t):r(e,t)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../miranda-compatibility.theme-ce3baf7f.js");require("@loadsmart/miranda-tokens"),require("lodash/get.js");var r=Object.freeze({__proto__:null,Alice:e.alice,Loadsmart:e.loadsmart,Miranda:e.mirandaCompatibility});function t(r,t){const a=e.isFunction(r)?r(t):r;return t.theme[a]}exports.Themes=r,exports.getToken=function(e,r){return void 0===r?r=>t(e,r):t(e,r)};
 //# sourceMappingURL=index.js.map

package/dist/theming/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/theming/index.ts"],"sourcesContent":["import { isFunction } from '@loadsmart/utils-function'\n\nimport type { ThemeProps } from 'styled-components'\nimport type ThemeAlice from './themes/alice.theme'\n\nexport type ThemeToken = keyof typeof ThemeAlice\nexport type ThemeTokenValue = string | number\n\nexport type CustomTheme = Record<ThemeToken, ThemeTokenValue>\nexport type ThemedProps = ThemeProps<CustomTheme>\n\ntype TokenLike<P extends ThemedProps = ThemedProps> = ThemeToken | ((props: P) => ThemeToken)\n\nfunction getTokenFromTheme<P extends ThemedProps>(token: TokenLike<P>, props: P): ThemeTokenValue {\n  const tokenName = isFunction(token) ? token(props) : token\n  return props.theme[tokenName]\n}\n\n/**\n * Return a design token value for the current theme.\n * @param {string} token - Token whose value should be returned.\n * @param {[ThemedStyledProps]} props - Component props.\n * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.\n */\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>\n): (props: TProps) => ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>,\n  props: TProps\n): ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(token: any, props?: any): any {\n  if (props === undefined) {\n    return (props: TProps) => getTokenFromTheme(token, props)\n  }\n\n  return getTokenFromTheme(token, props)\n}\n\nexport * as Themes from './themes'\n"],"names":["getTokenFromTheme","token","props","tokenName","isFunction","theme","undefined"],"mappings":"8QAaA,SAASA,EAAyCC,EAAqBC,GACrE,MAAMC,EAAYC,EAAAA,WAAWH,GAASA,EAAMC,GAASD,EACrD,OAAOC,EAAMG,MAAMF,EACrB,mCAiBgB,SAAqCF,EAAYC,GAC/D,YAAcI,IAAVJ,EACMA,GAAkBF,EAAkBC,EAAOC,GAG9CF,EAAkBC,EAAOC,EAClC"}
+{"version":3,"file":"index.js","sources":["../../src/theming/index.ts"],"sourcesContent":["import { isFunction } from '@loadsmart/utils-function'\n\nimport type { ThemeProps } from 'styled-components'\nimport type ThemeAlice from './themes/alice.theme'\n\nexport type ThemeToken = keyof typeof ThemeAlice\nexport type ThemeTokenValue = string | number\n\nexport type CustomTheme = Record<ThemeToken, ThemeTokenValue>\nexport type ThemedProps = ThemeProps<CustomTheme>\n\ntype TokenLike<P extends ThemedProps = ThemedProps> = ThemeToken | ((props: P) => ThemeToken)\n\nfunction getTokenFromTheme<P extends ThemedProps>(token: TokenLike<P>, props: P): ThemeTokenValue {\n  const tokenName = isFunction(token) ? token(props) : token\n  return props.theme[tokenName]\n}\n\n/**\n * Return a design token value for the current theme.\n * @param {string} token - Token whose value should be returned.\n * @param {[ThemedStyledProps]} props - Component props.\n * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.\n */\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>\n): (props: TProps) => ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>,\n  props: TProps\n): ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(token: any, props?: any): any {\n  if (props === undefined) {\n    return (props: TProps) => getTokenFromTheme(token, props)\n  }\n\n  return getTokenFromTheme(token, props)\n}\n\nexport * as Themes from './themes'\n"],"names":["getTokenFromTheme","token","props","tokenName","isFunction","theme","undefined"],"mappings":"uSAaA,SAASA,EAAyCC,EAAqBC,GACrE,MAAMC,EAAYC,EAAAA,WAAWH,GAASA,EAAMC,GAASD,EACrD,OAAOC,EAAMG,MAAMF,EACrB,mCAiBgB,SAAqCF,EAAYC,GAC/D,YAAcI,IAAVJ,EACMA,GAAkBF,EAAkBC,EAAOC,GAG9CF,EAAkBC,EAAOC,EAClC"}

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-597d4792.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-8689186b.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-d9ec2877.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-ce3baf7f.js"),require("@loadsmart/miranda-tokens"),require("lodash/get.js"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/dist/utils/toolset/flatten.d.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.flatten';
+import { flatten } from 'lodash';
+export default flatten;

package/dist/utils/toolset/get.d.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.get';
+import { get } from 'lodash';
+export default get;

package/dist/utils/toolset/highlightMatch.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * A function that wraps a match into `mark` element to be highlighted.
  * @example

package/dist/utils/toolset/isEmpty.d.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.isempty';
+import { isEmpty } from 'lodash';
+export default isEmpty;

package/dist/utils/toolset/omit.d.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.omit';
+import { omit } from 'lodash';
+export default omit;

package/dist/utils/toolset/range.d.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.range';
+import { range } from 'lodash';
+export default range;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "7.3.2",
+  "version": "7.4.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -52,18 +52,21 @@
     "@commitlint/config-conventional": "^16.0.0",
     "@loadsmart/miranda-tokens": "^2.2.1",
     "@loadsmart/stylelint-config": "^0.0.3",
+    "@optimize-lodash/rollup-plugin": "^5.0.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
     "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-a11y": "^7.0.17",
-    "@storybook/addon-essentials": "^7.0.17",
-    "@storybook/addon-links": "^7.0.17",
-    "@storybook/addons": "^7.0.17",
-    "@storybook/react": "^7.0.17",
-    "@storybook/react-webpack5": "^7.0.17",
-    "@storybook/theming": "^7.0.17",
+    "@storybook/addon-a11y": "^7.6.20",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addons": "^7.6.20",
+    "@storybook/client-api": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@storybook/react-webpack5": "^7.6.20",
+    "@storybook/theming": "^7.6.20",
     "@svgr/rollup": "^6.5.1",
     "@svgr/webpack": "^8.0.1",
     "@tailwindcss/postcss7-compat": "^2.1.2",
@@ -74,18 +77,12 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/chance": "^1.1.1",
     "@types/jest": "^27.5.2",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.flatten": "^4.4.6",
-    "@types/lodash.get": "^4.4.6",
-    "@types/lodash.isempty": "^4.4.6",
-    "@types/lodash.omit": "^4.5.6",
-    "@types/lodash.range": "^3.2.6",
     "@types/mdx": "^2.0.2",
     "@types/node": "^18.11.18",
-    "@types/react": "^17.0.59",
-    "@types/react-dom": "^17.0.20",
+    "@types/react": "^17.0.83",
+    "@types/react-dom": "^17.0.25",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^4.22.1",
     "@typescript-eslint/parser": "^4.22.1",
     "@zerollup/ts-transform-paths": "^1.7.18",
@@ -95,7 +92,6 @@
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-styled-components": "^1.12.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "babel-preset-react-app": "^10.0.0",
     "chance": "^1.1.8",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
@@ -116,6 +112,7 @@
     "jest-junit": "^16.0.0",
     "jest-transformer-svg": "^1.0.2",
     "lint-staged": "^11.0.0",
+    "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "postcss": "^7.0.39",
     "postcss-cli": "^7.1.2",
@@ -123,16 +120,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "react-syntax-highlighter": "^15.5.0",
     "rollup": "^2.79.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
-    "rollup-plugin-visualizer": "^5.5.2",
     "semantic-release": "^17.4.2",
-    "storybook": "^7.0.17",
-    "styled-components": "^5.3.0",
+    "storybook": "^7.6.20",
+    "styled-components": "^5.3.11",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-rational-order": "^0.1.2",
@@ -150,6 +144,7 @@
   "peerDependencies": {
     "@loadsmart/miranda-tokens": ">=1.3.0",
     "@testing-library/react": ">=11.2.6",
+    "lodash": ">=4.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": ">=5.3.0"
@@ -159,13 +154,7 @@
     "@loadsmart/utils-function": "0.3.1",
     "@loadsmart/utils-object": "0.3.1",
     "@loadsmart/utils-string": "0.3.1",
-    "clsx": "1.1.1",
-    "lodash.debounce": "4.0.8",
-    "lodash.flatten": "4.4.0",
-    "lodash.get": "4.4.2",
-    "lodash.isempty": "4.4.0",
-    "lodash.omit": "4.5.0",
-    "lodash.range": "3.2.0"
+    "clsx": "1.1.1"
   },
   "repository": {
     "type": "git",
@@ -181,6 +170,11 @@
     }
   },
   "resolutions": {
-    "@stylelint/postcss-css-in-js": "0.37.2"
+    "@stylelint/postcss-css-in-js": "0.37.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.25",
+    "react-is": "17.0.2"
   }
 }

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -80,7 +80,7 @@ export const WithSections: Story<DropdownStoryProps> = (args) => {
     <div className="flex flex-col">
       <Dropdown {...args}>
         <Dropdown.Trigger outlined={args.outlined}>Sections</Dropdown.Trigger>
-        <Dropdown.Menu align={args.align}>
+        <Dropdown.Menu>
           <Dropdown.Section header="My profile">
             {PROFILE_ACTIONS.map(({ label, value }) => (
               <Dropdown.Item
@@ -128,7 +128,6 @@ export const Extended: Story<DropdownStoryProps> = (args) => {
       <Dropdown {...args}>
         <Dropdown.Trigger outlined={args.outlined}>With Header &amp; Footer</Dropdown.Trigger>
         <Dropdown.Menu
-          align={args.align}
           header={<p className="px-2">Header</p>}
           footer={<p className="px-2">A cool footer</p>}
         >

package/src/components/IconFactory/IconFactory.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, ComponentType } from 'react'
 import styled from 'styled-components'
 
 import transition from 'styles/transition'
@@ -50,7 +50,7 @@ export function UnknownIcon(): JSX.Element {
   return <span aria-label="Unknown icon">&#9785;</span>
 }
 
-function IconFactory(map: IconMapping): (props: IconProps<typeof map>) => JSX.Element {
+function IconFactory(map: IconMapping): ComponentType<IconProps<typeof map>> {
   function getIcon(name: keyof typeof map): ReactNode | null {
     // eslint-disable-next-line no-param-reassign
     name = String(name || '').toLowerCase()

package/src/components/Select/Select.constants.ts

@@ -4,9 +4,9 @@ import type { SelectAdapter } from './Select.types'
 
 export const GenericAdapter: SelectAdapter<unknown> = {
   getKey(o): string {
-    return get(o, 'value') as string
+    return get(o, 'value')!
   },
   getLabel(o): string {
-    return get(o, 'label') as string
+    return get(o, 'label')!
   },
 }

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import type { Story, Meta } from '@storybook/react'
-import omit from 'lodash.omit'
+import { omit } from 'lodash'
 
 import { Label } from 'components/Label'
 import { Text } from 'components/Text'

package/src/components/Steps/useSteps.ts

@@ -115,7 +115,7 @@ function useSteps({ steps, current: currentProp }: useStepsProps): [State, Dispa
   // TODO: gather step info to feed Steps component
   function init(steps: Array<Step>, current?: number | string): State {
     return {
-      current: current || (get(steps, '0.id') as number | string),
+      current: current || get(steps, '0.id')!,
       steps,
     }
   }

package/src/components/Tag/Tag.tsx

@@ -315,7 +315,7 @@ const StyledCloseButton = styled.button<WithSizeProps & WithVariantProps>`
       'tag-warning-background--focus': whenProps({ variant: 'warning' }),
       'tag-danger-background--focus': whenProps({ variant: 'danger' }),
     })};
-    box-shadow: ${token('tag-outline')};
+    box-shadow: ${token('tag-box-shadow')};
   }
 `
 

package/src/components/Text/Text.stories.tsx

@@ -1,55 +1,59 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import { Text } from '.'
 import type { TextProps } from './Text'
 import { COLORS } from '../../theming/themes/loadsmart.theme'
 import { typographyProperties } from 'styles/typography'
 
-export default {
+const meta: Meta<typeof Text> = {
   title: 'Components/Text',
   component: Text,
   argTypes: {
     children: {
-      control: { type: 'text' },
-      defaultValue: 'This is a sample text content.',
+      control: 'text',
       description: 'Children to be passed as text content.',
     },
     variant: {
-      control: {
-        type: 'select',
-        options: Object.keys(typographyProperties),
-      },
-      defaultValue: Object.keys(typographyProperties)[0],
+      control: 'select',
+      options: Object.keys(typographyProperties),
       description: 'One of the documented typography variants',
     },
     italic: {
-      control: { type: 'boolean' },
-      defaultValue: false,
+      control: 'boolean',
       description: 'Controls if the text should be on italic mode.',
     },
     color: {
-      control: { type: 'select', options: Object.keys(COLORS) },
-      defaultValue: 'color-neutral-darkest',
+      control: 'select',
+      options: Object.keys(COLORS),
       description: 'Accepts all colors supported by the theme.',
     },
     as: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
       description:
         'Which HTML element will be used, such as `span`, `p`, `h1-h6`, `blockquote`, `q`, `abbr`, `address`, `cite`, and others.',
-      defaultValue: 'span',
     },
   },
-} as Meta
+}
+
+export default meta
+
+type Story = StoryObj<TextProps>
 
-export const Playground: Story<TextProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <Text {...args} />
+export const Playground: Story = {
+  args: {
+    children: 'This is a sample text content.',
+    italic: false,
+    variant: 'body',
+    color: 'color-neutral-darkest',
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-col space-y-2">
+        <div className="flex items-center">
+          <Text {...args} />
+        </div>
       </div>
-    </div>
-  )
+    )
+  },
 }

package/src/hooks/useSelectable/SelectableStrategy.ts

@@ -14,7 +14,7 @@ export type SelectableStrategyContext<T extends Selectable> = {
 
 const GenericAdapter: SelectableAdapter<unknown> = {
   getKey(o): string {
-    return get(o, 'value') as string
+    return get(o, 'value')!
   },
 }
 

package/src/utils/toolset/flatten.ts

@@ -1 +1,3 @@
-export { default } from 'lodash.flatten'
+import { flatten } from 'lodash'
+
+export default flatten

package/src/utils/toolset/get.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.get'
+import { get } from 'lodash'
+export default get

package/src/utils/toolset/isEmpty.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.isempty'
+import { isEmpty } from 'lodash'
+export default isEmpty

package/src/utils/toolset/omit.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.omit'
+import { omit } from 'lodash'
+export default omit

package/src/utils/toolset/range.ts

@@ -1 +1,2 @@
-export { default } from 'lodash.range'
+import { range } from 'lodash'
+export default range