@onesy/ui-react 1.0.7 → 1.0.9

package/DatePicker/DatePicker.d.ts

@@ -67,6 +67,7 @@ export interface IDatePicker extends ILine {
     ButtonProps?: IPropsAny;
     ModalProps?: IPropsAny;
     IconProps?: IPropsAny;
+    MobileSurfaceProps?: IPropsAny;
 }
 declare const DatePicker: React.FC<IDatePicker>;
 export default DatePicker;

package/DatePicker/DatePicker.js

@@ -140,7 +140,7 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
     const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
     const Slide = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slide) || Slide_1.default; }, [theme]);
     const ClickListener = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ClickListener) || ClickListener_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version: version_ = 'auto', size = 'regular', value: value_, valueDefault, onChange, calendar: calendar_, calendarDefault, onChangeCalendar, range, now, static: static_, openMobile = 'select', placeholder: placeholder_, calendars = props.range ? 2 : 1, min, max, validate, name, nameFrom, nameTo, label: label_, labelFrom: labelFrom_ = `Date from`, labelTo: labelTo_ = `Date to`, modeModalSubHeadingText = 'Select date', modeModalSubHeadingTextRange = `Date from${exports.SEPARATOR}Date to`, selectModeHeadingText = 'Select date', inputModeHeadingText = 'Enter date', useHelperText: useHelperText_, weekStartDay = 'Monday', switch: switch__, fullScreen, today, clear = true, heading: heading_ = true, actions: actions_ = true, fullWidth, readOnly, disabled, valid: valid_, onClick: onClick_, onClose: onClose_, onToday: onToday_, onClear: onClear_, onCancel: onCancel_, onOk: onOk_, Icon: Icon_ = IconMaterialCalendarTodayW100Filled_1.default, IconEnter = IconMaterialEditW100_1.default, IconClose = IconMaterialCloseW100_1.default, WrapperProps, CalendarProps, CalendarPropsDesktop, CalendarPropsMobile, IconButtonProps, AdvancedTextFieldProps, TooltipProps, ButtonProps, ModalProps, IconProps, className } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "className"]);
+    const { tonal = true, color = 'primary', version: version_ = 'auto', size = 'regular', value: value_, valueDefault, onChange, calendar: calendar_, calendarDefault, onChangeCalendar, range, now, static: static_, openMobile = 'select', placeholder: placeholder_, calendars = props.range ? 2 : 1, min, max, validate, name, nameFrom, nameTo, label: label_, labelFrom: labelFrom_ = `Date from`, labelTo: labelTo_ = `Date to`, modeModalSubHeadingText = 'Select date', modeModalSubHeadingTextRange = `Date from${exports.SEPARATOR}Date to`, selectModeHeadingText = 'Select date', inputModeHeadingText = 'Enter date', useHelperText: useHelperText_, weekStartDay = 'Monday', switch: switch__, fullScreen, today, clear = true, heading: heading_ = true, actions: actions_ = true, fullWidth, readOnly, disabled, valid: valid_, onClick: onClick_, onClose: onClose_, onToday: onToday_, onClear: onClear_, onCancel: onCancel_, onOk: onOk_, Icon: Icon_ = IconMaterialCalendarTodayW100Filled_1.default, IconEnter = IconMaterialEditW100_1.default, IconClose = IconMaterialCloseW100_1.default, WrapperProps, CalendarProps, CalendarPropsDesktop, CalendarPropsMobile, IconButtonProps, AdvancedTextFieldProps, TooltipProps, ButtonProps, ModalProps, IconProps, MobileSurfaceProps, className } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "MobileSurfaceProps", "className"]);
     const { classes } = useStyle();
     const refs = {
         root: react_1.default.useRef(undefined)
@@ -443,13 +443,13 @@ const DatePicker = react_1.default.forwardRef((props__, ref) => {
         textHeading = `${(0, date_1.format)(value[0], 'MMM')} ${(0, date_1.format)(value[0], 'DD')}${exports.SEPARATOR}${(0, date_1.format)(value[1], 'MMM')} ${(0, date_1.format)(value[1], 'DD')}`;
     }
     const dayNames = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
-    const mobile = ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ tonal: tonal, color: color, gap: 0, direction: 'column', Component: Line, className: (0, style_react_1.classNames)([
+    const mobile = ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ color: 'default', tonal: tonal, gap: 0, direction: 'column', Component: Line, className: (0, style_react_1.classNames)([
             (0, utils_2.staticClassName)('DatePicker', theme) && [
                 'onesy-DatePicker-mobile'
             ],
             classes.mobile,
             fullScreen && classes.mobile_fullScreen
-        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', className: (0, style_react_1.classNames)([
+        ]) }, MobileSurfaceProps, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('DatePicker', theme) && [
                         'onesy-DatePicker-header'
                     ],

package/Divider/Divider.js

@@ -162,7 +162,7 @@ const Divider = react_1.default.forwardRef((props_, ref) => {
             padding && classes[`orientation_${orientation}_padding`],
             color === 'inherit' && classes.color_inherit,
             tonal && classes.divider_tonal
-        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: children && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Surface, { version: 'filled', tonal: tonal, color: color, className: (0, style_react_1.classNames)([
+        ]), style: Object.assign(Object.assign({ opacity }, style), styles.root) }, other, { children: children && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Surface, { version: 'filled', tonal: tonal, color: color, className: (0, style_react_1.classNames)([
                         (0, utils_1.staticClassName)('Divider', theme) && [
                             'onesy-Divider-divider'
                         ],

package/SectionTextMedia/SectionTextMedia.js

@@ -16,7 +16,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("@onesy/utils");
 const style_react_1 = require("@onesy/style-react");
 const Text_1 = __importDefault(require("../Text"));
@@ -58,7 +57,6 @@ const SectionTextMedia = react_1.default.forwardRef((props_, ref) => {
     let mediaElement;
     const mediaProps = Object.assign({ size, themed: true, color: 'primary' }, MediaProps);
     const mime = (media === null || media === void 0 ? void 0 : media.mime) || '';
-    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
     if (mime.includes('image')) {
         mediaElement = ((0, jsx_runtime_1.jsx)(Image, Object.assign({ src: (media === null || media === void 0 ? void 0 : media.url) || (media === null || media === void 0 ? void 0 : media.urlSmall) || ((0, utils_1.is)('string', media) ? media : '') }, mediaProps, MediaProps, ImageProps, { className: (0, style_react_1.classNames)([
                 (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
@@ -111,7 +109,7 @@ const SectionTextMedia = react_1.default.forwardRef((props_, ref) => {
                                 'onesy-SectionTextMedia-description'
                             ],
                             DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.className
-                        ]) })))] })), button && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: true, version: 'filled', color: 'primary', size: size, onClick: (button.to || button.link) ? () => button.to ? navigate(button.to) : window.open(button.link, 'blank') : undefined }, button.props, { className: (0, style_react_1.classNames)([
+                        ]) })))] })), button && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: true, version: 'filled', color: 'primary', size: size, onClick: (button.to || button.link) && window.open(button.to || button.link, 'blank') }, button.props, { className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('SectionAction', theme) && [
                         'onesy-SectionTextMedia-button'
                     ],

package/esm/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 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", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "className"];
+const _excluded = ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "range", "now", "static", "openMobile", "placeholder", "calendars", "min", "max", "validate", "name", "nameFrom", "nameTo", "label", "labelFrom", "labelTo", "modeModalSubHeadingText", "modeModalSubHeadingTextRange", "selectModeHeadingText", "inputModeHeadingText", "useHelperText", "weekStartDay", "switch", "fullScreen", "today", "clear", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconEnter", "IconClose", "WrapperProps", "CalendarProps", "CalendarPropsDesktop", "CalendarPropsMobile", "IconButtonProps", "AdvancedTextFieldProps", "TooltipProps", "ButtonProps", "ModalProps", "IconProps", "MobileSurfaceProps", "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';
@@ -191,6 +191,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
       ButtonProps,
       ModalProps,
       IconProps,
+      MobileSurfaceProps,
       className
     } = props,
     other = _objectWithoutProperties(props, _excluded);
@@ -545,14 +546,14 @@ const DatePicker = /*#__PURE__*/React.forwardRef((props__, ref) => {
     textHeading = `${format(value[0], 'MMM')} ${format(value[0], 'DD')}${SEPARATOR}${format(value[1], 'MMM')} ${format(value[1], 'DD')}`;
   }
   const dayNames = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
-  const mobile = /*#__PURE__*/React.createElement(Surface, {
+  const mobile = /*#__PURE__*/React.createElement(Surface, _extends({
+    color: "default",
     tonal: tonal,
-    color: color,
     gap: 0,
     direction: "column",
     Component: Line,
     className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-mobile'], classes.mobile, fullScreen && classes.mobile_fullScreen])
-  }, /*#__PURE__*/React.createElement(Line, {
+  }, MobileSurfaceProps), /*#__PURE__*/React.createElement(Line, {
     gap: 0,
     direction: "column",
     className: classNames([staticClassName('DatePicker', theme) && ['onesy-DatePicker-header'], classes.header, fullScreen && classes.header_fullScreen])

package/esm/Divider/Divider.js

@@ -161,7 +161,9 @@ const Divider = /*#__PURE__*/React.forwardRef((props_, ref) => {
     color: color,
     Component: Component,
     className: classNames([staticClassName('Divider', theme) && ['onesy-Divider-root'], className, classes[children ? 'rootWithChildren' : 'root'], classes[`${children ? 'rootWithChildren_' : ''}orientation_${orientation}`], flex && classes[`flex_orientation_${orientation}`], inset && classes.inset, middle && classes[`${children ? `rootWithChildren_` : ''}orientation_${orientation}_middle`], padding && classes[`orientation_${orientation}_padding`], color === 'inherit' && classes.color_inherit, tonal && classes.divider_tonal]),
-    style: _objectSpread(_objectSpread({}, style), styles.root)
+    style: _objectSpread(_objectSpread({
+      opacity
+    }, style), styles.root)
   }, other), children && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Surface, {
     version: "filled",
     tonal: tonal,

package/esm/SectionTextMedia/SectionTextMedia.js

@@ -5,8 +5,7 @@ const _excluded = ["size", "title", "description", "button", "mediaPosition", "m
 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 { useNavigate } from 'react-router-dom';
-import { is, isEnvironment, textToInnerHTML } from '@onesy/utils';
+import { is, textToInnerHTML } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import TextElement from '../Text';
 import ImageElement from '../Image';
@@ -74,7 +73,6 @@ const SectionTextMedia = /*#__PURE__*/React.forwardRef((props_, ref) => {
     color: 'primary'
   }, MediaProps);
   const mime = media?.mime || '';
-  const navigate = isEnvironment('browser') && useNavigate();
   if (mime.includes('image')) {
     mediaElement = /*#__PURE__*/React.createElement(Image, _extends({
       src: media?.url || media?.urlSmall || (is('string', media) ? media : '')
@@ -128,7 +126,7 @@ const SectionTextMedia = /*#__PURE__*/React.forwardRef((props_, ref) => {
     version: "filled",
     color: "primary",
     size: size,
-    onClick: button.to || button.link ? () => button.to ? navigate(button.to) : window.open(button.link, 'blank') : undefined
+    onClick: (button.to || button.link) && window.open(button.to || button.link, 'blank')
   }, button.props, {
     className: classNames([staticClassName('SectionAction', theme) && ['onesy-SectionTextMedia-button'], button.props?.className, classes.button])
   }), button.text || 'Click here'));

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.7
+/** @license UiReact v1.0.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "UI for React",
   "repository": "https://github.com/onesy-org/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",