@onesy/ui-react 1.0.207 → 1.0.208

package/Divider/Divider.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
+import { IValueBreakpoints } from '../types';
+export declare type IDividerAlignment = 'start' | 'center' | 'end';
+export declare type IDividerOrientation = 'vertical' | 'horizontal';
 export declare type IDivider = ISurface & {
     inset?: boolean;
     middle?: boolean;
     padding?: number;
     opacity?: number;
-    alignment?: 'start' | 'center' | 'end';
-    orientation?: 'vertical' | 'horizontal';
+    alignment?: IDividerAlignment | Partial<Record<IValueBreakpoints, IDividerAlignment>>;
+    orientation?: IDividerOrientation | Partial<Record<IValueBreakpoints, IDividerOrientation>>;
     flex?: boolean;
 };
 declare const Divider: React.FC<IDivider>;

package/Divider/Divider.js

@@ -12,8 +12,10 @@ var _styleReact = require("@onesy/style-react");
 var _Type = _interopRequireDefault(require("../Type"));
 var _Surface = _interopRequireDefault(require("../Surface"));
 var _utils = require("../utils");
+var _utils2 = require("@onesy/utils");
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["tonal", "color", "inset", "middle", "padding", "opacity", "alignment", "orientation", "flex", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "inset", "middle", "padding", "opacity", "alignment", "orientation", "flex", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -134,14 +136,15 @@ const Divider = props_ => {
   const Type = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Type) || _Type.default;
   const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
   const {
+      ref,
       tonal = true,
       color = 'inverted',
       inset,
       middle,
       padding,
       opacity = theme.palette.visual_contrast.default.opacity.divider,
-      alignment = 'center',
-      orientation = 'horizontal',
+      alignment: alignmentProps,
+      orientation: orientationProps,
       flex,
       Component: Component_ = 'hr',
       className,
@@ -158,11 +161,36 @@ const Divider = props_ => {
     start: {},
     end: {}
   };
+  const refs = {
+    root: _react.default.useRef(undefined)
+  };
+  const keys = _react.default.useMemo(() => {
+    const result = [];
+    const items = [alignmentProps, orientationProps];
+    items.forEach(item => {
+      if ((0, _utils2.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
+    });
+    return (0, _utils2.unique)(result);
+  }, [alignmentProps, orientationProps]);
+  const breakpoints = {};
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
+      element: refs.root.current
+    });
+  });
+  const alignment = (0, _utils.valueBreakpoints)(alignmentProps, 'center', breakpoints, theme);
+  const orientation = (0, _utils.valueBreakpoints)(orientationProps, 'horizontal', breakpoints, theme);
   let Component = Component_;
   if (children && Component === 'hr') Component = 'div';
   if (alignment === 'start') styles.start.flexBasis = '15%';
   if (alignment === 'end') styles.end.flexBasis = '15%';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, _objectSpread(_objectSpread({
+    ref: item_0 => {
+      if (ref) {
+        if ((0, _utils2.is)('function', ref)) ref(item_0);else ref.current = item_0;
+      }
+      refs.root.current = item_0;
+    },
     version: "filled",
     tonal: tonal,
     color: color,

package/esm/Divider/Divider.js

@@ -1,13 +1,15 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "inset", "middle", "padding", "opacity", "alignment", "orientation", "flex", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "inset", "middle", "padding", "opacity", "alignment", "orientation", "flex", "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 TypeElement from '../Type';
 import SurfaceElement from '../Surface';
-import { staticClassName } from '../utils';
+import { staticClassName, valueBreakpoints } from '../utils';
+import { is, unique } from '@onesy/utils';
+import useMediaQuery from '../useMediaQuery';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
@@ -126,14 +128,15 @@ const Divider = props_ => {
   const Type = theme?.elements?.Type || TypeElement;
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
+      ref,
       tonal = true,
       color = 'inverted',
       inset,
       middle,
       padding,
       opacity = theme.palette.visual_contrast.default.opacity.divider,
-      alignment = 'center',
-      orientation = 'horizontal',
+      alignment: alignmentProps,
+      orientation: orientationProps,
       flex,
       Component: Component_ = 'hr',
       className,
@@ -150,11 +153,36 @@ const Divider = props_ => {
     start: {},
     end: {}
   };
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const keys = React.useMemo(() => {
+    const result = [];
+    const items = [alignmentProps, orientationProps];
+    items.forEach(item => {
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
+    });
+    return unique(result);
+  }, [alignmentProps, orientationProps]);
+  const breakpoints = {};
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
+      element: refs.root.current
+    });
+  });
+  const alignment = valueBreakpoints(alignmentProps, 'center', breakpoints, theme);
+  const orientation = valueBreakpoints(orientationProps, 'horizontal', breakpoints, theme);
   let Component = Component_;
   if (children && Component === 'hr') Component = 'div';
   if (alignment === 'start') styles.start.flexBasis = '15%';
   if (alignment === 'end') styles.end.flexBasis = '15%';
   return /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
+    ref: item_0 => {
+      if (ref) {
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
+      }
+      refs.root.current = item_0;
+    },
     version: "filled",
     tonal: tonal,
     color: color,

package/esm/index.js

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

package/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.206
+/** @license UiReact v1.0.207
  *
  * 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.207",
+  "version": "1.0.208",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",