@loadsmart/loadsmart-ui 6.4.0 → 7.0.1

package/dist/prop-e569d46a.js

@@ -0,0 +1,2 @@
+"use strict";var t=require("./toArray-b56541b4.js"),n=require("./miranda-compatibility.theme-bb671a80.js"),r=require("./theming/index.js");function e(t,e){return Object.keys(t||{}).reduce(((o,i)=>{var u;let s=t[i];if(n.isFunction(s)&&(s=s(e)),s){const t=i,n=null!==(u=r.getToken(t,e))&&void 0!==u?u:i;return[...o,n]}return o}),[]).join(" ")}function o(...t){const[n,r]=t;return null==n||!1===n||Number.isNaN(n)?r||n:"string"==typeof n&&0===n.length&&r||n}exports.conditional=function(...r){return function(o){let i=[];for(let u=0;u<r.length;u++){const s=r[u];n.isFunction(s)?i.push(s(o)):t.isObject(s)?i=i.concat(e(s,o)):s&&i.push(String(s))}return i.join(" ")}},exports.prop=function(t,n,r=o){return e=>r(e[t],n)},exports.whenProps=function(r){return function(e){const o=t.toArray(r);let i=!1;for(let r=0;r<o.length;r++){const u=o[r],s=Object.keys(u);let c=!0;for(let r=0;r<s.length&&c;r++){const o=s[r],i=n.lodash_get(e,o),l=u[o];c=Array.isArray(l)?c&&t.toArray(l).includes(i):n.isFunction(l)?c&&Boolean(l(i)):c&&l===i}i=i||c}return i}};
+//# sourceMappingURL=prop-e569d46a.js.map

package/dist/{prop-201ffe28.js.map → prop-e569d46a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"prop-201ffe28.js","sources":["../src/tools/conditional.ts","../src/tools/prop.ts"],"sourcesContent":["import { isObject } from '@loadsmart/utils-object'\nimport { isFunction } from '@loadsmart/utils-function'\nimport type { F } from 'ts-toolbelt'\n\nimport { getToken } from 'theming'\nimport type { ThemeToken, ThemedProps } from 'theming'\nimport get from 'utils/toolset/get'\nimport toArray from 'utils/toolset/toArray'\n\ntype WhenProps<K> = K | undefined | ((value: K) => boolean | undefined)\n\nexport type When<P> = {\n  [Key in keyof P]?: WhenProps<P[Key]> | WhenProps<P[Key]>[] | undefined\n}\n\n/**\n * Utility to generate style/class name conditions based on a components props.\n * Expected prop values can be a single value, an array of values or a function/callback.\n * @example\n * ```jsx\n * whenProps({\n *  'prop-a': true, // checks `props['prop-a']` === true`\n *  'prop-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`\n *  'prop-c': (value) => value + 1 // checks `Boolean(callback(props['prop-c']))`\n *  'prop-d': Boolean // checks `Boolean(Boolean(props['prop-d']))`\n * })\n * ```\n * @param {...Object} conditions\n * @returns {(props: Object}) => boolean} Returns function that consumes component props.\n */\nexport function whenProps<P>(conditions: When<F.Narrow<P>> | When<F.Narrow<P>>[]) {\n  return function (props: P): boolean {\n    const safeConditions = toArray(conditions)\n\n    let res = false\n\n    for (let i = 0; i < safeConditions.length; i++) {\n      const condition = safeConditions[i]\n      const keys = Object.keys(condition)\n\n      let temp = true\n\n      for (let j = 0; j < keys.length && temp; j++) {\n        const key = keys[j]\n        const propValue = get(props, key) as P[keyof P]\n        const conditionValue = condition[key as keyof typeof condition]\n\n        if (Array.isArray(conditionValue)) {\n          temp = temp && toArray(conditionValue).includes(propValue)\n        } else if (isFunction(conditionValue)) {\n          temp = temp && Boolean(conditionValue(propValue))\n        } else {\n          temp = temp && (conditionValue as unknown) === propValue\n        }\n      }\n\n      res = res || temp\n    }\n\n    return res\n  }\n}\n\ntype ConditionObject<P> = Record<\n  string,\n  string | number | boolean | ((props: P) => boolean) | undefined\n>\n\nfunction handleConditionObject<P>(condition: ConditionObject<P>, props: P): string {\n  const keys = Object.keys(condition || {})\n\n  const res = keys.reduce((acc, key) => {\n    let value = condition[key]\n\n    if (isFunction(value)) {\n      value = value(props)\n    }\n\n    if (value) {\n      const tokenKey = key as ThemeToken\n      const result = (getToken(tokenKey, props as unknown as ThemedProps) ?? key) as string\n      return [...acc, result]\n    }\n\n    return acc\n  }, [] as string[])\n\n  return res.join(' ')\n}\n\ntype Condition<P> = number | string | ConditionObject<P> | ((props: P) => string)\n\n/**\n * Concatenate style properties or class names conditionally.\n * Conditions can be functions that consume components props,\n * objects, strings, or numbers (that will be coerced to strings).\n * @example\n * ```jsx\n * conditional(1, 'some-class', {\n *  'class-a': true,\n *  'class-b': (props) => props.showClassB,\n * }, (props) => props.className)\n * ```\n * @param conditions\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction conditional<P>(...conditions: Condition<P>[]) {\n  return function (props: P): string {\n    let classes: string[] = []\n\n    for (let i = 0; i < conditions.length; i++) {\n      const condition = conditions[i]\n\n      if (isFunction(condition)) {\n        classes.push(condition(props))\n      } else if (isObject(condition)) {\n        classes = classes.concat(handleConditionObject<P>(condition, props))\n      } else if (condition) {\n        classes.push(String(condition))\n      }\n    }\n\n    return classes.join(' ')\n  }\n}\n\nexport default conditional\n","function compare(...args: any[]): unknown {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const [value, defaultValue] = args\n\n  if (value == null || value === false || Number.isNaN(value)) {\n    return defaultValue || value\n  }\n\n  if (typeof value === 'string' && value.length === 0) {\n    return defaultValue || value\n  }\n\n  return value\n}\n\n/**\n * Retrieve the key value from the props object\n * @example\n * ```jsx\n * -transform: scaleY(${(props) => props.$height || 1});\n * +transform: scaleY(${prop('$height', 1)});\n * ```\n * @param name a valid property name from the object\n * @param defaultValue a fallback value in case the property value is invalid\n * @param comparatorFn a function to be used to decide between value or defaultValue\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction prop<P, K extends keyof P = keyof P>(\n  name: K,\n  defaultValue?: NonNullable<P[K]>,\n  comparatorFn = compare\n) {\n  return (props: P): P[K] => comparatorFn(props[name], defaultValue) as P[K]\n}\n\nexport default prop\n"],"names":["handleConditionObject","condition","props","Object","keys","reduce","acc","key","value","isFunction","tokenKey","result","_a","getToken","join","compare","args","defaultValue","Number","isNaN","length","conditions","classes","i","push","isObject","concat","String","name","comparatorFn","safeConditions","toArray","res","temp","j","propValue","get","conditionValue","Array","isArray","includes","Boolean"],"mappings":"2IAoEA,SAASA,EAAyBC,EAA+BC,GAmB/D,OAlBaC,OAAOC,KAAKH,GAAa,CAAE,GAEvBI,QAAO,CAACC,EAAKC,WAC5B,IAAIC,EAAQP,EAAUM,GAMtB,GAJIE,EAAAA,WAAWD,KACbA,EAAQA,EAAMN,IAGZM,EAAO,CACT,MAAME,EAAWH,EACXI,EAAiE,QAAvDC,EAAAC,EAAQA,SAACH,EAAUR,UAAoC,IAAAU,EAAAA,EAAAL,EACvE,MAAO,IAAID,EAAKK,EACjB,CAED,OAAOL,CAAG,GACT,IAEQQ,KAAK,IAClB,CCxFA,SAASC,KAAWC,GAElB,MAAOR,EAAOS,GAAgBD,EAE9B,OAAa,MAATR,IAA2B,IAAVA,GAAmBU,OAAOC,MAAMX,GAC5CS,GAAgBT,EAGJ,iBAAVA,GAAuC,IAAjBA,EAAMY,QAC9BH,GAGFT,CACT,qBD6FA,YAA2Ba,GACzB,OAAO,SAAUnB,GACf,IAAIoB,EAAoB,GAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAWD,OAAQG,IAAK,CAC1C,MAAMtB,EAAYoB,EAAWE,GAEzBd,EAAAA,WAAWR,GACbqB,EAAQE,KAAKvB,EAAUC,IACduB,EAAAA,SAASxB,GAClBqB,EAAUA,EAAQI,OAAO1B,EAAyBC,EAAWC,IACpDD,GACTqB,EAAQE,KAAKG,OAAO1B,GAEvB,CAED,OAAOqB,EAAQR,KAAK,IACtB,CACF,eCjGA,SACEc,EACAX,EACAY,EAAed,GAEf,OAAQb,GAAmB2B,EAAa3B,EAAM0B,GAAOX,EACvD,oBDHM,SAAuBI,GAC3B,OAAO,SAAUnB,GACf,MAAM4B,EAAiBC,UAAQV,GAE/B,IAAIW,GAAM,EAEV,IAAK,IAAIT,EAAI,EAAGA,EAAIO,EAAeV,OAAQG,IAAK,CAC9C,MAAMtB,EAAY6B,EAAeP,GAC3BnB,EAAOD,OAAOC,KAAKH,GAEzB,IAAIgC,GAAO,EAEX,IAAK,IAAIC,EAAI,EAAGA,EAAI9B,EAAKgB,QAAUa,EAAMC,IAAK,CAC5C,MAAM3B,EAAMH,EAAK8B,GACXC,EAAYC,EAAAA,WAAIlC,EAAOK,GACvB8B,EAAiBpC,EAAUM,GAG/B0B,EADEK,MAAMC,QAAQF,GACTJ,GAAQF,EAAOA,QAACM,GAAgBG,SAASL,GACvC1B,EAAAA,WAAW4B,GACbJ,GAAQQ,QAAQJ,EAAeF,IAE/BF,GAASI,IAA+BF,CAElD,CAEDH,EAAMA,GAAOC,CACd,CAED,OAAOD,CACT,CACF"}
+{"version":3,"file":"prop-e569d46a.js","sources":["../src/tools/conditional.ts","../src/tools/prop.ts"],"sourcesContent":["import { isObject } from '@loadsmart/utils-object'\nimport { isFunction } from '@loadsmart/utils-function'\nimport type { F } from 'ts-toolbelt'\n\nimport { getToken } from 'theming'\nimport type { ThemeToken, ThemedProps } from 'theming'\nimport get from 'utils/toolset/get'\nimport toArray from 'utils/toolset/toArray'\n\ntype WhenProps<K> = K | undefined | ((value: K) => boolean | undefined)\n\nexport type When<P> = {\n  [Key in keyof P]?: WhenProps<P[Key]> | WhenProps<P[Key]>[] | undefined\n}\n\n/**\n * Utility to generate style/class name conditions based on a components props.\n * Expected prop values can be a single value, an array of values or a function/callback.\n * @example\n * ```jsx\n * whenProps({\n *  'prop-a': true, // checks `props['prop-a']` === true`\n *  'prop-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`\n *  'prop-c': (value) => value + 1 // checks `Boolean(callback(props['prop-c']))`\n *  'prop-d': Boolean // checks `Boolean(Boolean(props['prop-d']))`\n * })\n * ```\n * @param {...Object} conditions\n * @returns {(props: Object}) => boolean} Returns function that consumes component props.\n */\nexport function whenProps<P>(conditions: When<F.Narrow<P>> | When<F.Narrow<P>>[]) {\n  return function (props: P): boolean {\n    const safeConditions = toArray(conditions)\n\n    let res = false\n\n    for (let i = 0; i < safeConditions.length; i++) {\n      const condition = safeConditions[i]\n      const keys = Object.keys(condition)\n\n      let temp = true\n\n      for (let j = 0; j < keys.length && temp; j++) {\n        const key = keys[j]\n        const propValue = get(props, key) as P[keyof P]\n        const conditionValue = condition[key as keyof typeof condition]\n\n        if (Array.isArray(conditionValue)) {\n          temp = temp && toArray(conditionValue).includes(propValue)\n        } else if (isFunction(conditionValue)) {\n          temp = temp && Boolean(conditionValue(propValue))\n        } else {\n          temp = temp && (conditionValue as unknown) === propValue\n        }\n      }\n\n      res = res || temp\n    }\n\n    return res\n  }\n}\n\ntype ConditionObject<P> = Record<\n  string,\n  string | number | boolean | ((props: P) => boolean) | undefined\n>\n\nfunction handleConditionObject<P>(condition: ConditionObject<P>, props: P): string {\n  const keys = Object.keys(condition || {})\n\n  const res = keys.reduce((acc, key) => {\n    let value = condition[key]\n\n    if (isFunction(value)) {\n      value = value(props)\n    }\n\n    if (value) {\n      const tokenKey = key as ThemeToken\n      const result = (getToken(tokenKey, props as unknown as ThemedProps) ?? key) as string\n      return [...acc, result]\n    }\n\n    return acc\n  }, [] as string[])\n\n  return res.join(' ')\n}\n\ntype Condition<P> = number | string | ConditionObject<P> | ((props: P) => string)\n\n/**\n * Concatenate style properties or class names conditionally.\n * Conditions can be functions that consume components props,\n * objects, strings, or numbers (that will be coerced to strings).\n * @example\n * ```jsx\n * conditional(1, 'some-class', {\n *  'class-a': true,\n *  'class-b': (props) => props.showClassB,\n * }, (props) => props.className)\n * ```\n * @param conditions\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction conditional<P>(...conditions: Condition<P>[]) {\n  return function (props: P): string {\n    let classes: string[] = []\n\n    for (let i = 0; i < conditions.length; i++) {\n      const condition = conditions[i]\n\n      if (isFunction(condition)) {\n        classes.push(condition(props))\n      } else if (isObject(condition)) {\n        classes = classes.concat(handleConditionObject<P>(condition, props))\n      } else if (condition) {\n        classes.push(String(condition))\n      }\n    }\n\n    return classes.join(' ')\n  }\n}\n\nexport default conditional\n","function compare(...args: any[]): unknown {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const [value, defaultValue] = args\n\n  if (value == null || value === false || Number.isNaN(value)) {\n    return defaultValue || value\n  }\n\n  if (typeof value === 'string' && value.length === 0) {\n    return defaultValue || value\n  }\n\n  return value\n}\n\n/**\n * Retrieve the key value from the props object\n * @example\n * ```jsx\n * -transform: scaleY(${(props) => props.$height || 1});\n * +transform: scaleY(${prop('$height', 1)});\n * ```\n * @param name a valid property name from the object\n * @param defaultValue a fallback value in case the property value is invalid\n * @param comparatorFn a function to be used to decide between value or defaultValue\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction prop<P, K extends keyof P = keyof P>(\n  name: K,\n  defaultValue?: NonNullable<P[K]>,\n  comparatorFn = compare\n) {\n  return (props: P): P[K] => comparatorFn(props[name], defaultValue) as P[K]\n}\n\nexport default prop\n"],"names":["handleConditionObject","condition","props","Object","keys","reduce","acc","key","value","isFunction","tokenKey","result","_a","getToken","join","compare","args","defaultValue","Number","isNaN","length","conditions","classes","i","push","isObject","concat","String","name","comparatorFn","safeConditions","toArray","res","temp","j","propValue","get","conditionValue","Array","isArray","includes","Boolean"],"mappings":"2IAoEA,SAASA,EAAyBC,EAA+BC,GAmB/D,OAlBaC,OAAOC,KAAKH,GAAa,CAAE,GAEvBI,QAAO,CAACC,EAAKC,WAC5B,IAAIC,EAAQP,EAAUM,GAMtB,GAJIE,EAAAA,WAAWD,KACbA,EAAQA,EAAMN,IAGZM,EAAO,CACT,MAAME,EAAWH,EACXI,EAAiE,QAAvDC,EAAAC,EAAQA,SAACH,EAAUR,UAAoC,IAAAU,EAAAA,EAAAL,EACvE,MAAO,IAAID,EAAKK,EACjB,CAED,OAAOL,CAAG,GACT,IAEQQ,KAAK,IAClB,CCxFA,SAASC,KAAWC,GAElB,MAAOR,EAAOS,GAAgBD,EAE9B,OAAa,MAATR,IAA2B,IAAVA,GAAmBU,OAAOC,MAAMX,GAC5CS,GAAgBT,EAGJ,iBAAVA,GAAuC,IAAjBA,EAAMY,QAC9BH,GAGFT,CACT,qBD6FA,YAA2Ba,GACzB,OAAO,SAAUnB,GACf,IAAIoB,EAAoB,GAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAWD,OAAQG,IAAK,CAC1C,MAAMtB,EAAYoB,EAAWE,GAEzBd,EAAAA,WAAWR,GACbqB,EAAQE,KAAKvB,EAAUC,IACduB,EAAAA,SAASxB,GAClBqB,EAAUA,EAAQI,OAAO1B,EAAyBC,EAAWC,IACpDD,GACTqB,EAAQE,KAAKG,OAAO1B,GAEvB,CAED,OAAOqB,EAAQR,KAAK,IACtB,CACF,eCjGA,SACEc,EACAX,EACAY,EAAed,GAEf,OAAQb,GAAmB2B,EAAa3B,EAAM0B,GAAOX,EACvD,oBDHM,SAAuBI,GAC3B,OAAO,SAAUnB,GACf,MAAM4B,EAAiBC,UAAQV,GAE/B,IAAIW,GAAM,EAEV,IAAK,IAAIT,EAAI,EAAGA,EAAIO,EAAeV,OAAQG,IAAK,CAC9C,MAAMtB,EAAY6B,EAAeP,GAC3BnB,EAAOD,OAAOC,KAAKH,GAEzB,IAAIgC,GAAO,EAEX,IAAK,IAAIC,EAAI,EAAGA,EAAI9B,EAAKgB,QAAUa,EAAMC,IAAK,CAC5C,MAAM3B,EAAMH,EAAK8B,GACXC,EAAYC,EAAAA,WAAIlC,EAAOK,GACvB8B,EAAiBpC,EAAUM,GAG/B0B,EADEK,MAAMC,QAAQF,GACTJ,GAAQF,EAAOA,QAACM,GAAgBG,SAASL,GACvC1B,EAAAA,WAAW4B,GACbJ,GAAQQ,QAAQJ,EAAeF,IAE/BF,GAASI,IAA+BF,CAElD,CAEDH,EAAMA,GAAOC,CACd,CAED,OAAOD,CACT,CACF"}

package/dist/testing/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../DragDropFile.context-bbb7d631.js"),t=require("@testing-library/react"),i=require("../toArray-b56541b4.js"),n=require("../miranda-compatibility.theme-22a9ce26.js"),r=require("react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@loadsmart/miranda-tokens");var c=o(r);function a(e){return e.parentNode.parentNode.parentNode.parentNode}function d(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=a(i);t.queries.queryByRole(n,"menu")||(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(i),expect(yield t.queries.findByRole(n,"menu")).toBeInTheDocument()})))))}))}function u(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=a(i);t.queries.queryByRole(n,"menu")&&(yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.click(t.queries.getByText(n,"Close")),yield t.waitForElementToBeRemoved((()=>t.queries.queryByRole(n,"menu")))})))))}))}const l={getContainer:a,expand:d,collapse:u,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const r=a(n);yield d(n),yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){n.focus();const e=t.queries.getByLabelText(r,i);e&&"false"==e.getAttribute("aria-checked")&&t.fireEvent.click(e)})))),yield u(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const n=a(i);yield t.act((()=>e.__awaiter(this,void 0,void 0,(function*(){const e=t.queries.getByLabelText(n,"Clear selection");t.fireEvent.click(e)})))),yield u(i)}))},getSelectedDates:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=a(i);yield d(i);const n=t.queries.queryAllByRole(e,"checkbox",{checked:!0});return yield u(i),n}))}};function s(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.expand(t)}))}function f(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.collapse(t)}))}const v={getContainer:l.getContainer,expand:s,collapse:f,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=l.getContainer(n);yield s(n);const[r,o]=i;if(null!=r){const i=t.queries.getByTestId(e,"input-date-range-start");yield l.pick(r,i)}if(null!=o){const i=t.queries.getByTestId(e,"input-date-range-end");yield l.pick(o,i)}yield f(n)}))},clear:function(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.clear(t)}))},getSelectedDates:function(t){return e.__awaiter(this,void 0,void 0,(function*(){return l.getSelectedDates(t)}))}},y=e=>e.parentNode,p={dragOver:e=>{const i=y(e),n=t.createEvent.dragOver(i);t.fireEvent(i,n)},dragLeave:e=>{const i=y(e),n=t.createEvent.dragLeave(i);t.fireEvent(i,n)},dropFiles:(e,n)=>{const r=y(e),o=t.createEvent.drop(r);Object.defineProperty(o,"dataTransfer",{value:{files:i.toArray(n)}}),t.fireEvent(r,o)}};function _(e){return e.parentNode.parentNode.parentNode}function h(e){return e.parentNode.parentNode.nextSibling}function g(e){return e.parentNode.nextSibling.nextSibling}function w(e){return e.parentNode}function b(e){return 3===_(e).children.length}function x(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=w(i);t.within(e).queryByTestId("select-trigger-loading")&&(yield t.waitForElementToBeRemoved((()=>t.within(e).queryByTestId("select-trigger-loading")),{timeout:2500}))}))}function E(i){return e.__awaiter(this,void 0,void 0,(function*(){if(yield x(i),b(i))return;const n=g(i);yield t.waitFor((()=>{expect(n).toBeEnabled()})),t.act((()=>{i.dispatchEvent(new MouseEvent("click",{bubbles:!0}))})),yield t.waitFor((()=>e.__awaiter(this,void 0,void 0,(function*(){expect(yield t.within(_(i)).findByRole("listbox")).toBeInTheDocument()}))))}))}function B(i){return e.__awaiter(this,void 0,void 0,(function*(){if(!b(i))return;const e=g(i);t.fireEvent.click(e),yield t.waitFor((()=>{expect(t.within(_(i)).queryByRole("listbox")).not.toBeInTheDocument()}))}))}const q={select:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield E(n);const e=h(n),r=yield t.within(e).findByLabelText(i);r&&"false"==r.getAttribute("aria-selected")&&(t.fireEvent.mouseDown(r),t.act((()=>{r.focus()})),t.fireEvent.mouseUp(r),t.fireEvent.click(r)),yield B(n)}))},unselect:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield E(n);const e=h(n),r=yield t.within(e).findByLabelText(i);r&&"true"===r.getAttribute("aria-selected")&&t.fireEvent.click(r),yield B(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield x(i);const e=w(i),n=t.within(e).getByTestId("select-trigger-clear");n&&t.fireEvent.click(n)}))},search:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.change(n,{target:{value:i}}),yield x(n);const e=h(n);yield t.within(e).findAllByRole("option")}))},expand:E,collapse:B,getOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield E(i);const e=h(i),n=t.within(e).queryAllByRole("option");return yield B(i),n}))},getSelectedOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield E(i);const e=h(i);let n=[];try{n=yield t.within(e).findAllByRole("option",{selected:!0})}catch(e){n=[]}return yield B(i),n}))},isMenuExpanded:b};const m={fileList:[],onFilesAdded:jest.fn(),onRetryUpload:jest.fn(),onRemoveFile:jest.fn()};exports.DatePickerEvent=l,exports.DateRangePickerEvent=v,exports.DragDropFileEvent=p,exports.SelectEvent=q,exports.getInterpolatedStyles=function(e){return i.toArray(e).map((e=>{for(;n.isFunction(e);)e=e({theme:n.alice});return e})).join("")},exports.renderWithDragDropFileProvider=(i,n)=>{const r=Object.assign(Object.assign({},m),n);return t.render((o=i,c.default.createElement(e.DragDropFileContext.Provider,{value:r},o)));var o};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../DragDropFile.context-bbb7d631.js"),t=require("@testing-library/react"),i=require("../toArray-b56541b4.js"),n=require("../miranda-compatibility.theme-bb671a80.js"),r=require("react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@loadsmart/miranda-tokens");var c=o(r);function a(e){return e.parentNode.parentNode.parentNode.parentNode}function d(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=a(i);t.queries.queryByRole(e,"menu")||(t.fireEvent.click(i),yield t.waitFor((()=>{expect(t.queries.getByRole(e,"menu")).toBeInTheDocument()})))}))}function u(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=a(i);t.queries.queryByRole(e,"menu")&&(t.fireEvent.click(t.queries.getByText(e,"Close")),yield t.waitFor((()=>{expect(t.queries.queryByRole(e,"menu")).not.toBeInTheDocument()})))}))}const l={getContainer:a,expand:d,collapse:u,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=a(n);yield d(n),t.act((()=>{n.focus()}));const r=t.queries.getByLabelText(e,i);r&&"false"==r.getAttribute("aria-checked")&&t.fireEvent.click(r),yield u(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=a(i),n=t.queries.getByLabelText(e,"Clear selection");t.fireEvent.click(n),yield u(i)}))},getSelectedDates:function(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=a(i);yield d(i);const n=t.queries.queryAllByRole(e,"checkbox",{checked:!0});return yield u(i),n}))}};function s(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.expand(t)}))}function f(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.collapse(t)}))}const v={getContainer:l.getContainer,expand:s,collapse:f,pick:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){const e=l.getContainer(n);yield s(n);const[r,o]=i;if(null!=r){const i=t.queries.getByTestId(e,"input-date-range-start");yield l.pick(r,i)}if(null!=o){const i=t.queries.getByTestId(e,"input-date-range-end");yield l.pick(o,i)}yield f(n)}))},clear:function(t){return e.__awaiter(this,void 0,void 0,(function*(){yield l.clear(t)}))},getSelectedDates:function(t){return e.__awaiter(this,void 0,void 0,(function*(){return l.getSelectedDates(t)}))}},y=e=>e.parentNode,p={dragOver:e=>{const i=y(e),n=t.createEvent.dragOver(i);t.fireEvent(i,n)},dragLeave:e=>{const i=y(e),n=t.createEvent.dragLeave(i);t.fireEvent(i,n)},dropFiles:(e,n)=>{const r=y(e),o=t.createEvent.drop(r);Object.defineProperty(o,"dataTransfer",{value:{files:i.toArray(n)}}),t.fireEvent(r,o)}};function g(e){return e.parentNode.parentNode.parentNode}function h(e){return e.parentNode.parentNode.nextSibling}function _(e){return e.parentNode.nextSibling.nextSibling}function w(e){return e.parentNode}function b(e){return 3===g(e).children.length}function x(i){return e.__awaiter(this,void 0,void 0,(function*(){const e=w(i);t.within(e).queryByTestId("select-trigger-loading")&&(yield t.waitForElementToBeRemoved((()=>t.within(e).queryByTestId("select-trigger-loading")),{timeout:2500}))}))}function E(i){return e.__awaiter(this,void 0,void 0,(function*(){if(yield x(i),b(i))return;const e=_(i);yield t.waitFor((()=>{expect(e).toBeEnabled()})),t.act((()=>{i.dispatchEvent(new MouseEvent("click",{bubbles:!0}))})),yield t.waitFor((()=>{expect(t.within(g(i)).getByRole("listbox")).toBeInTheDocument()}))}))}function B(i){return e.__awaiter(this,void 0,void 0,(function*(){if(!b(i))return;const e=_(i);t.fireEvent.click(e),yield t.waitFor((()=>{expect(t.within(g(i)).queryByRole("listbox")).not.toBeInTheDocument()}))}))}const q={select:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield E(n);const e=h(n),r=yield t.within(e).findByLabelText(i);r&&"false"==r.getAttribute("aria-selected")&&(t.fireEvent.mouseDown(r),t.act((()=>{r.focus()})),t.fireEvent.mouseUp(r),t.fireEvent.click(r)),yield B(n)}))},unselect:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){yield E(n);const e=h(n),r=yield t.within(e).findByLabelText(i);r&&"true"===r.getAttribute("aria-selected")&&t.fireEvent.click(r),yield B(n)}))},clear:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield x(i);const e=w(i),n=t.within(e).getByTestId("select-trigger-clear");n&&t.fireEvent.click(n)}))},search:function(i,n){return e.__awaiter(this,void 0,void 0,(function*(){t.fireEvent.change(n,{target:{value:i}}),yield x(n);const e=h(n);yield t.within(e).findAllByRole("option")}))},expand:E,collapse:B,getOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield E(i);const e=h(i),n=t.within(e).queryAllByRole("option");return yield B(i),n}))},getSelectedOptions:function(i){return e.__awaiter(this,void 0,void 0,(function*(){yield E(i);const e=h(i);let n=[];try{n=yield t.within(e).findAllByRole("option",{selected:!0})}catch(e){n=[]}return yield B(i),n}))},isMenuExpanded:b};const m={fileList:[],onFilesAdded:jest.fn(),onRetryUpload:jest.fn(),onRemoveFile:jest.fn()};exports.DatePickerEvent=l,exports.DateRangePickerEvent=v,exports.DragDropFileEvent=p,exports.SelectEvent=q,exports.getInterpolatedStyles=function(e){return i.toArray(e).map((e=>{for(;n.isFunction(e);)e=e({theme:n.alice});return e})).join("")},exports.renderWithDragDropFileProvider=(i,n)=>{const r=Object.assign(Object.assign({},m),n);return t.render((o=i,c.default.createElement(e.DragDropFileContext.Provider,{value:r},o)));var o};
 //# sourceMappingURL=index.js.map

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, waitForElementToBeRemoved } from '@testing-library/react'\n\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  await act(async () => {\n    fireEvent.click(input)\n\n    expect(await queries.findByRole(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  await act(async () => {\n    fireEvent.click(queries.getByText(datePickerContainer, 'Close'))\n\n    await waitForElementToBeRemoved(() => queries.queryByRole(datePickerContainer, 'menu'))\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  await act(async () => {\n    input.focus()\n\n    const dayElement = queries.getByLabelText(datePickerContainer, day)\n\n    if (dayElement && dayElement.getAttribute('aria-checked') == 'false') {\n      fireEvent.click(dayElement)\n    }\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  await act(async () => {\n    const clearButton = queries.getByLabelText(datePickerContainer, 'Clear selection')\n\n    fireEvent.click(clearButton)\n  })\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(async () => {\n    expect(await within(getSelectContainer(input)).findByRole('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","act","__awaiter","this","fireEvent","click","expect","findByRole","toBeInTheDocument","collapse","getByText","waitForElementToBeRemoved","datePickerEvent","getContainer","day","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","timeout","triggerHandle","waitFor","toBeEnabled","dispatchEvent","MouseEvent","bubbles","not","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-22a9ce26.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 a=e.isFunction(t)?t(r):t;return r.theme[a]}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-bb671a80.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 a=e.isFunction(t)?t(r):t;return r.theme[a]}exports.Themes=t,exports.getToken=function(e,t){return void 0===t?t=>r(e,t):r(e,t)};
 //# sourceMappingURL=index.js.map

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-201ffe28.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-22a9ce26.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-e569d46a.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-bb671a80.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "6.4.0",
+	"version": "7.0.1",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [

package/src/components/Table/Table.stories.tsx

@@ -518,45 +518,45 @@ export function WithExpandableRow(args: TableProps): JSX.Element {
 
   return (
     <div className="p-4 bg-neutral-white">
-      <Table withExpandableRows {...args}>
-        <Table.Expandable.Head>
+      <Table {...args}>
+        <Table.Head>
           <Table.Row>
-            <Table.Expandable.HeadCell />
-            <Table.Expandable.HeadCell>reference</Table.Expandable.HeadCell>
-            <Table.Expandable.HeadCell>product</Table.Expandable.HeadCell>
-            <Table.Expandable.HeadCell>price</Table.Expandable.HeadCell>
+            <Table.HeadCell />
+            <Table.HeadCell>reference</Table.HeadCell>
+            <Table.HeadCell>product</Table.HeadCell>
+            <Table.HeadCell>price</Table.HeadCell>
           </Table.Row>
-        </Table.Expandable.Head>
+        </Table.Head>
 
         <Table.Body>
-          <Table.Expandable.Row
+          <Table.ExpandableRow
             leading={leading}
             expandableContent={<div>Forced expanded with custom leading</div>}
             expanded
           >
-            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
-            <Table.Expandable.Cell>Body 1</Table.Expandable.Cell>
-            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
-          </Table.Expandable.Row>
-          <Table.Expandable.Row
+            <Table.Cell>123456</Table.Cell>
+            <Table.Cell>Body 1</Table.Cell>
+            <Table.Cell>12345</Table.Cell>
+          </Table.ExpandableRow>
+          <Table.ExpandableRow
             leading={leading}
             expandableContent={<div>Initial expanded row with custom leading</div>}
             initialExpanded
           >
-            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
-            <Table.Expandable.Cell>Body 2</Table.Expandable.Cell>
-            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
-          </Table.Expandable.Row>
-          <Table.Expandable.Row expandableContent={<div>Expandable row</div>}>
-            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
-            <Table.Expandable.Cell>Body 3</Table.Expandable.Cell>
-            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
-          </Table.Expandable.Row>
-          <Table.Expandable.Row expanded>
-            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
-            <Table.Expandable.Cell>Body 5</Table.Expandable.Cell>
-            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
-          </Table.Expandable.Row>
+            <Table.Cell>123456</Table.Cell>
+            <Table.Cell>Body 2</Table.Cell>
+            <Table.Cell>12345</Table.Cell>
+          </Table.ExpandableRow>
+          <Table.ExpandableRow expandableContent={<div>Expandable row</div>}>
+            <Table.Cell>123456</Table.Cell>
+            <Table.Cell>Body 3</Table.Cell>
+            <Table.Cell>12345</Table.Cell>
+          </Table.ExpandableRow>
+          <Table.ExpandableRow expanded>
+            <Table.Cell>123456</Table.Cell>
+            <Table.Cell>Body 5</Table.Cell>
+            <Table.Cell>12345</Table.Cell>
+          </Table.ExpandableRow>
         </Table.Body>
       </Table>
     </div>

package/src/components/Table/Table.test.tsx

@@ -183,21 +183,21 @@ describe('<Table />', () => {
     expect(checkboxes[1]).toBeChecked()
   })
 
-  it('Table.Expandable renders correclty', () => {
+  it('Table.ExpandableRow renders correclty', () => {
     const onExpandedChange = jest.fn()
 
     const expandableTable = ({ controlledExpanded4 }: { controlledExpanded4: boolean }) => (
       <React.Fragment>
         <Table.Head>
           <Table.Row>
-            <Table.Expandable.HeadCell />
+            <Table.HeadCell />
             <Table.HeadCell># Number</Table.HeadCell>
             <Table.HeadCell>Company</Table.HeadCell>
             <Table.HeadCell alignment="right">Price $</Table.HeadCell>
           </Table.Row>
         </Table.Head>
         <Table.Body>
-          <Table.Expandable.Row
+          <Table.ExpandableRow
             expandableContent={<div>This is an expandable content on index 0</div>}
             expanded
           >
@@ -206,15 +206,15 @@ describe('<Table />', () => {
             <Table.Cell format="currency" alignment="right">
               $9876,50
             </Table.Cell>
-          </Table.Expandable.Row>
-          <Table.Expandable.Row>
+          </Table.ExpandableRow>
+          <Table.ExpandableRow>
             <Table.Cell format="number">#000000-2</Table.Cell>
             <Table.Cell>Modal X 21</Table.Cell>
             <Table.Cell format="currency" alignment="right">
               $9876,50
             </Table.Cell>
-          </Table.Expandable.Row>
-          <Table.Expandable.Row
+          </Table.ExpandableRow>
+          <Table.ExpandableRow
             expandableContent={<div>This is an expandable content on index 2</div>}
             leading={(expanded) => (expanded ? 'open' : 'closed')}
             onExpandedChange={onExpandedChange}
@@ -224,8 +224,8 @@ describe('<Table />', () => {
             <Table.Cell format="currency" alignment="right">
               $9876,50
             </Table.Cell>
-          </Table.Expandable.Row>
-          <Table.Expandable.Row
+          </Table.ExpandableRow>
+          <Table.ExpandableRow
             expandableContent={<div>This is an expandable content on index 3</div>}
             expanded={controlledExpanded4}
           >
@@ -234,7 +234,7 @@ describe('<Table />', () => {
             <Table.Cell format="currency" alignment="right">
               $9876,50
             </Table.Cell>
-          </Table.Expandable.Row>
+          </Table.ExpandableRow>
         </Table.Body>
       </React.Fragment>
     )

package/src/components/Table/Table.tsx

@@ -36,7 +36,6 @@ import type {
   TablePickerItemProps,
   TablePickerProps,
   ExpandableTableRowProps,
-  TableHeadCellProps,
 } from './Table.types'
 
 const StyledTableBody = styled.tbody`
@@ -83,7 +82,6 @@ const StyledTableCell = styled.td<{ alignment?: string; format?: string }>`
 const StyledTableHeadCell = styled.th<{
   alignment?: string
   clickable: boolean
-  capitalized?: boolean
 }>`
   ${StyledCell}
 
@@ -91,10 +89,7 @@ const StyledTableHeadCell = styled.th<{
 
   font-weight: ${token('font-weight-bold')};
 
-  text-transform: ${conditional({
-    uppercase: whenProps({ capitalized: false }),
-    capitalize: whenProps({ capitalized: true }),
-  })};
+  text-transform: capitalize;
 
   cursor: ${conditional({
     pointer: whenProps({ clickable: true }),
@@ -103,17 +98,6 @@ const StyledTableHeadCell = styled.th<{
 `
 
 const StyledTableHead = styled.thead`
-  box-shadow: 0 1px 0 ${token('color-neutral')};
-
-  ${StyledTableCell} {
-    padding: ${token('space-s')};
-
-    font-weight: ${token('font-weight-bold')};
-    text-transform: uppercase;
-  }
-`
-
-const StyledExpandableTableHead = styled.thead`
   border: 1px solid ${token('color-neutral-lighter')};
 
   ${StyledTableCell} {
@@ -124,43 +108,24 @@ const StyledExpandableTableHead = styled.thead`
   }
 `
 
-const BaseStyledTableRow = styled.tr`
+const StyledTableRow = styled.tr<{ selected: boolean; isExpanded: boolean }>`
   ${StyledTableHead} > & {
-    height: 36px;
-
-    background-color: ${token('color-neutral-white')};
+    background-color: ${token('color-neutral-lightest')};
   }
 
-  ${StyledTableBody} > & {
-    ${hoverable`
-    outline: 1px solid ${token('color-accent')};
-  `}
-
-    ${focusable`
-    box-shadow: inset ${token('shadow-glow-primary')};
-  `}
+  ${StyledTableFoot} > & {
+    background-color: ${token('color-neutral-lightest')};
   }
-`
 
-const StyledTableRow = styled(BaseStyledTableRow)<{ selected?: boolean }>`
   background-color: ${conditional({
     'table-row-selected-color': whenProps({ selected: true }),
-    'color-transparent': whenProps({ selected: false }),
+    'color-neutral-white': whenProps({ selected: false }),
   })};
-
-  ${StyledTableBody} > & {
-    &:nth-child(odd) ${StyledTableCell} {
-      background: ${token('table-row-variant-color')};
-    }
-
-    &:nth-child(even) ${StyledTableCell} {
-      background: ${token('color-transparent')};
-    }
-  }
-`
-
-const StyledExpandableTableRow = styled.tr<{ $isExpanded: boolean }>`
-  background-color: ${token('color-neutral-white')};
+  ${hoverable`
+    background-color: ${conditional({
+      'table-row-selected-color': whenProps({ selected: true }),
+    })} !important;
+  `}
 
   border-color: ${token('color-neutral-lighter')};
   border-width: 1px;
@@ -168,22 +133,24 @@ const StyledExpandableTableRow = styled.tr<{ $isExpanded: boolean }>`
   border-right-style: solid;
   border-left-style: solid;
   border-bottom-style: ${conditional({
-    solid: whenProps({ $isExpanded: false }),
-    hidden: whenProps({ $isExpanded: true }),
+    solid: whenProps({ isExpanded: false }),
+    hidden: whenProps({ isExpanded: true }),
   })};
 
   box-shadow: ${conditional({
-    '0px 3px 3px 0px #C1CED9': whenProps({ $isExpanded: true }),
-    none: whenProps({ $isExpanded: false }),
+    '0px 3px 3px 0px #C1CED9': whenProps({ isExpanded: true }),
+    none: whenProps({ isExpanded: false }),
   })};
 
-  ${hoverable`
-    background-color: ${token('color-neutral-lighter')};
-  `}
+  ${StyledTableBody} > & {
+    ${hoverable`
+      background-color: ${token('color-neutral-lighter')};
+    `}
 
-  ${focusable`
-    box-shadow: inset ${token('shadow-glow-primary')};
-  `}
+    ${focusable`
+      box-shadow: inset ${token('shadow-glow-primary')};
+    `}
+  }
 `
 
 const StyledExpandableContentRow = styled.tr`
@@ -195,20 +162,16 @@ const StyledExpandableContentRow = styled.tr`
   border-bottom-style: solid;
 `
 
-const StyledTable = styled.table<{ scale?: string; withExpandableRows?: boolean }>`
+const StyledTable = styled.table<{ scale?: string }>`
   width: 100%;
 
   white-space: nowrap;
 
-  background-color: ${conditional({
-    'color-neutral-lightest': whenProps({ withExpandableRows: true }),
-    'color-neutral-white': whenProps({ withExpandableRows: false }),
-  })};
+  background-color: ${token('color-neutral-lightest')};
 
   border-collapse: collapse;
 
-  ${StyledTableBody} ${StyledTableRow},
-  ${StyledTableBody} ${StyledExpandableTableRow} {
+  ${StyledTableBody} ${StyledTableRow} {
     height: ${conditional({
       '24px': whenProps({ scale: 'small' }),
       '48px': whenProps({ scale: 'default' }),
@@ -240,14 +203,13 @@ function Table<T>({
   children,
   selection,
   scale = 'default',
-  withExpandableRows,
   ...others
 }: TableProps<T>): JSX.Element {
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     <TableSelectionProvider selection={selection}>
-      <StyledTable scale={scale} withExpandableRows={withExpandableRows} {...others}>
+      <StyledTable scale={scale} {...others}>
         {children}
       </StyledTable>
     </TableSelectionProvider>
@@ -273,10 +235,6 @@ function TableHead({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableHead {...others}>{children}</StyledTableHead>
 }
 
-function ExpandableTableHead({ children, ...others }: TableSectionProps): JSX.Element {
-  return <StyledExpandableTableHead {...others}>{children}</StyledExpandableTableHead>
-}
-
 function TableBody({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableBody {...others}>{children}</StyledTableBody>
 }
@@ -344,19 +302,11 @@ function SelectionHeadCell<T>(props: SelectionCellProps<T>): JSX.Element {
   )
 }
 
-function ExpandableHeadCell(props: TableHeadCellProps): JSX.Element {
-  return <TableHeadCell capitalized {...props} />
-}
-
-function ExpandableCell(props: TableCellProps): JSX.Element {
-  return <TableCell {...props} />
-}
-
 function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   const selected = useIsRowSelected(children)
 
   return (
-    <StyledTableRow {...others} selected={selected}>
+    <StyledTableRow {...others} selected={selected} isExpanded={false}>
       {children}
     </StyledTableRow>
   )
@@ -373,6 +323,8 @@ function ExpandableTableRow({
 }: ExpandableTableRowProps): JSX.Element {
   const [openState, setOpenState] = useState(initialExpanded)
 
+  const selected = useIsRowSelected(children)
+
   const open = expanded ?? openState
   const isExpanded = Boolean(open && expandableContent)
   const colSpan = Array.isArray(children) ? children.length + 1 : 1
@@ -391,10 +343,10 @@ function ExpandableTableRow({
 
   return (
     <>
-      <StyledExpandableTableRow {...others} onClick={toggle} $isExpanded={isExpanded}>
-        <ExpandableCell>{expandableContent && leading}</ExpandableCell>
+      <StyledTableRow {...others} onClick={toggle} isExpanded={isExpanded} selected={selected}>
+        <TableCell>{expandableContent && leading}</TableCell>
         {children}
-      </StyledExpandableTableRow>
+      </StyledTableRow>
       {isExpanded && (
         <StyledExpandableContentRow>
           <StyledTableCell colSpan={colSpan}>{expandableContent}</StyledTableCell>
@@ -408,15 +360,13 @@ function TableHeadCell({
   alignment = 'left',
   children,
   onClick,
-  capitalized = false,
   ...others
-}: TableHeadCellProps): JSX.Element {
+}: TableCellProps): JSX.Element {
   return (
     <StyledTableHeadCell
       clickable={onClick != null}
       alignment={alignment}
       onClick={onClick}
-      capitalized={capitalized}
       {...others}
     >
       <Layout.Group space="xs" align="center">
@@ -563,12 +513,7 @@ Table.Selection = {
   Cell: SelectionCell,
   HeadCell: SelectionHeadCell,
 }
-Table.Expandable = {
-  Head: ExpandableTableHead,
-  HeadCell: ExpandableHeadCell,
-  Cell: ExpandableCell,
-  Row: ExpandableTableRow,
-}
+Table.ExpandableRow = ExpandableTableRow
 Table.SortHandle = TableSortHandle
 TablePicker.Item = TablePickerItem
 Table.Picker = TablePicker