@economic/taco 2.54.0 → 2.55.0-settings.0

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js

@@ -1,82 +1,60 @@
-import { forwardRef, createElement } from 'react';
+import { forwardRef, createElement, Fragment } from 'react';
 import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
-import { Root, Indicator } from '@radix-ui/react-checkbox';
-import { useId } from '../../hooks/useId.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import { Spinner } from '../Spinner/Spinner.js';
 
 const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   const {
     checked,
+    className,
+    defaultChecked,
     indeterminate,
+    readOnly,
     invalid,
-    label,
-    loading,
+    disabled,
+    required,
     onChange,
+    loading,
+    label,
+    onClick,
     ...otherProps
   } = props;
-  const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+  // Converts the forwarded ref to an object ref, as required by RAC Checkbox.
+  const inputRef = useMergedRef(ref);
+  const checkboxContainerClassName = cn('group flex justify-center gap-2 data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
+  // Styling for other complex, state-driven scenarios is managed directly within the styles.css file.
+  const checkboxClassName = cn('bg-white h-5 w-5 border rounded text-sm flex flex-shrink-0 text-white cursor-pointer', {
     'self-start': !!label,
     'mt-[0.1rem]': !label
-  }, invalid ? {
-    'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
-    'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
-  } : {
-    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
-    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
-  }, props.className);
-  let handleChange;
-  if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
-  }
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  // the enter keyboard shortcut isn't supported by default, but we want it
-  const handleKeyDown = event => {
-    if (event.key === 'Enter') {
-      event.currentTarget.click();
-    }
-  };
-  const spinnerClassname = cn(
-  //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
-  "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
-    'text-blue-500': !checked && !indeterminate
-  });
-  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
-    "aria-invalid": invalid ? 'true' : undefined,
+  }, className);
+  return /*#__PURE__*/createElement(Checkbox$1, Object.assign({}, otherProps, {
+    className: checkboxContainerClassName,
+    "data-taco": "checkbox-container",
+    defaultSelected: defaultChecked,
+    isDisabled: disabled,
+    isIndeterminate: indeterminate,
+    isInvalid: invalid,
+    isRequired: required,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    inputRef: inputRef,
+    onChange: onChange
+  }), ({
+    isIndeterminate,
+    isSelected
+  }) => (/*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("span", {
+    className: checkboxClassName,
     "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: handleChange,
-    onKeyDown: handleKeyDown,
-    ref: ref
-  }), loading ? (/*#__PURE__*/createElement(Spinner, {
-    className: spinnerClassname
-  })) : (/*#__PURE__*/createElement(Indicator, {
-    className: "flex h-full w-full"
-  }, /*#__PURE__*/createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
+    onClick: onClick
+  }, loading ? (/*#__PURE__*/createElement(Spinner, {
+    className: "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))] text-blue-500 group-data-[indeterminate]:text-white group-data-[selected]:text-white"
+  })) : (isIndeterminate || isSelected) && (/*#__PURE__*/createElement(Icon, {
+    "aria-hidden": true,
+    name: isIndeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  }))));
-  if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "checkbox-container"
-    }, element, /*#__PURE__*/createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
+  }))), label)));
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n            'mt-[0.1rem]': !label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,qHAAqH,EACrH;IACI,YAAY,EAAE,CAAC,CAACP,KAAK;IACrB,aAAa,EAAE,CAACA;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Checkbox as CheckboxPrimitive, CheckboxProps as CheckboxPrimitiveProps } from 'react-aria-components';\n\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport './styles.css';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<\n    CheckboxPrimitiveProps,\n    'onChange' | 'isDisabled' | 'isIndeterminate' | 'isInvalid' | 'isRequired' | 'isSelected' | 'isReadOnly' | 'defaultSelected'\n> & {\n    disabled?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in a read only state */\n    readOnly?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLInputElement>) {\n    const {\n        checked,\n        className,\n        defaultChecked,\n        indeterminate,\n        readOnly,\n        invalid,\n        disabled,\n        required,\n        onChange,\n        loading,\n        label,\n        onClick,\n        ...otherProps\n    } = props;\n    // Converts the forwarded ref to an object ref, as required by RAC Checkbox.\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n\n    const checkboxContainerClassName = cn(\n        'group flex justify-center gap-2 data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed'\n    );\n\n    // Styling for other complex, state-driven scenarios is managed directly within the styles.css file.\n    const checkboxClassName = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex flex-shrink-0 text-white cursor-pointer',\n        {\n            'self-start': !!label,\n            'mt-[0.1rem]': !label,\n        },\n        className\n    );\n\n    return (\n        <CheckboxPrimitive\n            {...otherProps}\n            className={checkboxContainerClassName}\n            data-taco=\"checkbox-container\"\n            defaultSelected={defaultChecked}\n            isDisabled={disabled}\n            isIndeterminate={indeterminate}\n            isInvalid={invalid}\n            isRequired={required}\n            isReadOnly={readOnly}\n            isSelected={checked}\n            inputRef={inputRef}\n            onChange={onChange}>\n            {({ isIndeterminate, isSelected }) => (\n                <>\n                    <span className={checkboxClassName} data-taco=\"checkbox\" onClick={onClick}>\n                        {loading ? (\n                            <Spinner className=\"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))] text-blue-500 group-data-[indeterminate]:text-white group-data-[selected]:text-white\" />\n                        ) : (\n                            (isIndeterminate || isSelected) && (\n                                <Icon aria-hidden name={isIndeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                            )\n                        )}\n                    </span>\n                    {label}\n                </>\n            )}\n        </CheckboxPrimitive>\n    );\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","className","defaultChecked","indeterminate","readOnly","invalid","disabled","required","onChange","loading","label","onClick","otherProps","inputRef","useMergedRef","checkboxContainerClassName","cn","checkboxClassName","CheckboxPrimitive","defaultSelected","isDisabled","isIndeterminate","isInvalid","isRequired","isReadOnly","isSelected","Spinner","Icon","name","displayName"],"mappings":";;;;;;;MAiDaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IACFC,OAAO;IACPC,SAAS;IACTC,cAAc;IACdC,aAAa;IACbC,QAAQ;IACRC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,KAAK;IACLC,OAAO;IACP,GAAGC;GACN,GAAGd,KAAK;;EAET,MAAMe,QAAQ,GAAGC,YAAY,CAAmBf,GAAG,CAAC;EAEpD,MAAMgB,0BAA0B,GAAGC,EAAE,CACjC,kGAAkG,CACrG;;EAGD,MAAMC,iBAAiB,GAAGD,EAAE,CACxB,sFAAsF,EACtF;IACI,YAAY,EAAE,CAAC,CAACN,KAAK;IACrB,aAAa,EAAE,CAACA;GACnB,EACDT,SAAS,CACZ;EAED,oBACIJ,cAACqB,UAAiB,oBACVN,UAAU;IACdX,SAAS,EAAEc,0BAA0B;iBAC3B,oBAAoB;IAC9BI,eAAe,EAAEjB,cAAc;IAC/BkB,UAAU,EAAEd,QAAQ;IACpBe,eAAe,EAAElB,aAAa;IAC9BmB,SAAS,EAAEjB,OAAO;IAClBkB,UAAU,EAAEhB,QAAQ;IACpBiB,UAAU,EAAEpB,QAAQ;IACpBqB,UAAU,EAAEzB,OAAO;IACnBa,QAAQ,EAAEA,QAAQ;IAClBL,QAAQ,EAAEA;MACT,CAAC;IAAEa,eAAe;IAAEI;GAAY,mBAC7B5B,2CACIA;IAAMI,SAAS,EAAEgB,iBAAiB;iBAAY,UAAU;IAACN,OAAO,EAAEA;KAC7DF,OAAO,iBACJZ,cAAC6B,OAAO;IAACzB,SAAS,EAAC;IAAqK,IAExL,CAACoB,eAAe,IAAII,UAAU,mBAC1B5B,cAAC8B,IAAI;;IAAaC,IAAI,EAAEP,eAAe,GAAG,MAAM,GAAG,MAAM;IAAEpB,SAAS,EAAC;IAAoB,CAEhG,CACE,EACNS,KAAK,CACP,CACN,CACe;AAE5B,CAAC;AACDd,QAAQ,CAACiC,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/List/components/Toggle.js

@@ -58,13 +58,18 @@ const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, ref
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:bg-grey-700',
+  // When ToggleItem is hovered and switch inside it is selected
+  'group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Switch$1, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: switchRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -85,13 +90,18 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef(function Switch(props, r
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:border-grey-700',
+  // When ToggleItem is hovered and checkbox inside it is selected
+  'group-hover/toggle:group-data-[selected]:border-blue-700 group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Checkbox$1, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: checkboxRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,

package/dist/esm/packages/taco/src/components/List/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: JSX.Element;\n    controlRef: React.RefObject<HTMLButtonElement>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const switchRef = React.useRef<HTMLButtonElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const checkboxRef = React.useRef<HTMLButtonElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["ToggleItem","React","forwardRef","Toggle","props","ref","controlRef","onToggle","attributes","handleClick","event","onClick","isDefaultPrevented","target","current","_controlRef$current","contains","handleKeyDown","onKeyDown","key","_controlRef$current2","className","cn","Item","Switch","checked","externalChecked","onChange","setChecked","useState","switchRef","useRef","toggle","useCallback","control","TacoSwitch","disabled","tabIndex","Checkbox","checkboxRef","TacoCheckbox"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","sources":["../../../../../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const controlClassName = cn(\n        // When ToggleItem is hovered\n        'group-hover/toggle:bg-grey-700',\n        // When ToggleItem is hovered and switch inside it is selected\n        'group-hover/toggle:group-data-[selected]:bg-blue-700'\n    );\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className={controlClassName}\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            excludeFromTabOrder\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const controlClassName = cn(\n        // When ToggleItem is hovered\n        'group-hover/toggle:border-grey-700',\n        // When ToggleItem is hovered and checkbox inside it is selected\n        'group-hover/toggle:group-data-[selected]:border-blue-700 group-hover/toggle:group-data-[selected]:bg-blue-700'\n    );\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className={controlClassName}\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            excludeFromTabOrder\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["ToggleItem","React","forwardRef","Toggle","props","ref","controlRef","onToggle","attributes","handleClick","event","onClick","isDefaultPrevented","target","current","_controlRef$current","contains","handleKeyDown","onKeyDown","key","_controlRef$current2","className","cn","Item","Switch","checked","externalChecked","onChange","setChecked","useState","switchRef","useRef","toggle","useCallback","controlClassName","control","TacoSwitch","disabled","excludeFromTabOrder","Checkbox","checkboxRef","TacoCheckbox"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js

@@ -155,10 +155,13 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
   // so need to be taken out of screen reader scope.
   , {
     "aria-hidden": true,
-    tabIndex: -1,
+    excludeFromTabOrder: true,
     checked: optionProps['aria-selected'],
-    onChange: () => null,
-    className: "pointer-events-none ml-2 self-center p-px"
+    onChange: () => {
+      var _optionProps$ref, _optionProps$ref$curr;
+      (_optionProps$ref = optionProps.ref) === null || _optionProps$ref === void 0 ? void 0 : (_optionProps$ref$curr = _optionProps$ref.current) === null || _optionProps$ref$curr === void 0 ? void 0 : _optionProps$ref$curr.click();
+    },
+    className: "ml-2 self-center p-px"
   }))))) : (/*#__PURE__*/createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/createElement("span", null, texts.listbox.empty))));

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                excludeFromTabOrder\n                                checked={optionProps['aria-selected']}\n                                onChange={() => {\n                                    optionProps.ref?.current?.click();\n                                }}\n                                className=\"ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","excludeFromTabOrder","checked","_optionProps$ref","_optionProps$ref$curr","click","empty"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js

@@ -1,24 +1,46 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
-import { Root, Thumb } from '@radix-ui/react-switch';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Switch } from 'react-aria-components';
 
 const ModeSwitch = /*#__PURE__*/forwardRef(function ModeSwitch(props, ref) {
   const {
+    checked,
+    defaultChecked,
+    readOnly,
     onChange,
+    disabled,
+    className,
     ...otherProps
   } = props;
-  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
-  }, props.className);
-  return /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "mode",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/createElement(Thumb, {
-    className: "pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+  const inputRef = useMergedRef(ref);
+  const switchClassName = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex p-1 cursor-pointer bg-grey-500', 'data-[focus-visible]:yt-focus', 'hover:bg-grey-700',
+  // When modeswitch is selected
+  'data-[selected]:bg-blue-500',
+  // When modeswitch is selected and hovered
+  'hover:data-[selected]:bg-blue-700',
+  // When modeswitch is disabled
+  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-grey-500 ',
+  // When modeswitch is disabled and selected
+  'data-[disabled]:data-[selected]:!bg-blue-500', className);
+  const switchThumbClassName = cn('pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform',
+  // When modeswitch is disabled
+  'group-data-[disabled]:opacity-50',
+  // When modeswitch is selected
+  'group-data-[selected]:translate-x-full');
+  return /*#__PURE__*/createElement(Switch, Object.assign({}, otherProps, {
+    className: switchClassName,
+    defaultSelected: defaultChecked,
+    id: otherProps.id,
+    inputRef: inputRef,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    onChange: onChange
+  }), /*#__PURE__*/createElement("span", {
+    className: switchThumbClassName,
+    "data-taco": "mode"
   }, /*#__PURE__*/createElement(Icon, {
     name: "edit-simple",
     className: "pointer-events-none !h-5 !w-5"

package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\nimport { Icon } from '../Icon/Icon';\n\ntype ModeSwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1',\n        {\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled,\n        },\n        props.className\n    );\n\n    return (\n        <PrimitiveSwitch.Root {...otherProps} className={className} data-taco=\"mode\" onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n                <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n            </PrimitiveSwitch.Thumb>\n        </PrimitiveSwitch.Root>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","onChange","otherProps","className","cn","disabled","PrimitiveSwitch","onCheckedChange","Icon","name","displayName"],"mappings":";;;;;MA4BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAiC;EACpH,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAEzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF;IACI,uFAAuF,EAAE,CAACL,KAAK,CAACM,QAAQ;IACxG,oEAAoE,EAAEN,KAAK,CAACM;GAC/E,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACQ,IAAoB,oBAAKJ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACI,eAAe,EAAEN,QAAQ;IAAED,GAAG,EAAEA;mBACzGF,cAACQ,KAAqB;IAACH,SAAS,EAAC;kBAC7BL,cAACU,IAAI;IAACC,IAAI,EAAC,aAAa;IAACN,SAAS,EAAC;IAAkC,CACjD,CACL;AAE/B,CAAC;AACDN,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Switch as SwitchPrimitive, SwitchProps as SwitchPrimitiveProps } from 'react-aria-components';\n\nimport { Icon } from '../Icon/Icon';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype ModeSwitchBaseProps = Omit<\n    SwitchPrimitiveProps,\n    'onChange' | 'label' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'defaultSelected' | 'isInvalid'\n> & {\n    disabled?: boolean;\n    readOnly?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    checked: boolean;\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, readOnly, onChange, disabled, className, ...otherProps } = props;\n\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n\n    const switchClassName = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex p-1 cursor-pointer bg-grey-500',\n        'data-[focus-visible]:yt-focus',\n        'hover:bg-grey-700',\n        // When modeswitch is selected\n        'data-[selected]:bg-blue-500',\n        // When modeswitch is selected and hovered\n        'hover:data-[selected]:bg-blue-700',\n        // When modeswitch is disabled\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-grey-500 ',\n        // When modeswitch is disabled and selected\n        'data-[disabled]:data-[selected]:!bg-blue-500',\n        className\n    );\n\n    const switchThumbClassName = cn(\n        'pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform',\n        // When modeswitch is disabled\n        'group-data-[disabled]:opacity-50',\n        // When modeswitch is selected\n        'group-data-[selected]:translate-x-full'\n    );\n\n    return (\n        <SwitchPrimitive\n            {...otherProps}\n            className={switchClassName}\n            defaultSelected={defaultChecked}\n            id={otherProps.id}\n            inputRef={inputRef}\n            isDisabled={disabled}\n            isReadOnly={readOnly}\n            isSelected={checked}\n            onChange={onChange}>\n            <span className={switchThumbClassName} data-taco=\"mode\">\n                <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n            </span>\n        </SwitchPrimitive>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","checked","defaultChecked","readOnly","onChange","disabled","className","otherProps","inputRef","useMergedRef","switchClassName","cn","switchThumbClassName","SwitchPrimitive","defaultSelected","id","isDisabled","isReadOnly","isSelected","Icon","name","displayName"],"mappings":";;;;;;MA8BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,OAAO;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAEjG,MAAMS,QAAQ,GAAGC,YAAY,CAAmBT,GAAG,CAAC;EAEpD,MAAMU,eAAe,GAAGC,EAAE,CACtB,2FAA2F,EAC3F,+BAA+B,EAC/B,mBAAmB;;EAEnB,6BAA6B;;EAE7B,mCAAmC;;EAEnC,4FAA4F;;EAE5F,8CAA8C,EAC9CL,SAAS,CACZ;EAED,MAAMM,oBAAoB,GAAGD,EAAE,CAC3B,+HAA+H;;EAE/H,kCAAkC;;EAElC,wCAAwC,CAC3C;EAED,oBACIb,cAACe,MAAe,oBACRN,UAAU;IACdD,SAAS,EAAEI,eAAe;IAC1BI,eAAe,EAAEZ,cAAc;IAC/Ba,EAAE,EAAER,UAAU,CAACQ,EAAE;IACjBP,QAAQ,EAAEA,QAAQ;IAClBQ,UAAU,EAAEX,QAAQ;IACpBY,UAAU,EAAEd,QAAQ;IACpBe,UAAU,EAAEjB,OAAO;IACnBG,QAAQ,EAAEA;mBACVN;IAAMQ,SAAS,EAAEM,oBAAoB;iBAAY;kBAC7Cd,cAACqB,IAAI;IAACC,IAAI,EAAC,aAAa;IAACd,SAAS,EAAC;IAAkC,CAClE,CACO;AAE1B,CAAC;AACDT,UAAU,CAACwB,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/packages/taco/src/components/Provider/Provider.js

@@ -1,18 +1,25 @@
-import { createContext, useMemo, createElement } from 'react';
+import { useMemo, createElement } from 'react';
 import { Provider as Provider$1 } from '@radix-ui/react-tooltip';
 import { LocalizationProvider } from './Localization.js';
 import { ToastProvider } from '../Toast/Toaster.js';
+import { TacoContext } from './TacoContext.js';
+import { useTacoSettings } from './useTacoSettings.js';
 
-const TacoContext = /*#__PURE__*/createContext({
-  uniqueUserIdentifier: ''
-});
 const Provider = props => {
   const {
     children,
     localization,
-    settings
+    loadSetting,
+    saveSetting,
+    userId
   } = props;
-  const context = useMemo(() => settings, [JSON.stringify(settings)]);
+  const settings = useTacoSettings(loadSetting, saveSetting);
+  const context = useMemo(() => {
+    return {
+      settings,
+      userId
+    };
+  }, []);
   return /*#__PURE__*/createElement(LocalizationProvider, {
     localization: localization
   }, /*#__PURE__*/createElement(TacoContext.Provider, {
@@ -20,5 +27,5 @@ const Provider = props => {
   }, /*#__PURE__*/createElement(Provider$1, null, /*#__PURE__*/createElement(ToastProvider, null, children))));
 };
 
-export { Provider, TacoContext };
+export { Provider };
 //# sourceMappingURL=Provider.js.map

package/dist/esm/packages/taco/src/components/Provider/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sources":["../../../../../../../src/components/Provider/Provider.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as Tooltip from '@radix-ui/react-tooltip';\nimport { ToastProvider } from '../Toast/Toaster';\nimport { Localization, LocalizationProvider } from './Localization';\n\nexport type TacoSettings = {\n    uniqueUserIdentifier: string;\n};\n\nexport const TacoContext = React.createContext<TacoSettings>({\n    uniqueUserIdentifier: '',\n});\n\nexport type ProviderProps = {\n    /** Content would be your application */\n    children?: any;\n    /** Define localized texts and formatted data in your application */\n    localization?: Localization;\n    settings: TacoSettings;\n};\n\nexport const Provider = (props: ProviderProps): JSX.Element => {\n    const { children, localization, settings } = props;\n\n    const context = React.useMemo(() => settings, [JSON.stringify(settings)]);\n\n    return (\n        <LocalizationProvider localization={localization}>\n            <TacoContext.Provider value={context}>\n                <Tooltip.Provider>\n                    <ToastProvider>{children}</ToastProvider>\n                </Tooltip.Provider>\n            </TacoContext.Provider>\n        </LocalizationProvider>\n    );\n};\n"],"names":["TacoContext","React","uniqueUserIdentifier","Provider","props","children","localization","settings","context","JSON","stringify","LocalizationProvider","value","Tooltip","ToastProvider"],"mappings":";;;;;MASaA,WAAW,gBAAGC,aAAmB,CAAe;EACzDC,oBAAoB,EAAE;CACzB;MAUYC,QAAQ,GAAIC,KAAoB;EACzC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;GAAU,GAAGH,KAAK;EAElD,MAAMI,OAAO,GAAGP,OAAa,CAAC,MAAMM,QAAQ,EAAE,CAACE,IAAI,CAACC,SAAS,CAACH,QAAQ,CAAC,CAAC,CAAC;EAEzE,oBACIN,cAACU,oBAAoB;IAACL,YAAY,EAAEA;kBAChCL,cAACD,WAAW,CAACG,QAAQ;IAACS,KAAK,EAAEJ;kBACzBP,cAACY,UAAgB,qBACbZ,cAACa,aAAa,QAAET,QAAQ,CAAiB,CAC1B,CACA,CACJ;AAE/B;;;;"}
+{"version":3,"file":"Provider.js","sources":["../../../../../../../src/components/Provider/Provider.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as Tooltip from '@radix-ui/react-tooltip';\nimport { ToastProvider } from '../Toast/Toaster';\nimport { Localization, LocalizationProvider } from './Localization';\nimport { Taco, TacoContext } from './TacoContext';\nimport { useTacoSettings } from './useTacoSettings';\n\ntype TacoSettingsLoadHandler = <TType = unknown>(key: string) => Promise<TType>;\ntype TacoSettingsSaveHandler = <TType = unknown>(key: string, setting: TType) => Promise<void>;\n\nexport type ProviderProps = {\n    /** Content would be your application */\n    children?: any;\n    /** Define localized texts and formatted data in your application */\n    localization?: Localization;\n    // settings\n    loadSetting: TacoSettingsLoadHandler;\n    saveSetting: TacoSettingsSaveHandler;\n    // TODO: remove this - it is redundant and only here in order to migrate legacy settings\n    userId: string;\n};\n\nexport const Provider = (props: ProviderProps): JSX.Element => {\n    const { children, localization, loadSetting, saveSetting, userId } = props;\n    const settings = useTacoSettings(loadSetting, saveSetting);\n\n    const context = React.useMemo(() => {\n        return {\n            settings,\n            userId,\n        } as Taco;\n    }, []);\n\n    return (\n        <LocalizationProvider localization={localization}>\n            <TacoContext.Provider value={context}>\n                <Tooltip.Provider>\n                    <ToastProvider>{children}</ToastProvider>\n                </Tooltip.Provider>\n            </TacoContext.Provider>\n        </LocalizationProvider>\n    );\n};\n"],"names":["Provider","props","children","localization","loadSetting","saveSetting","userId","settings","useTacoSettings","context","React","LocalizationProvider","TacoContext","value","Tooltip","ToastProvider"],"mappings":";;;;;;;MAsBaA,QAAQ,GAAIC,KAAoB;EACzC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,WAAW;IAAEC,WAAW;IAAEC;GAAQ,GAAGL,KAAK;EAC1E,MAAMM,QAAQ,GAAGC,eAAe,CAACJ,WAAW,EAAEC,WAAW,CAAC;EAE1D,MAAMI,OAAO,GAAGC,OAAa,CAAC;IAC1B,OAAO;MACHH,QAAQ;MACRD;KACK;GACZ,EAAE,EAAE,CAAC;EAEN,oBACII,cAACC,oBAAoB;IAACR,YAAY,EAAEA;kBAChCO,cAACE,WAAW,CAACZ,QAAQ;IAACa,KAAK,EAAEJ;kBACzBC,cAACI,UAAgB,qBACbJ,cAACK,aAAa,QAAEb,QAAQ,CAAiB,CAC1B,CACA,CACJ;AAE/B;;;;"}

package/dist/esm/packages/taco/src/components/Provider/TacoContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const TacoContext = /*#__PURE__*/createContext({});
+
+export { TacoContext };
+//# sourceMappingURL=TacoContext.js.map

package/dist/esm/packages/taco/src/components/Provider/TacoContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TacoContext.js","sources":["../../../../../../../src/components/Provider/TacoContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTacoSettings } from './useTacoSettings';\n\nexport type Taco = {\n    settings: ReturnType<typeof useTacoSettings>;\n    userId: string;\n};\n\nexport const TacoContext = React.createContext<Taco>({} as Taco);\n"],"names":["TacoContext","React"],"mappings":";;MAQaA,WAAW,gBAAGC,aAAmB,CAAO,EAAU;;;;"}

package/dist/esm/packages/taco/src/components/Provider/useTacoSettings.js

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { setWith, get } from 'lodash-es';
+
+function useTacoSettings(load, save) {
+  const saveSetting = function (path, value) {
+    try {
+      setState(currentState => setWith(currentState, path, value, Object));
+      return Promise.resolve(save(path, value)); // don't block, since we have local state
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const loadSetting = function (path) {
+    try {
+      const currentValue = get(state, path);
+      if (currentValue) {
+        return Promise.resolve(currentValue);
+      }
+      return Promise.resolve(load(path)).then(function (value) {
+        setState(currentState => setWith(currentState, path, value, Object));
+        return value;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const [state, setState] = useState({});
+  function getSetting(path) {
+    return get(state, path);
+  }
+  return {
+    getSetting,
+    loadSetting,
+    saveSetting
+  };
+}
+
+export { useTacoSettings };
+//# sourceMappingURL=useTacoSettings.js.map

package/dist/esm/packages/taco/src/components/Provider/useTacoSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTacoSettings.js","sources":["../../../../../../../src/components/Provider/useTacoSettings.ts"],"sourcesContent":["import * as React from 'react';\nimport { get, setWith } from 'lodash';\n\ntype TacoSettingsLoadHandler = <TType = unknown>(key: string) => Promise<TType>;\ntype TacoSettingsSaveHandler = <TType = unknown>(key: string, setting: TType) => Promise<void>;\n\nexport function useTacoSettings(load: TacoSettingsLoadHandler, save: TacoSettingsSaveHandler) {\n    const [state, setState] = React.useState({});\n\n    function getSetting<TType = unknown>(path: string): TType {\n        return get(state, path) as TType;\n    }\n\n    async function loadSetting<TType = unknown>(path: string) {\n        const currentValue = get(state, path) as TType;\n\n        if (currentValue) {\n            return currentValue;\n        }\n\n        const value = await load<TType>(path);\n        setState(currentState => setWith(currentState, path, value, Object));\n        return value;\n    }\n\n    async function saveSetting<TType = unknown>(path: string, value: TType) {\n        setState(currentState => setWith(currentState, path, value, Object));\n        return save(path, value); // don't block, since we have local state\n    }\n\n    return { getSetting, loadSetting, saveSetting };\n}\n"],"names":["useTacoSettings","load","save","saveSetting","path","value","setState","currentState","setWith","Object","Promise","resolve","e","reject","loadSetting","currentValue","get","state","then","React","getSetting"],"mappings":";;;SAMgBA,eAAeA,CAACC,IAA6B,EAAEC,IAA6B;QAmBzEC,WAAW,aAAkBC,IAAY,EAAEC,KAAY;IAAA;MAClEC,QAAQ,CAACC,YAAY,IAAIC,OAAO,CAACD,YAAY,EAAEH,IAAI,EAAEC,KAAK,EAAEI,MAAM,CAAC,CAAC;MACpE,OAAAC,OAAA,CAAAC,OAAA,CAAOT,IAAI,CAACE,IAAI,EAAEC,KAAK,CAAC,EAAC;KAC5B,QAAAO,CAAA;MAAA,OAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA;;;EAAA,MAfcE,WAAW,aAAkBV,IAAY;IAAA;MACpD,MAAMW,YAAY,GAAGC,GAAG,CAACC,KAAK,EAAEb,IAAI,CAAU;MAE9C,IAAIW,YAAY,EAAE;QACd,OAAAL,OAAA,CAAAC,OAAA,CAAOI,YAAY;;MACtB,OAAAL,OAAA,CAAAC,OAAA,CAEmBV,IAAI,CAAQG,IAAI,CAAC,EAAAc,IAAA,WAA/Bb,KAAK;QACXC,QAAQ,CAACC,YAAY,IAAIC,OAAO,CAACD,YAAY,EAAEH,IAAI,EAAEC,KAAK,EAAEI,MAAM,CAAC,CAAC;QACpE,OAAOJ,KAAK;;KACf,QAAAO,CAAA;MAAA,OAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA;;;EAhBD,MAAM,CAACK,KAAK,EAAEX,QAAQ,CAAC,GAAGa,QAAc,CAAC,EAAE,CAAC;EAE5C,SAASC,UAAUA,CAAkBhB,IAAY;IAC7C,OAAOY,GAAG,CAACC,KAAK,EAAEb,IAAI,CAAU;;EAoBpC,OAAO;IAAEgB,UAAU;IAAEN,WAAW;IAAEX;GAAa;AACnD;;;;"}

package/dist/esm/packages/taco/src/components/Report/Report.js

@@ -1,7 +1,9 @@
 import React__default from 'react';
+import { Spinner } from '../Spinner/Spinner.js';
 import { fixedForwardRef } from '../../types.js';
 import { useReport } from './useReport.js';
 import { Table } from '../../primitives/Table/Core/Table.js';
+import { useTableSettingsPreloader } from '../../primitives/Table/useTableManager/useTableSettingsPreloader.js';
 
 const Column = () => null;
 Column.displayName = 'Table3Column';
@@ -22,6 +24,12 @@ const Report = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
   // we force a remount (using key) when the child columns change because there are too many places to add children as an effect
   // this is cheaper from a complexity perspective, and probably performance wise as well
   const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
+  const {
+    loading
+  } = useTableSettingsPreloader(props.id);
+  if (loading) {
+    return /*#__PURE__*/React__default.createElement(Spinner, null);
+  }
   return /*#__PURE__*/React__default.createElement(BaseReport, Object.assign({}, props, {
     key: key,
     ref: ref