@onesy/ui-react 1.0.0

package/esm/Chart/index.js

@@ -0,0 +1 @@
+export { default } from './Chart';

package/esm/Checkbox/Checkbox.js

@@ -0,0 +1,334 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
+const _excluded = ["noFontSizeDownScale", "size", "Component", "className", "style", "children"],
+  _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconButtonElement from '../IconButton';
+import { IconDoneAnimated } from '../Buttons/Buttons';
+import { staticClassName } from '../utils';
+import Icon from '../Icon';
+const IconMaterialIndeterminateCheckBox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    ref: ref,
+    name: "IndeterminateCheckBox",
+    short_name: "IndeterminateCheckBox"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M7 13H17V11H7V13Z"
+  }));
+});
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      boxSizing: 'border-box'
+    }
+  },
+  input: {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    opacity: '0',
+    cursor: 'inherit',
+    zIndex: '1'
+  },
+  icon: {
+    zIndex: '1',
+    pointerEvents: 'none'
+  },
+  iconBox: {
+    width: '1em',
+    height: '1em',
+    border: '0.125em solid currentColor',
+    background: 'transparent',
+    transition: theme.methods.transitions.make('background', {
+      duration: 0,
+      delay: 'xxs'
+    }),
+    borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.11em)`
+  },
+  iconBox_checked: {
+    background: 'currentColor',
+    transition: theme.methods.transitions.make('background', {
+      duration: 0
+    })
+  },
+  iconBox_checked_version_filled: {
+    border: 'none'
+  },
+  iconBox_checked_version_outlined: {
+    border: 'none'
+  },
+  iconBox_checked_disabled: {
+    background: 'currentColor',
+    border: 'none'
+  },
+  iconBox_indeterminate: {
+    background: 'currentColor',
+    transition: theme.methods.transitions.make('background', {
+      duration: 0
+    })
+  },
+  iconBox_indeterminate_version_filled: {
+    border: 'none'
+  },
+  iconBox_indeterminate_version_outlined: {
+    border: 'none'
+  },
+  iconBox_indeterminate_disabled: {
+    background: 'currentColor',
+    border: 'none'
+  },
+  iconItem: {
+    position: 'absolute',
+    width: 'calc(100% - 0.3em)',
+    height: 'calc(100% - 0.3em)',
+    insetInline: '0',
+    insetInlineStart: '0.16em',
+    top: '0.15em',
+    zIndex: '2',
+    pointerEvents: 'none',
+    '&::before': {
+      content: "''",
+      display: 'inline-flex',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      inset: '0',
+      background: 'currentColor',
+      transform: 'scale(1)',
+      opacity: '0',
+      transition: `${theme.methods.transitions.make('transform', {
+        duration: 'xxs'
+      })}, ${theme.methods.transitions.make('opacity', {
+        duration: 0,
+        delay: 'xxs'
+      })}`
+    }
+  },
+  iconItem_checked: {
+    '&::before': {
+      transform: 'scale(0)',
+      opacity: '1',
+      transition: `${theme.methods.transitions.make('transform', {
+        duration: 'xxs'
+      })}, ${theme.methods.transitions.make('opacity', {
+        duration: 0
+      })}`
+    }
+  },
+  'iconItem_checked_disabled': {
+    '&::before': {
+      display: 'none'
+    }
+  },
+  iconItem_indeterminate: {
+    '&::before': {
+      transform: 'scale(0)',
+      opacity: '1',
+      transition: `${theme.methods.transitions.make('transform', {
+        duration: 'xxs'
+      })}, ${theme.methods.transitions.make('opacity', {
+        duration: 0
+      })}`
+    }
+  },
+  iconDone: {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    inset: '0',
+    width: '100% !important',
+    height: '100%',
+    zIndex: '3',
+    '&:not($indeterminate) > svg': {
+      padding: '0.14em'
+    }
+  },
+  disabled: {
+    cursor: 'default'
+  }
+}), {
+  name: 'onesy-Checkbox'
+});
+const IconItem = props => {
+  const {
+      noFontSizeDownScale,
+      size,
+      Component = 'span',
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const styles = {
+    root: {}
+  };
+  let fontSize = '1.5rem';
+  if (size === 'very small') fontSize = '0.75rem';else if (size === 'small') fontSize = '1.125rem';else if (size === 'regular') fontSize = '1.5rem';else if (size === 'medium') fontSize = '2.25rem';else if (size === 'large') fontSize = '3rem';else if (size === 'very large') fontSize = '3.75rem';else if (size !== undefined) fontSize = `${size}${!String(size).includes('px') ? 'px' : ''}`;
+  styles.root.fontSize = `calc(${fontSize} * 0.75)`;
+  if (noFontSizeDownScale) styles.root.fontSize = fontSize;
+  return /*#__PURE__*/React.createElement(Component, {
+    className: className,
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, children && /*#__PURE__*/React.cloneElement(children, _objectSpread({}, other)));
+};
+const Checkbox = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread({}, props_), theme?.ui?.elements?.onesyCheckbox?.props?.default), [props_]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'text',
+      size = 'regular',
+      colorIndeterminate = props.color || 'primary',
+      colorUnchecked = 'default',
+      valueDefault: valueDefault_,
+      checkedDefault: checkedDefault_,
+      value: value_,
+      checked: checked_,
+      onChange,
+      indeterminate: indeterminate_,
+      disabled,
+      inputRef,
+      Component = 'span',
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded2);
+  const {
+    classes
+  } = useStyle();
+  const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
+  const checked = value_ !== undefined ? value_ : checked_;
+  const [value, setValue] = React.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
+  const [indeterminate, setIndeterminate] = React.useState(!value && indeterminate_);
+  const refs = {
+    value: React.useRef(undefined),
+    input: React.useRef(undefined),
+    indeterminate: React.useRef(undefined)
+  };
+  refs.value.current = value;
+  refs.indeterminate.current = indeterminate;
+  const styles = {
+    iconItem: {},
+    iconBox: {},
+    iconDone: {}
+  };
+  React.useEffect(() => {
+    if (indeterminate_ !== undefined && indeterminate_ !== refs.indeterminate.current) {
+      setIndeterminate(indeterminate_);
+      if (indeterminate_) setValue(false);
+    }
+  }, [indeterminate_]);
+  React.useEffect(() => {
+    if (checked !== undefined && checked !== refs.value.current) {
+      setValue(checked);
+      if (refs.indeterminate.current) setIndeterminate(false);
+    }
+  }, [checked]);
+  const onUpdate = event => {
+    if (!disabled) {
+      // Inner controlled value
+      if (!props.hasOwnProperty('checked')) {
+        setValue(event.target.checked);
+        if (indeterminate) setIndeterminate(false);
+      }
+      if (is('function', onChange)) onChange(event.target.checked, event);
+    }
+  };
+  const onKeyDown = event => {
+    switch (event.key) {
+      case 'Enter':
+        if (refs.input.current) refs.input.current.click();
+        break;
+      default:
+        break;
+    }
+  };
+  const color_ = indeterminate ? colorIndeterminate : color;
+  let palette;
+  if (!theme.palette.color[color]) palette = theme.methods.color(color_);
+  if (tonal) {
+    // Text
+    // Outlined
+    if (['text', 'outlined', undefined].includes(version)) {
+      styles.iconBox.color = theme.methods.palette.color.value(color_, 30, true, palette);
+      styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
+    }
+
+    // Outlined
+    if (version === 'outlined') styles.iconBox.color = theme.methods.palette.color.value(color_, 40, true, palette);
+
+    // Filled
+    if (version === 'filled') styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
+  } else {
+    if (!theme.palette.light && disabled) styles.iconDone.color = theme.palette.background.default.primary;else {
+      if (version === 'filled') styles.iconDone.color = (palette || theme.palette.color[color_])?.main;else styles.iconDone.color = theme.methods.palette.color.text(color_ === 'default' ? theme.palette.text.default.primary : (palette || theme.palette.color[color_])?.main, true, 'light');
+    }
+  }
+  if (['text', 'filled', undefined].includes(version)) {
+    if (['default', 'inherit', 'inverted', 'themed'].includes(color_)) styles.iconDone.color = theme.palette.background.default.primary;
+  }
+  styles.iconItem.color = styles.iconDone.color;
+  if (['text', 'outlined', undefined].includes(version)) styles.iconItem.color = theme.palette.background.default.primary;
+  let colorValue = color;
+  if (!value) colorValue = colorUnchecked;
+  if (indeterminate) colorValue = colorIndeterminate;
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    ref: ref,
+    tabIndex: !disabled ? 0 : -1,
+    color: colorValue,
+    tonal: tonal,
+    version: version,
+    size: size,
+    onKeyDown: onKeyDown,
+    firstLevelChildren: /*#__PURE__*/React.createElement("input", {
+      ref: item => {
+        if (inputRef) {
+          if (is('function', inputRef)) inputRef(item);else inputRef.current = item;
+        }
+        refs.input.current = item;
+      },
+      tabIndex: -1,
+      type: "checkbox",
+      checked: value,
+      onChange: onUpdate,
+      className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-input'], classes.input]),
+      disabled: disabled
+    }),
+    role: "checkbox",
+    "aria-checked": indeterminate ? 'mixed' : value,
+    "aria-disabled": disabled,
+    disabled: disabled,
+    Component: Component,
+    className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
+  }, other), /*#__PURE__*/React.createElement(IconItem, {
+    className: classNames([classes.iconItem, value && classes.iconItem_checked, indeterminate && classes.iconItem_indeterminate, value && disabled && classes.iconItem_checked_disabled]),
+    style: styles.iconItem
+  }), /*#__PURE__*/React.createElement(IconItem, {
+    Component: "div",
+    className: classNames([classes.icon, classes.iconBox, value && [classes.iconBox_checked, classes[`iconBox_checked_version_${version}`]], indeterminate && [classes.iconBox_indeterminate, classes[`iconBox_indeterminate_version_${version}`]], disabled && [value && classes.iconBox_checked_disabled, indeterminate && classes.iconBox_indeterminate_disabled]]),
+    style: styles.iconBox
+  }), indeterminate && /*#__PURE__*/React.createElement(IconItem, {
+    className: classNames([classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
+    style: styles.iconDone,
+    noFontSizeDownScale: true
+  }, /*#__PURE__*/React.createElement(IconMaterialIndeterminateCheckBox, {
+    size: "inherit"
+  })), value && /*#__PURE__*/React.createElement(IconDoneAnimated, {
+    className: classNames([classes.icon, classes.iconDone]),
+    style: styles.iconDone,
+    in: value,
+    add: true
+  }));
+});
+Checkbox.displayName = 'onesy-Checkbox';
+export default Checkbox;

package/esm/Checkbox/index.js

@@ -0,0 +1 @@
+export { default } from './Checkbox';

package/esm/Chip/Chip.js

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "version", "input", "filter", "selected", "start", "focus", "noCheckIcon", "onClick", "onRemove", "onSelected", "onUnselected", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialClose from '@amaui/icons-material-rounded-react/IconMaterialCloseW100';
+import ButtonElement from '../Button';
+import { IconDoneAnimated } from '../Buttons/Buttons';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    '&.onesy-Button-root': {
+      maxWidth: '100%'
+    },
+    '& .onesy-Icon-root': {
+      pointerEvents: 'unset !important'
+    }
+  }
+}), {
+  name: 'onesy-Chip'
+});
+const Chip = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChip?.props?.default), props_), [props_]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const {
+      tonal = false,
+      color = props.version === 'filled' ? 'inverted' : 'default',
+      version = 'outlined',
+      input,
+      filter,
+      selected: selected_,
+      start,
+      focus,
+      noCheckIcon,
+      onClick,
+      onRemove,
+      onSelected,
+      onUnselected,
+      className,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [preSelected, setPreSelected] = React.useState(false);
+  const [selected, setSelected] = React.useState(selected_);
+  const children = children_;
+  React.useEffect(() => {
+    if (selected !== selected_) setSelected(selected_);
+  }, [selected_]);
+  const OtherProps = {};
+  if (input) {
+    OtherProps.end = /*#__PURE__*/React.createElement(IconMaterialClose, {
+      onClick: event => {
+        if (is('function', onRemove)) onRemove(event);
+      }
+    });
+  }
+  const onSelect = () => {
+    if (filter) {
+      if (start) {
+        if (selected) {
+          setSelected(false);
+          if (is('function', onUnselected)) onUnselected();
+        } else {
+          setSelected(true);
+          if (is('function', onSelected)) onSelected();
+        }
+      } else {
+        // Unselect
+        if (selected) {
+          setPreSelected(false);
+          if (is('function', onUnselected)) onUnselected();
+        } else {
+          setPreSelected(true);
+          setSelected(true);
+          if (is('function', onSelected)) onSelected();
+        }
+      }
+    }
+  };
+  const updateSelected = () => {
+    if (filter) {
+      setSelected(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref,
+    tonal: tonal,
+    version: version,
+    color: color || (tonal ? 'neutral' : 'default'),
+    onClick: event => {
+      onSelect();
+
+      // Invoke items on click method
+      if (is('function', onClick)) onClick(event);
+    },
+    start: start
+  }, !noCheckIcon && start && selected ? {
+    start: /*#__PURE__*/React.createElement(IconDoneAnimated, {
+      simple: true,
+      in: true,
+      add: true
+    })
+  } : {}, !noCheckIcon && !start && (selected || preSelected) ? {
+    start: /*#__PURE__*/React.createElement(IconDoneAnimated, {
+      in: start ? selected : preSelected,
+      onExited: () => updateSelected(),
+      add: true
+    })
+  } : {}, {
+    focus: focus,
+    selected: selected,
+    chip: true,
+    className: classNames([staticClassName('Chip', theme) && ['onesy-Chip-root', selected && `onesy-Chip-selected`], className, classes.root])
+  }, other, OtherProps), children);
+});
+Chip.displayName = 'onesy-Chip';
+export default Chip;

package/esm/Chip/index.js

@@ -0,0 +1 @@
+export { default } from './Chip';

package/esm/Chips/Chips.js

@@ -0,0 +1,115 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["size", "gap", "align", "justify", "direction", "wrap", "total", "max", "showAllDefault", "onMoreShowAll", "AdditionalChip", "AdditionalChipProps", "Component", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import ChipElement from '../Chip/Chip';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    width: '100%',
+    padding: '1px',
+    '&:not($wrap)': {
+      overflowX: 'auto',
+      '&$small': {
+        paddingRight: theme.methods.space.value(0.75, 'px')
+      },
+      '&$regular': {
+        paddingRight: theme.methods.space.value(1, 'px')
+      },
+      '&$large': {
+        paddingRight: theme.methods.space.value(1.25, 'px')
+      }
+    }
+  },
+  size_small: {
+    // columnGap: '6px'
+  },
+  size_regular: {
+    // columnGap: '8px'
+  },
+  size_large: {
+    // columnGap: '10px'
+  },
+  wrap: {
+    flexWrap: 'wrap'
+  },
+  wrap_small: {
+    // rowGap: '12px'
+  },
+  wrap_regular: {
+    // rowGap: '16px'
+  },
+  wrap_large: {
+    // rowGap: '20px'
+  }
+}), {
+  name: 'onesy-Chips'
+});
+const Chips = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChips?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Chip = React.useMemo(() => theme?.elements?.Chip || ChipElement, [theme]);
+  const {
+      size = 'regular',
+      gap = 1,
+      align = 'flex-start',
+      justify = 'flex-start',
+      direction = 'row',
+      wrap,
+      total,
+      max,
+      showAllDefault,
+      onMoreShowAll = true,
+      AdditionalChip,
+      AdditionalChipProps = {},
+      Component = 'div',
+      className,
+      style,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [showAll, setShowAll] = React.useState(showAllDefault !== undefined ? showAllDefault : false);
+  const onClickMore = React.useCallback(() => {
+    setShowAll(true);
+  }, []);
+  let children = React.Children.toArray(children_);
+  if (!showAll) {
+    children = children.slice(0, max || children.length);
+    if (total !== undefined && total - children.length >= 1 || max < children.length) {
+      let value;
+      if (total !== undefined && total - children.length >= 1) value = `+${total - children.length}`;else value = `+${Math.abs(children.length - max)}`;
+      if (!AdditionalChipProps.TypeProps) AdditionalChipProps.TypeProps = {};
+      AdditionalChipProps.TypeProps.size = '0.44em';
+      children.push(AdditionalChip || /*#__PURE__*/React.createElement(Chip, _extends({
+        color: "default"
+      }, other, AdditionalChipProps, {
+        onClick: onMoreShowAll ? onClickMore : undefined
+      }), value));
+    }
+  }
+  return /*#__PURE__*/React.createElement(Line, {
+    ref: ref,
+    gap: gap,
+    justify: justify,
+    align: align,
+    direction: direction,
+    wrap: wrap,
+    Component: Component,
+    className: classNames([staticClassName('Chips', theme) && ['onesy-Chips-root', `onesy-Chips-size-${size}`], className, classes.root, classes[`size_${size}`], wrap === 'wrap' && [classes.wrap, classes[`wrap_${size}`]]]),
+    style: style
+  }, React.Children.toArray(children).map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
+    key: index,
+    size
+  }, other), item.props))));
+});
+Chips.displayName = 'onesy-Chips';
+export default Chips;

package/esm/Chips/index.js

@@ -0,0 +1 @@
+export { default } from './Chips';

package/esm/ClickListener/ClickListener.js

@@ -0,0 +1,77 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["mouseEvent", "touchEvent", "contextMenu", "include", "includeParentQueries", "includeQueries", "ignoreNonExisting", "onClickInside", "onClickOutside", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is, element, Try, isEnvironment } from '@onesy/utils';
+import { classNames, useOnesyTheme } from '@onesy/style-react';
+import { matches } from '../utils';
+const resolve = value => value.replace(/^on/, '').toLowerCase();
+const ClickListener = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyClickListener?.props?.default), props_), [props_]);
+  const {
+      mouseEvent = 'onClick',
+      touchEvent = 'onTouchEnd',
+      contextMenu = true,
+      include = [],
+      includeParentQueries = [],
+      includeQueries = [],
+      ignoreNonExisting = true,
+      onClickInside,
+      onClickOutside,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const refs = {
+    root: React.useRef(undefined),
+    include: React.useRef(undefined),
+    includeQueries: React.useRef(undefined),
+    includeParentQueries: React.useRef(undefined),
+    ignoreNonExisting: React.useRef(undefined)
+  };
+  refs.include.current = include;
+  refs.includeQueries.current = includeQueries;
+  refs.includeParentQueries.current = includeParentQueries;
+  refs.ignoreNonExisting.current = ignoreNonExisting;
+  React.useEffect(() => {
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    const onMethod = event => {
+      if (refs.root.current) {
+        const elementParents = element(event.target).parents();
+        const exists = Try(() => rootDocument.body.contains(event.target));
+        if (refs.root.current.contains(event.target) || refs.include.current.map(item => item?.current || item).filter(Boolean).some(item => item.contains?.(event.target)) || refs.includeParentQueries.current.some(query => elementParents.some(item => matches(item)(query))) || refs.includeQueries.current.some(query => matches(event.target)(query)) || !exists && refs.ignoreNonExisting.current) {
+          if (is('function', onClickInside)) onClickInside();
+        } else {
+          if (is('function', onClickOutside)) onClickOutside();
+        }
+      }
+    };
+    if (mouseEvent) rootDocument.addEventListener(resolve(mouseEvent), onMethod);
+    if (touchEvent) rootDocument.addEventListener(resolve(touchEvent), onMethod, {
+      passive: true
+    });
+    if (contextMenu) rootDocument.addEventListener('contextmenu', onMethod);
+    return () => {
+      if (mouseEvent) rootDocument.removeEventListener(resolve(mouseEvent), onMethod);
+      if (touchEvent) rootDocument.removeEventListener(resolve(mouseEvent), onMethod);
+      if (contextMenu) rootDocument.removeEventListener('contextmenu', onMethod);
+    };
+  }, [mouseEvent, touchEvent, contextMenu]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      if (children.ref) {
+        if (is('function', children.ref)) children.ref(item);else children.ref.current = item;
+      }
+      refs.root.current = item;
+    }
+  }, other), {}, {
+    className: classNames([other.className, children.props.className])
+  }))));
+});
+ClickListener.displayName = 'onesy-ClickListener';
+export default ClickListener;

package/esm/ClickListener/index.js

@@ -0,0 +1 @@
+export { default } from './ClickListener';