@onesy/ui-react 1.0.59 → 1.0.63

package/build/esm/ColorTextField/ColorTextField.js

@@ -0,0 +1,215 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["name", "value", "onChange", "min", "max", "children", "className"],
+  _excluded2 = ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "opacity", "className"];
+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 { clamp, colorToRgb, is, rgbToHex } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import TextFieldElement from '../TextField';
+import FormRowElement from '../FormRow';
+import SliderElement from '../Slider';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const SliderInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const theme = useOnesyTheme();
+  const FormRow = React.useMemo(() => theme?.elements?.FormRow || FormRowElement, [theme]);
+  const Slider = React.useMemo(() => theme?.elements?.Slider || SliderElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      name,
+      value,
+      onChange,
+      min,
+      max,
+      children,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(FormRow, {
+    gap: 1,
+    description: `${name} ${(value || 100).toFixed(0)}`,
+    fullWidth: true,
+    className: classNames([className])
+  }, /*#__PURE__*/React.createElement(Slider, _extends({
+    value: value,
+    onChange: onChange,
+    valueDefault: 100,
+    min: min,
+    max: max,
+    size: "small",
+    tooltip: true,
+    marks: [{
+      label: /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, min),
+      value: min
+    }, {
+      label: /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, max),
+      value: max
+    }],
+    labels: true
+  }, other, {
+    style: _objectSpread({
+      maxWidth: 'unset',
+      width: 'calc(100% - 8px)',
+      margin: '4px 4px 16px'
+    }, other.style)
+  })));
+});
+const useStyle = styleMethod(theme => ({
+  root: {
+    margin: '0',
+    padding: '0',
+    border: '0',
+    outline: 'none',
+    fontSize: '100%',
+    background: 'transparent',
+    boxSizing: 'border-box',
+    touchAction: 'manipulation'
+  },
+  inputColor: {
+    // Reset
+    margin: '0',
+    padding: '0',
+    border: '0',
+    fontFamily: 'inherit',
+    fontSize: '100%',
+    lineHeight: '1.15',
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    overflow: 'hidden',
+    width: '17px',
+    height: '17px',
+    cursor: 'pointer',
+    boxShadow: theme.methods.shadow(theme.palette.text.default.primary, theme.palette.light ? [7, 4, 11] : [27, 24, 31])[1],
+    '&::-webkit-color-swatch-wrapper': {
+      padding: '0'
+    },
+    '&::-webkit-color-swatch': {
+      border: 'none'
+    }
+  }
+}), {
+  name: 'onesy-ColorTextField'
+});
+const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const l = theme.l;
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyColorTextField?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
+  const {
+      name,
+      version = 'outlined',
+      size = 'regular',
+      valueDefault,
+      value: value_,
+      valueColor: valueColor_,
+      valueOpacity: valueOpacity_,
+      onChange: onChange_,
+      onChangeColor: onChangeColor_,
+      onChangeOpacity: onChangeOpacity_,
+      opacity,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded2);
+  const {
+    classes
+  } = useStyle();
+  const [value, setValue] = React.useState((valueDefault !== undefined ? valueDefault : value_) || '');
+  const [valueColor, setValueColor] = React.useState(valueColor_ !== undefined ? valueColor_ : '');
+  const [valueOpacity, setValueOpacity] = React.useState(valueOpacity_ !== undefined ? valueOpacity_ : 100);
+  const refs = {
+    value: React.useRef(undefined),
+    valueColor: React.useRef(valueColor),
+    valueOpacity: React.useRef(valueOpacity)
+  };
+  refs.value.current = value;
+  refs.valueColor.current = valueColor;
+  refs.valueOpacity.current = valueOpacity;
+  React.useEffect(() => {
+    if (opacity) {
+      if (!value_ || is('string', value_) && value_?.startsWith('theme')) return;
+      const valuePrevious = colorToRgb(refs.valueColor.current, refs.valueOpacity.current);
+      if (value_ && value_ !== valuePrevious) {
+        const [r, g, b, a = 1] = colorToRgb(value_, undefined, true) || [];
+        setValueOpacity(clamp(+(a * 100).toFixed(2), 0, 100));
+        setValueColor(rgbToHex(`rgb(${r}, ${g}, ${b})`));
+      } else {
+        setValueColor('');
+        setValueOpacity(100);
+      }
+    } else {
+      if (value_ !== refs.value.current) setValue(value_);
+    }
+  }, [value_]);
+  React.useEffect(() => {
+    if (valueColor_ !== undefined && valueColor !== valueColor_) setValueColor(valueColor_);
+  }, [valueColor_]);
+  React.useEffect(() => {
+    if (valueOpacity_ !== undefined && valueOpacity !== valueOpacity_) setValueOpacity(valueOpacity_);
+  }, [valueOpacity_]);
+  const onChange = React.useCallback(valueNew => {
+    if (opacity) {
+      const opacity_ = clamp(+refs.valueOpacity.current / 100, 0.0001, 1);
+      if (is('function', onChange_)) onChange_(colorToRgb(refs.valueColor.current, +opacity_.toFixed(2)) || '');
+    } else {
+      // Update inner or controlled
+      if (!props.hasOwnProperty('value')) setValue(valueNew);
+      if (is('function', onChange_)) onChange_(valueNew);
+    }
+  }, [onChange_]);
+  const onChangeColor = React.useCallback(valueNew => {
+    if (!props.hasOwnProperty('valueColor')) setValueColor(valueNew);
+    if (is('function', onChangeColor_)) onChangeColor_(valueNew);
+    setTimeout(() => {
+      onChange();
+    }, 14);
+  }, [onChangeColor_]);
+  const onChangeOpacity = React.useCallback(valueNew_ => {
+    const valueNew = +valueNew_?.toFixed(2);
+    if (!props.hasOwnProperty('valueOpacity')) setValueOpacity(valueNew);
+    if (is('function', onChangeOpacity_)) onChangeOpacity_(valueNew);
+    setTimeout(() => {
+      onChange();
+    }, 14);
+  }, [onChangeOpacity_]);
+  const root = /*#__PURE__*/React.createElement(TextField, _extends({
+    name: name,
+    value: opacity ? valueColor : value,
+    onChange: opacity ? onChangeColor : onChange,
+    version: version,
+    size: size,
+    endVerticalAlign: "center",
+    end: /*#__PURE__*/React.createElement("input", {
+      type: "color",
+      value: opacity ? valueColor : value,
+      onChange: event => opacity ? onChangeColor(event.target.value) : onChange(event.target.value),
+      className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-input-color'], classes.inputColor])
+    }),
+    className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-root', `onesy-ColorTextField-version-${version}`, `onesy-ColorTextField-size-${size}`], classes.root]),
+    fullWidth: opacity
+  }, !opacity && other));
+  if (opacity) {
+    return /*#__PURE__*/React.createElement(Line, _extends({
+      ref: ref,
+      gap: 1,
+      fullWidth: true,
+      className: classNames([className, classes.root])
+    }, other), root, /*#__PURE__*/React.createElement(SliderInput, {
+      name: l('Opacity'),
+      value: valueOpacity,
+      onChange: onChangeOpacity,
+      min: 0,
+      max: 100
+    }));
+  }
+  return root;
+});
+ColorTextField.displayName = 'onesy-ColorTextField';
+export default ColorTextField;

package/build/esm/Confirm/Confirm.js

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["throwError", "onOpen", "onClose", "className", "children"],
+  _excluded2 = ["name", "description", "buttons", "throwError", "ButtonNegativeProps", "ButtonPositiveProps", "modal"];
+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, setObjectValue } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import ButtonElement from '../Button';
+import ConfirmContext from './Context';
+import ModalHeaderElement from '../ModalHeader';
+import ModalFooterElement from '../ModalFooter';
+import ModalTitleElement from '../ModalTitle';
+import ModalMainElement from '../ModalMain';
+import ModalTextElement from '../ModalText';
+import ModalElement from '../Modal';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    '& .onesy-ModalMain-root': {
+      padding: `6px 0 10px`
+    },
+    '& .onesy-ModalFooter-root': {
+      padding: `12px 0 12px`
+    },
+    '& .onesy-Modal-background:not(.onesy-Modal-background-invisible)': {
+      background: theme.methods.palette.color.colorToRgb(theme.methods.palette.color.value('default', 10), theme.palette.light ? 20 : 40)
+    }
+  },
+  surface: {
+    '&.onesy-Surface-root': {
+      background: theme.palette.color.primary[theme.palette.light ? 99 : 5],
+      paddingBottom: '8px'
+    }
+  }
+}), {
+  name: 'onesy-Confirm'
+});
+const Confirm = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const l = theme.l;
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyConfirm?.props?.default), props_), [props_]);
+  const ModalHeader = React.useMemo(() => theme?.elements?.ModalHeader || ModalHeaderElement, [theme]);
+  const ModalFooter = React.useMemo(() => theme?.elements?.ModalFooter || ModalFooterElement, [theme]);
+  const ModalTitle = React.useMemo(() => theme?.elements?.ModalTitle || ModalTitleElement, [theme]);
+  const ModalMain = React.useMemo(() => theme?.elements?.ModalMain || ModalMainElement, [theme]);
+  const ModalText = React.useMemo(() => theme?.elements?.ModalText || ModalTextElement, [theme]);
+  const Modal = React.useMemo(() => theme?.elements?.Modal || ModalElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const {
+      throwError,
+      onOpen,
+      onClose,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [openModal, setOpenModal] = React.useState(false);
+  const refs = {
+    value: React.useRef({}),
+    modal: React.useRef(null),
+    props: React.useRef(null),
+    promise: {
+      resolve: React.useRef(null),
+      reject: React.useRef(null)
+    }
+  };
+  refs.props.current = props;
+  const open = React.useCallback(value => {
+    if (!openModal) {
+      refs.modal.current = _objectSpread({}, value);
+
+      // Defaults
+      refs.modal.current.name = value?.name !== undefined ? value?.name : l('Confirmation');
+      refs.modal.current.description = value?.description !== undefined ? value?.description : l('Are you sure you want to proceed?');
+      if (refs.modal.current.buttons?.negative?.text === undefined) setObjectValue(refs.modal.current, 'buttons.negative.text', '');
+      if (refs.modal.current.buttons?.positive?.text === undefined) setObjectValue(refs.modal.current, 'buttons.positive.text', '');
+      refs.modal.current.buttons.negative.text = value?.buttons?.negative?.text !== undefined ? value?.buttons?.negative?.text : l('Cancel');
+      refs.modal.current.buttons.positive.text = value?.buttons?.positive?.text !== undefined ? value?.buttons?.positive?.text : l('Confirm');
+      refs.modal.current.throwError = value?.throwError !== undefined ? value.throwError : refs.props.current.throwError;
+      const promise = new Promise((resolve, reject) => {
+        refs.promise.resolve.current = resolve;
+        refs.promise.reject.current = reject;
+      });
+      setOpenModal(true);
+      if (is('function', onOpen)) onOpen();
+      return promise;
+    }
+  }, [openModal, onOpen]);
+  const close = React.useCallback(function () {
+    let confirm = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (openModal) {
+      setOpenModal(false);
+      if (is('function', onClose)) onClose();
+
+      // Resolve or reject
+      if (confirm) refs.promise.resolve.current?.(confirm);else !refs.modal.current.throwError ? refs.promise.resolve.current?.(false) : refs.promise.reject.current?.();
+      refs.promise.resolve.current = undefined;
+      refs.promise.reject.current = undefined;
+    }
+  }, [openModal, onClose]);
+  const _ref = refs.modal.current || {},
+    {
+      name,
+      description,
+      buttons,
+      throwError: throwError_,
+      ButtonNegativeProps,
+      ButtonPositiveProps,
+      modal
+    } = _ref,
+    otherModal = _objectWithoutProperties(_ref, _excluded2);
+
+  // Add to the value
+  refs.value.current.open = open;
+  refs.value.current.close = close;
+  return /*#__PURE__*/React.createElement(ConfirmContext.Provider, {
+    value: refs.value.current
+  }, children, /*#__PURE__*/React.createElement(Modal, _extends({
+    ref: ref,
+    open: openModal,
+    onClose: close,
+    SurfaceProps: {
+      tonal: true,
+      color: 'primary',
+      className: classNames([classes.surface])
+    },
+    className: classNames([staticClassName('Confirm', theme) && [`onesy-Confirm-root`], className, classes.root])
+  }, other, otherModal), is('function', modal) ? modal({
+    resolve: refs.promise.resolve.current,
+    reject: refs.promise.reject.current
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, name !== false && /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    version: "t1",
+    weight: 500
+  }, name || l('Confirmation'))), /*#__PURE__*/React.createElement(ModalMain, null, /*#__PURE__*/React.createElement(ModalText, {
+    version: "b1",
+    weight: 200
+  }, description !== undefined ? description : l('Are you sure you want to proceed?'))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, _extends({
+    version: "text",
+    color: "inherit",
+    tonal: true,
+    onClick: () => close(false)
+  }, ButtonNegativeProps), buttons?.negative?.text !== undefined ? buttons?.negative?.text : l('Cancel')), /*#__PURE__*/React.createElement(Button, _extends({
+    version: "text",
+    color: "inherit",
+    tonal: true,
+    onClick: () => close(true)
+  }, ButtonPositiveProps), buttons?.positive?.text !== undefined ? buttons?.positive?.text : l('Confirm'))))));
+});
+Confirm.displayName = 'onesy-Confirm';
+export default Confirm;

package/build/esm/CookieBanner/CookieBanner.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["name", "description", "size", "startActions", "endActions", "onReject", "onAllow", "in", "TransitionElement", "noTransition", "MainProps", "NameProps", "DescriptionProps", "ButtonProps", "RejectButtonProps", "AllowButtonProps", "TransitionProps", "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 ButtonElement from '../Button';
+import TypeElement from '../Type';
+import SurfaceElement from '../Surface';
+import SlideElement from '../Slide';
+import LineElement from '../Line';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'fixed',
+    left: '0',
+    bottom: '0',
+    zIndex: theme.z_index.modal,
+    boxShadow: '0px 4px 32px 0px rgba(0,0,0,0.014)'
+  },
+  size_small: {
+    padding: '12px 16px'
+  },
+  size_regular: {
+    padding: '20px 18px'
+  },
+  size_large: {
+    padding: '28px 20px'
+  },
+  main: {
+    maxWidth: '1100px'
+  }
+}), {
+  name: 'onesy-CookieBanner'
+});
+const CookieBanner = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const l = theme.l;
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBanner?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Slide = React.useMemo(() => theme?.elements?.Slide || SlideElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const {
+      name,
+      description,
+      size = 'regular',
+      startActions,
+      endActions,
+      onReject,
+      onAllow,
+      in: inProp,
+      TransitionElement: TransitionElementProps = Slide,
+      noTransition,
+      MainProps,
+      NameProps,
+      DescriptionProps,
+      ButtonProps,
+      RejectButtonProps,
+      AllowButtonProps,
+      TransitionProps,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const TransitionElement = noTransition ? React.Fragment : TransitionElementProps;
+  const WrapperProps = noTransition ? undefined : _objectSpread(_objectSpread({}, TransitionProps), {}, {
+    in: inProp
+  });
+  const buttonProps = _objectSpread({
+    size
+  }, ButtonProps);
+  return /*#__PURE__*/React.createElement(TransitionElement, WrapperProps, /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    gap: 1.5,
+    align: "center",
+    fullWidth: true,
+    Component: Surface,
+    color: "default",
+    role: "region",
+    "aria-label": l('Cookie Banner'),
+    className: classNames([staticClassName('CookieBanner', theme) && ['onesy-CookieBanner-root', `onesy-CookieBanner-size-${size}`], className, classes.root, classes[`size_${size}`]])
+  }, other), /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 1.5,
+    direction: "row",
+    wrap: "wrap",
+    align: "center",
+    justify: "space-between",
+    fullWidth: true
+  }, MainProps, {
+    className: classNames([staticClassName('CookieBanner', theme) && ['onesy-CookieBanner-main'], MainProps?.className, classes.main])
+  }), /*#__PURE__*/React.createElement(Line, {
+    gap: 0.25
+  }, is('string', name) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3',
+    weight: 500
+  }, NameProps), name) : name, is('string', description) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+  }, DescriptionProps), description) : description), /*#__PURE__*/React.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center"
+  }, startActions, /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: onReject,
+    color: "default"
+  }, buttonProps, RejectButtonProps), l('Reject All')), /*#__PURE__*/React.createElement(Button, _extends({
+    onClick: onAllow,
+    color: "primary",
+    version: "filled"
+  }, buttonProps, AllowButtonProps), l('Accept All')), endActions))));
+});
+CookieBanner.displayName = 'onesy-CookieBanner';
+export default CookieBanner;