@economic/taco 2.55.0-settings.0 → 2.55.0-settings.2

package/dist/taco.cjs.development.js

@@ -11,9 +11,9 @@ var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var reactDayPicker = require('react-day-picker');
-var reactAriaComponents = require('react-aria-components');
-var PopoverPrimitive = require('@radix-ui/react-popover');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var uuid = require('uuid');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 var debounce$1 = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -24,6 +24,7 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var PrimitiveSwitch = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ReactDOM = _interopDefault(require('react-dom'));
@@ -5246,6 +5247,11 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
 });
 Card.Content = Content$2;
 
+// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
+const useId = nativeId => {
+  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
+};
+
 const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
     delay = 350,
@@ -5288,53 +5294,75 @@ const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
-    className,
-    defaultChecked,
     indeterminate,
-    readOnly,
     invalid,
-    disabled,
-    required,
-    onChange,
-    loading,
     label,
-    onClick,
+    loading,
+    onChange,
     ...otherProps
   } = props;
-  // 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', {
+  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', {
     'self-start': !!label,
     'mt-[0.1rem]': !label
-  }, className);
-  return /*#__PURE__*/React.createElement(reactAriaComponents.Checkbox, 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: checkboxClassName,
+  }, 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__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
+    "aria-invalid": invalid ? 'true' : undefined,
     "data-taco": "checkbox",
-    onClick: onClick
-  }, loading ? (/*#__PURE__*/React.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__*/React.createElement(Icon, {
-    "aria-hidden": true,
-    name: isIndeterminate ? 'line' : 'tick',
+    checked: indeterminate ? 'indeterminate' : checked,
+    className: className,
+    onCheckedChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }), loading ? (/*#__PURE__*/React.createElement(Spinner, {
+    className: spinnerClassname
+  })) : (/*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
+    className: "flex h-full w-full"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: indeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  }))), label)));
+  }))));
+  if (label) {
+    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
+      'cursor-not-allowed text-grey-300': props.disabled
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName,
+      "data-taco": "checkbox-container"
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
+  }
+  return element;
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -5772,13 +5800,10 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
   // so need to be taken out of screen reader scope.
   , {
     "aria-hidden": true,
-    excludeFromTabOrder: true,
+    tabIndex: -1,
     checked: optionProps['aria-selected'],
-    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"
+    onChange: () => null,
+    className: "pointer-events-none ml-2 self-center p-px"
   }))))) : (/*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/React.createElement("span", null, texts.listbox.empty))));
@@ -7749,46 +7774,44 @@ const Collapsible = /*#__PURE__*/React__default.forwardRef(function Accordion(pr
 
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   const {
-    checked,
-    defaultChecked,
-    readOnly,
     label,
     onChange,
-    disabled,
-    onClick,
-    className,
     ...otherProps
   } = props;
-  const inputRef = useMergedRef(ref);
-  const switchContainerClassName = cn('group flex self-start', 'data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
-  const switchClassName = cn('h-5 w-9 flex flex-shrink-0 rounded-full inline-flex cursor-pointer bg-grey-500', 'group-data-[focus-visible]:yt-focus', {
-    'mr-2': !!label
-  }, 'group-hover:bg-grey-700',
-  // When switch is selected
-  'group-data-[selected]:bg-blue-500',
-  // When switch is selected and hovered
-  'group-hover:group-data-[selected]:bg-blue-700',
-  // When switch is disabled
-  'group-data-[disabled]:!bg-grey-500/50 group-data-[disabled]:cursor-not-allowed',
-  // When switch is disabled and selected
-  'group-data-[disabled]:group-data-[selected]:!bg-blue-500/50', className);
-  const switchThumbClassName = cn('pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform', 'group-data-[disabled]:opacity-50', 'group-data-[selected]:translate-x-[1.1rem]');
-  return /*#__PURE__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
-    className: switchContainerClassName,
-    "data-taco": "switch-container",
-    inputRef: inputRef,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isSelected: checked,
-    defaultSelected: defaultChecked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement("span", {
-    className: switchClassName,
+  const id = useId(props.id);
+  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
+    'mr-2': !!label,
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
+  }, props.className);
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      'aria-labelledby': `${id}-label`,
+      id
+    };
+  }
+  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
+    className: className,
     "data-taco": "switch",
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("span", {
-    className: switchThumbClassName
-  })), label);
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
+    className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
+  }));
+  if (label) {
+    const labelContainerClassName = cn('flex self-start cursor-pointer', {
+      'cursor-not-allowed text-grey-300': props.disabled
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName,
+      "data-taco": "switch-container"
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
+  }
+  return element;
 });
 Switch.displayName = 'Switch';
 
@@ -7846,18 +7869,13 @@ const Switch$1 = /*#__PURE__*/React__default.forwardRef(function Switch$1(props,
     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, {
     checked: checked,
-    className: controlClassName,
+    className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
     disabled: props.disabled,
     onChange: toggle,
     ref: switchRef,
-    excludeFromTabOrder: true
+    tabIndex: -1
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -7878,18 +7896,13 @@ const Checkbox$1 = /*#__PURE__*/React__default.forwardRef(function Switch(props,
     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, {
     checked: checked,
-    className: controlClassName,
+    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",
     disabled: props.disabled,
     onChange: toggle,
     ref: checkboxRef,
-    excludeFromTabOrder: true
+    tabIndex: -1
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -8836,41 +8849,20 @@ Menu$1.SubMenu = SubMenu;
 
 const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref) {
   const {
-    checked,
-    defaultChecked,
-    readOnly,
     onChange,
-    disabled,
-    className,
     ...otherProps
   } = props;
-  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__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
-    className: switchClassName,
-    defaultSelected: defaultChecked,
-    id: otherProps.id,
-    inputRef: inputRef,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isSelected: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement("span", {
-    className: switchThumbClassName,
-    "data-taco": "mode"
+  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__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "mode",
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(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%]"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "edit-simple",
     className: "pointer-events-none !h-5 !w-5"
@@ -11789,13 +11781,15 @@ function useTableSettingsListener(table, tableId, onChangeSettings, isEnabled =
   const taco = useTaco();
   const meta = table.options.meta;
   const state = table.getState();
+  const lastUsedSettingsRef = React__default.useRef(removeDisabledSettings(getSettings(table), enabledSettings));
   React__default.useEffect(() => {
     const handler = setTimeout(() => {
       if (!hasSomeEnabledSettings) {
         return;
       }
       const settings = removeDisabledSettings(getSettings(table), enabledSettings);
-      if (Object.keys(settings).length) {
+      if (Object.keys(settings).length && JSON.stringify(settings) !== JSON.stringify(lastUsedSettingsRef.current)) {
+        lastUsedSettingsRef.current = settings;
         // some settings shouldn't be persisted, but we comment them out here to highlight the intention
         taco.settings.saveSetting(getSettingsId(tableId), settings);
         if (onChangeSettings) {
@@ -11810,7 +11804,7 @@ function useTableSettingsListener(table, tableId, onChangeSettings, isEnabled =
   //state.grouping,
   meta.printing.settings, meta.rowHeight.height,
   //state.globalFilter,
-  state.sorting]);
+  state.sorting, lastUsedSettingsRef.current]);
 }
 const DEFAULT_ENABLED_OPTIONS = {
   columnOrder: true,
@@ -13872,7 +13866,6 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-align": isGroup ? 'center' : align,
     "data-cell-id": id,
     "data-cell-pinned": isPinned ? isPinned : undefined,
-    "data-taco": isGroup ? 'grouped-column-header' : 'column-header',
     style: style,
     ref: setRef
   }), !isPlaceholder ? (/*#__PURE__*/React__default.createElement(HeaderContent, {
@@ -14794,11 +14787,6 @@ function RowHeightMenuItem({
   }, texts.table.rowHeight.sizes.extraTall)));
 }
 
-// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
-const useId = nativeId => {
-  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
-};
-
 const isAriaSelectionKey = event => {
   if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
     return true;