@1money/component-ui 0.0.1

package/lib/components/Radio/style/Radio.scss

@@ -0,0 +1,431 @@
+@use '@/styles/api' as theme;
+@use '@/styles/theme/functions' as theme-internal;
+
+$component: 'radio';
+
+.#{theme.$prefix}-#{$component} {
+  display: inline-flex;
+  gap: theme.spacing(gap, 300);
+  align-items: flex-start;
+  cursor: pointer;
+
+  &-box-wrapper {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    height: theme-internal.om-line-height-px(body, lg);
+  }
+
+  &-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+
+  &-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: theme.spacing(scale, 400);
+    height: theme.spacing(scale, 400);
+    overflow: hidden;
+    background-color: theme.palette(bg, 'default');
+    border: 1px solid theme.palette(border, 'default-secondary');
+    border-radius: theme.shape('full');
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+
+    &::after {
+      position: absolute;
+      width: theme.spacing(scale, 200);
+      height: theme.spacing(scale, 200);
+      background-color: theme.palette(icon, 'on-brand');
+      border-radius: theme.shape('full');
+      transform: scale(0);
+      opacity: 0;
+      transition:
+        transform 0.2s ease,
+        opacity 0.2s ease;
+      content: '';
+    }
+  }
+
+  &-input:checked + .#{theme.$prefix}-#{$component}-box {
+    background-color: theme.palette(bg, 'brand');
+    border-color: theme.palette(bg, 'brand');
+
+    &::after {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  &-input:focus-visible + .#{theme.$prefix}-#{$component}-box {
+    border-color: theme.palette(border, 'brand');
+    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
+  }
+
+  &-content {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &-label {
+    @include theme.typography(body, lg, $strong: true);
+
+    color: theme.palette(text, 'default');
+  }
+
+  &-description {
+    @include theme.typography(body, md, $strong: true);
+
+    color: theme.palette(text, 'default-tertiary');
+  }
+
+  &-tag {
+    display: inline-flex;
+    margin-top: theme.spacing(gap, 100);
+  }
+
+  &-cell {
+    position: relative;
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  &-cell-input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+
+  &-cell-panel {
+    --om-radio-cell-icon: #{theme.palette(icon, 'default')};
+    --om-radio-cell-indicator-icon: #{theme.palette(icon, 'on-brand')};
+
+    position: relative;
+    display: flex;
+    gap: theme.spacing(gap, 300);
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    background-color: theme.palette(bg, 'default');
+    border: 1px solid theme.palette(border, 'default');
+    border-radius: theme.shape(300);
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  &-cell-indicator,
+  &-cell-icon,
+  &-cell-radio {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-cell-indicator {
+    width: theme.spacing(scale, 800);
+    height: theme.spacing(scale, 800);
+    color: var(--om-radio-cell-icon);
+    background-color: theme.palette(bg, 'neutral-tertiary');
+    border-radius: theme.shape('full');
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease;
+  }
+
+  &-cell-indicator-compact {
+    width: theme.spacing(scale, 600);
+    height: theme.spacing(scale, 600);
+  }
+
+  &-cell-icon {
+    color: var(--om-radio-cell-icon);
+  }
+
+  &-cell-radio {
+    width: theme.spacing(scale, 400);
+    height: theme.spacing(scale, 400);
+    background-color: theme.palette(bg, 'default');
+    border: 1px solid theme.palette(border, 'default-secondary');
+    border-radius: theme.shape('full');
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease;
+  }
+
+  &-cell-radio-dot {
+    width: theme.spacing(scale, 100);
+    height: theme.spacing(scale, 100);
+    background-color: theme.palette(icon, 'on-brand');
+    border-radius: theme.shape('full');
+    transform: scale(0);
+    opacity: 0;
+    transition:
+      transform 0.2s ease,
+      opacity 0.2s ease;
+  }
+
+  &-cell .#{theme.$prefix}-#{$component}-content {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &-cell .#{theme.$prefix}-#{$component}-label {
+    @include theme.typography(body, lg, $strong: true);
+  }
+
+  &-cell .#{theme.$prefix}-#{$component}-description {
+    @include theme.typography(body, md);
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-large {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 400);
+    }
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-medium,
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-small {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 300) theme.spacing(scale, 400);
+    }
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-medium {
+    .#{theme.$prefix}-#{$component}-label {
+      @include theme.typography(body, lg);
+    }
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-small {
+    .#{theme.$prefix}-#{$component}-content {
+      justify-content: center;
+    }
+
+    .#{theme.$prefix}-#{$component}-label {
+      @include theme.typography(body, lg, $strong: true);
+    }
+
+    .#{theme.$prefix}-#{$component}-description {
+      @include theme.typography(body, md, $strong: true);
+    }
+  }
+
+  &-cell-vertical {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .#{theme.$prefix}-#{$component}-content {
+      align-items: center;
+      text-align: center;
+    }
+
+    .#{theme.$prefix}-#{$component}-label,
+    .#{theme.$prefix}-#{$component}-description {
+      text-align: center;
+    }
+  }
+
+  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-large {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 600) theme.spacing(scale, 400);
+    }
+  }
+
+  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-medium,
+  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-small {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 400);
+    }
+
+    .#{theme.$prefix}-#{$component}-label {
+      @include theme.typography(body, lg);
+    }
+  }
+
+  &-cell-input:checked + .#{theme.$prefix}-#{$component}-cell-panel {
+    background-color: theme.palette(bg, 'default-secondary');
+    border-color: theme.palette(border, 'brand');
+  }
+
+  &-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel
+    .#{theme.$prefix}-#{$component}-cell-indicator {
+    background-color: theme.palette(bg, 'brand');
+  }
+
+  &-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel
+    .#{theme.$prefix}-#{$component}-cell-radio {
+    background-color: theme.palette(bg, 'brand');
+    border-color: theme.palette(border, 'brand');
+  }
+
+  &-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel
+    .#{theme.$prefix}-#{$component}-cell-radio-dot {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &-cell-vertical
+    .#{theme.$prefix}-#{$component}-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel {
+      border-width: 1px;
+  }
+
+  &-cell-input:focus-visible + .#{theme.$prefix}-#{$component}-cell-panel {
+    border-color: theme.palette(border, 'brand');
+    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
+  }
+
+  &:not(&-disabled):hover {
+    .#{theme.$prefix}-#{$component}-box {
+      border-color: theme.palette(border, 'default-tertiary');
+    }
+
+    .#{theme.$prefix}-#{$component}-input:checked
+      + .#{theme.$prefix}-#{$component}-box {
+      background-color: theme.palette(bg, 'brand-hover');
+      border-color: theme.palette(bg, 'brand-hover');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      border-color: theme.palette(border, 'default-tertiary');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-input:checked
+      + .#{theme.$prefix}-#{$component}-cell-panel {
+      border-color: theme.palette(border, 'brand');
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+
+    .#{theme.$prefix}-#{$component}-box {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-input:checked
+      + .#{theme.$prefix}-#{$component}-box {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-input:checked
+      + .#{theme.$prefix}-#{$component}-box::after {
+      background-color: theme.palette(icon, 'on-disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-label,
+    .#{theme.$prefix}-#{$component}-description {
+      color: theme.palette(text, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-indicator {
+      color: theme.palette(icon, 'on-disabled');
+      background-color: theme.palette(bg, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-icon {
+      color: theme.palette(icon, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-radio {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-radio-dot {
+      background-color: theme.palette(icon, 'on-disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-tag {
+      opacity: theme.opacity('disabled-heavy');
+    }
+  }
+
+  &-right {
+    .#{theme.$prefix}-#{$component}-box-wrapper {
+      order: 1;
+    }
+
+    .#{theme.$prefix}-#{$component}-content {
+      order: 0;
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-indicator,
+    .#{theme.$prefix}-#{$component}-cell-icon,
+    .#{theme.$prefix}-#{$component}-cell-radio {
+      order: 1;
+    }
+
+    .#{theme.$prefix}-#{$component}-cell .#{theme.$prefix}-#{$component}-content {
+      order: 0;
+    }
+  }
+}
+
+$group-component: 'radio-group';
+
+.#{theme.$prefix}-#{$group-component} {
+  display: flex;
+
+  &-vertical {
+    flex-direction: column;
+    gap: theme.spacing(gap, 300);
+  }
+
+  &-horizontal {
+    flex-flow: row wrap;
+    gap: theme.spacing(gap, 600);
+  }
+
+  &-cell.#{theme.$prefix}-#{$group-component}-vertical {
+    gap: theme.spacing(gap, 300);
+
+    > .#{theme.$prefix}-#{$component} {
+      width: 100%;
+    }
+  }
+
+  &-cell.#{theme.$prefix}-#{$group-component}-horizontal {
+    gap: theme.spacing(gap, 300);
+    align-items: stretch;
+
+    > .#{theme.$prefix}-#{$component} {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+  }
+}

package/lib/components/Radio/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@/components/Tag/style/css");
+require("./Radio.css");
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vc3JjL2NvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOlsicmVxdWlyZSJdLCJtYXBwaW5ncyI6Ijs7QUFBQUEsT0FBQTtBQUNBQSxPQUFBIiwiZmlsZSI6ImNvbXBvbmVudHMvUmFkaW8vc3R5bGUvY3NzLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/lib/components/Radio/style/index.d.ts

@@ -0,0 +1,2 @@
+import "../../Tag/style";
+import './Radio.scss';

package/lib/components/Radio/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@/components/Tag/style");
+require("./Radio.scss");
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vc3JjL2NvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOlsicmVxdWlyZSJdLCJtYXBwaW5ncyI6Ijs7QUFBQUEsT0FBQTtBQUNBQSxPQUFBIiwiZmlsZSI6ImNvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/lib/components/ResizeObserver/Collection.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { SizeInfo } from './interface';
+type OnCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void;
+export declare const CollectionContext: React.Context<OnCollectionResize | null>;
+export interface ResizeInfo {
+    size: SizeInfo;
+    data: any;
+    element: HTMLElement;
+}
+export interface CollectionProps {
+    /** Trigger when some children ResizeObserver changed. Collect by frame render level */
+    onBatchResize?: (resizeInfo: ResizeInfo[]) => void;
+    children?: React.ReactNode;
+}
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+export declare function Collection({ children, onBatchResize }: CollectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ResizeObserver/Collection.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Collection = Collection;
+exports.CollectionContext = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var CollectionContext = exports.CollectionContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+function Collection(_ref) {
+  var children = _ref.children,
+    onBatchResize = _ref.onBatchResize;
+  var resizeIdRef = React.useRef(0);
+  var resizeInfosRef = React.useRef([]);
+  var onCollectionResize = React.useContext(CollectionContext);
+  var onBatchResizeRef = React.useRef(onBatchResize);
+  onBatchResizeRef.current = onBatchResize;
+  var onCollectionResizeRef = React.useRef(onCollectionResize);
+  onCollectionResizeRef.current = onCollectionResize;
+  var onResize = React.useCallback(function (size, element, data) {
+    var _a;
+    resizeIdRef.current += 1;
+    var currentId = resizeIdRef.current;
+    resizeInfosRef.current.push({
+      size: size,
+      element: element,
+      data: data
+    });
+    Promise.resolve().then(function () {
+      var _a;
+      if (currentId === resizeIdRef.current) {
+        (_a = onBatchResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onBatchResizeRef, resizeInfosRef.current);
+        resizeInfosRef.current = [];
+      }
+    });
+    // Continue bubbling if parent exist
+    (_a = onCollectionResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onCollectionResizeRef, size, element, data);
+  }, []);
+  return (0, _jsxRuntime.jsx)(CollectionContext.Provider, {
+    value: onResize,
+    children: children
+  });
+}
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvQ29sbGVjdGlvbi5qcyIsImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvQ29sbGVjdGlvbi50c3giXSwibmFtZXMiOlsiX2pzeFJ1bnRpbWUiLCJyZXF1aXJlIiwiUmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVXaWxkY2FyZCIsIl9nZXRSZXF1aXJlV2lsZGNhcmRDYWNoZSIsImUiLCJXZWFrTWFwIiwiciIsInQiLCJfX2VzTW9kdWxlIiwiX3R5cGVvZiIsImhhcyIsImdldCIsIm4iLCJfX3Byb3RvX18iLCJhIiwiT2JqZWN0IiwiZGVmaW5lUHJvcGVydHkiLCJnZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3IiLCJ1IiwiaGFzT3duUHJvcGVydHkiLCJjYWxsIiwiaSIsInNldCIsIkNvbGxlY3Rpb25Db250ZXh0IiwiZXhwb3J0cyIsImNyZWF0ZUNvbnRleHQiLCJDb2xsZWN0aW9uIiwiX3JlZiIsImNoaWxkcmVuIiwib25CYXRjaFJlc2l6ZSIsInJlc2l6ZUlkUmVmIiwidXNlUmVmIiwicmVzaXplSW5mb3NSZWYiLCJvbkNvbGxlY3Rpb25SZXNpemUiLCJ1c2VDb250ZXh0Iiwib25CYXRjaFJlc2l6ZVJlZiIsImN1cnJlbnQiLCJvbkNvbGxlY3Rpb25SZXNpemVSZWYiLCJvblJlc2l6ZSIsInVzZUNhbGxiYWNrIiwic2l6ZSIsImVsZW1lbnQiLCJkYXRhIiwiX2EiLCJjdXJyZW50SWQiLCJwdXNoIiwiUHJvbWlzZSIsInJlc29sdmUiLCJ0aGVuIiwiX2pzeCIsIlByb3ZpZGVyIiwidmFsdWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsSUFBQUEsV0FBQSxHQUFBQyxPQUFBO0FDQUEsSUFBQUMsS0FBQSxHQUFBQyx1QkFBQSxDQUFBRixPQUFBO0FBQStCLFNBQUFHLHlCQUFBQyxDQUFBLDZCQUFBQyxPQUFBLG1CQUFBQyxDQUFBLE9BQUFELE9BQUEsSUFBQUUsQ0FBQSxPQUFBRixPQUFB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QUFSLGdCQUFnQixDQUFDQyxPQUFPLE1BQUEsSUFBQSxJQUFBTyxFQUFBLEtBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQSxDQUFBLEdBQUFBLEVBQUEsQ0FBQXZCLElBQUEsQ0FBQWUsZ0JBQUEsRUFBR0gsY0FBYyxDQUFDSSxPQUFPLENBQUM7UUFDbERKLGNBQWMsQ0FBQ0ksT0FBTyxHQUFHLEVBQUU7TUFDN0I7SUFDRixDQUFDLENBQUM7SUFFRjtJQUNBLENBQUFPLEVBQUEsR0FBQU4scUJBQXFCLENBQUNELE9BQU8sTUFBQSxJQUFBLElBQUFPLEVBQUEsS0FBQSxLQUFBLENBQUEsR0FBQSxLQUFBLENBQUEsR0FBQUEsRUFBQSxDQUFBdkIsSUFBQSxDQUFBaUIscUJBQUEsRUFBR0csSUFBSSxFQUFFQyxPQUFPLEVBQUVDLElBQUksQ0FBQztFQUN0RCxDQUFDLEVBQ0QsRUFBRSxDQUNIO0VBRUQsT0FBTyxJQUFBTyxlQUFBLEVBQUMxQixpQkFBaUIsQ0FBQzJCLFFBQVEsRUFBQTtJQUFDQyxLQUFLLEVBQUViLFFBQVE7SUFBQVYsUUFBQSxFQUFHQTtFQUFRLENBQUEsQ0FBOEI7QUFDN0YiLCJmaWxlIjoiY29tcG9uZW50cy9SZXNpemVPYnNlcnZlci9Db2xsZWN0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3ggfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmV4cG9ydCBjb25zdCBDb2xsZWN0aW9uQ29udGV4dCA9IFJlYWN0LmNyZWF0ZUNvbnRleHQobnVsbCk7XG4vKipcbiAqIENvbGxlY3QgYWxsIHRoZSByZXNpemUgZXZlbnQgZnJvbSBjaGlsZHJlbiBSZXNpemVPYnNlcnZlclxuICovXG5leHBvcnQgZnVuY3Rpb24gQ29sbGVjdGlvbih7IGNoaWxkcmVuLCBvbkJhdGNoUmVzaXplIH0pIHtcbiAgICBjb25zdCByZXNpemVJZFJlZiA9IFJlYWN0LnVzZVJlZigwKTtcbiAgICBjb25zdCByZXNpemVJbmZvc1JlZiA9IFJlYWN0LnVzZVJlZihbXSk7XG4gICAgY29uc3Qgb25Db2xsZWN0aW9uUmVzaXplID0gUmVhY3QudXNlQ29udGV4dChDb2xsZWN0aW9uQ29udGV4dCk7XG4gICAgY29uc3Qgb25CYXRjaFJlc2l6ZVJlZiA9IFJlYWN0LnVzZVJlZihvbkJhdGNoUmVzaXplKTtcbiAgICBvbkJhdGNoUmVzaXplUmVmLmN1cnJlbnQgPSBvbkJhdGNoUmVzaXplO1xuICAgIGNvbnN0IG9uQ29sbGVjdGlvblJlc2l6ZVJlZiA9IFJlYWN0LnVzZVJlZihvbkNvbGxlY3Rpb25SZXNpemUpO1xuICAgIG9uQ29sbGVjdGlvblJlc2l6ZVJlZi5jdXJyZW50ID0gb25Db2xsZWN0aW9uUmVzaXplO1xuICAgIGNvbnN0IG9uUmVzaXplID0gUmVhY3QudXNlQ2FsbGJhY2soKHNpemUsIGVsZW1lbnQsIGRhdGEpID0+IHtcbiAgICAgICAgdmFyIF9hO1xuICAgICAgICByZXNpemVJZFJlZi5jdXJyZW50ICs9IDE7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRJZCA9IHJlc2l6ZUlkUmVmLmN1cnJlbnQ7XG4gICAgICAgIHJlc2l6ZUluZm9zUmVmLmN1cnJlbnQucHVzaCh7XG4gICAgICAgICAgICBzaXplLFxuICAgICAgICAgICAgZWxlbWVudCxcbiAgICAgICAgICAgIGRhdGEsXG4gICAgICAgIH0pO1xuICAgICAgICBQcm9taXNlLnJlc29sdmUoKS50aGVuKCgpID0+IHtcbiAgICAgICAgICAgIHZhciBfYTtcbiAgICAgICAgICAgIGlmIChjdXJyZW50SWQgPT09IHJlc2l6ZUlkUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICAgICAgICAoX2EgPSBvbkJhdGNoUmVzaXplUmVmLmN1cnJlbnQpID09PSBudWxsIHx8IF9hID09PSB2b2lkIDAgPyB2b2lkIDAgOiBfYS5jYWxsKG9uQmF0Y2hSZXNpemVSZWYsIHJlc2l6ZUluZm9zUmVmLmN1cnJlbnQpO1xuICAgICAgICAgICAgICAgIHJlc2l6ZUluZm9zUmVmLmN1cnJlbnQgPSBbXTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICAgIC8vIENvbnRpbnVlIGJ1YmJsaW5nIGlmIHBhcmVudCBleGlzdFxuICAgICAgICAoX2EgPSBvbkNvbGxlY3Rpb25SZXNpemVSZWYuY3VycmVudCkgPT09IG51bGwgfHwgX2EgPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9hLmNhbGwob25Db2xsZWN0aW9uUmVzaXplUmVmLCBzaXplLCBlbGVtZW50LCBkYXRhKTtcbiAgICB9LCBbXSk7XG4gICAgcmV0dXJuIF9qc3goQ29sbGVjdGlvbkNvbnRleHQuUHJvdmlkZXIsIHsgdmFsdWU6IG9uUmVzaXplLCBjaGlsZHJlbjogY2hpbGRyZW4gfSk7XG59IixudWxsXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/lib/components/ResizeObserver/ResizeObserver.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { ResizeObserverProps } from './interface';
+import { Collection } from './Collection';
+declare const RefResizeObserver: React.ForwardRefExoticComponent<React.PropsWithoutRef<ResizeObserverProps> & React.RefAttributes<any>> & {
+    Collection: typeof Collection;
+};
+export default RefResizeObserver;

package/lib/components/ResizeObserver/ResizeObserver.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _reactUtil = require("./utils/reactUtil");
+var _SingleObserver = _interopRequireDefault(require("./SingleObserver"));
+var _Collection = require("./Collection");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var INTERNAL_PREFIX_KEY = 'om-react-ui-observer-key';
+function ResizeObserver(props, ref) {
+  var _a;
+  var children = props.children;
+  var childNodes = typeof children === 'function' ? [children] : (0, _reactUtil.toArray)(children);
+  // eslint-disable-next-line no-undef
+  if (typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) !== 'production') {
+    if (childNodes.length > 1) {
+      console.warn('[ResizeObserver] Find more than one child node with `children`. Please use ResizeObserver.Collection instead.');
+    } else if (childNodes.length === 0) {
+      console.warn('[ResizeObserver] `children` is empty. Nothing is in observe.');
+    }
+  }
+  return childNodes.map(function (child, index) {
+    var key = (child === null || child === void 0 ? void 0 : child.key) || "".concat(INTERNAL_PREFIX_KEY, "-").concat(index);
+    return /*#__PURE__*/(0, _react.createElement)(_SingleObserver["default"], Object.assign({}, props, {
+      key: key,
+      ref: index === 0 ? ref : undefined
+    }), child);
+  });
+}
+var RefResizeObserver = /*#__PURE__*/React.forwardRef(ResizeObserver);
+RefResizeObserver.displayName = 'ResizeObserver';
+RefResizeObserver.Collection = _Collection.Collection;
+var _default = exports["default"] = RefResizeObserver;
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvUmVzaXplT2JzZXJ2ZXIuanMiLCJjb21wb25lbnRzL3NyYy9jb21wb25lbnRzL1Jlc2l6ZU9ic2VydmVyL1Jlc2l6ZU9ic2VydmVyLnRzeCJdLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVXaWxkY2FyZCIsInJlcXVpcmUiLCJSZWFjdCIsIl9yZWFjdFV0aWwiLCJfU2luZ2xlT2JzZXJ2ZXIiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwiX0NvbGxlY3Rpb24iLCJfZ2V0UmVxdWlyZVdpbGRjYXJkQ2FjaGUiLCJlIiwiV2Vha01hcCIsInIiLCJ0IiwiX19lc01vZHVsZSIsIl90eXBlb2YiLCJoYXMiLCJnZXQiLCJuIiwiX19wcm90b19fIiwiYSIsIk9iamVjdCIsImRlZmluZVByb3BlcnR5IiwiZ2V0T3duUHJvcGVydHlEZXNjcmlwdG9yIiwidSIsImhhc093blByb3BlcnR5IiwiY2FsbCIsImkiLCJzZXQiLCJJTlRFUk5BTF9QUkVGSVhfS0VZIiwiUmVzaXplT2JzZXJ2ZXIiLCJwcm9wcyIsInJlZiIsIl9hIiwiY2hpbGRyZW4iLCJjaGlsZE5vZGVzIiwidG9BcnJheSIsInByb2Nlc3MiLCJlbnYiLCJOT0RFX0VOViIsImxlbmd0aCIsImNvbnNvbGUiLCJ3YXJuIiwibWFwIiwiY2hpbGQiLCJpbmRleCIsImtleSIsImNvbmNhdCIsIl9jcmVhdGVFbGVtZW50IiwiU2luZ2xlT2JzZXJ2ZXIiLCJhc3NpZ24iLCJ1bmRlZmluZWQiLCJSZWZSZXNpemVPYnNlcnZlciIsImZvcndhcmRSZWYiLCJkaXNwbGF5TmFtZSIsIkNvbGxlY3Rpb24iLCJfZGVmYXVsdCIsImV4cG9ydHMiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsSUFBQUEsTUFBQSxHQUFBQyx1QkFBQSxDQUFBQyxPQUFBO0FBQXdELElBQUFDLEtBQUEsR0FBQUgsTUFBQTtBQ0V4RCxJQUFBSSxVQUFBLEdBQUFGLE9BQUE7QUFDQSxJ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QixNQUFBLENBQUEsQ0FBQSxDQUFBLEVBQUtuQixLQUFLLEVBQUE7TUFBRWUsR0FBRyxFQUFFQSxHQUFHO01BQUVkLEdBQUcsRUFBRWEsS0FBSyxLQUFLLENBQUMsR0FBR2IsR0FBRyxHQUFHbUI7SUFBUyxDQUFBLENBQUEsRUFDcEVQLEtBQVksQ0FDRTtFQUVyQixDQUFDLENBQThCO0FBQ2pDO0FBRUEsSUFBTVEsaUJBQWlCLGdCQUFHaEQsS0FBSyxDQUFDaUQsVUFBVSxDQUFDdkIsY0FBYyxDQUl4RDtBQUVEc0IsaUJBQWlCLENBQUNFLFdBQVcsR0FBRyxnQkFBZ0I7QUFDaERGLGlCQUFpQixDQUFDRyxVQUFVLEdBQUdBLHNCQUFVO0FBQUMsSUFBQUMsUUFBQSxHQUFBQyxPQUFBLGNBRTNCTCxpQkFBaUIiLCJmaWxlIjoiY29tcG9uZW50cy9SZXNpemVPYnNlcnZlci9SZXNpemVPYnNlcnZlci5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUVsZW1lbnQgYXMgX2NyZWF0ZUVsZW1lbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHRvQXJyYXkgfSBmcm9tICcuL3V0aWxzL3JlYWN0VXRpbCc7XG5pbXBvcnQgU2luZ2xlT2JzZXJ2ZXIgZnJvbSAnLi9TaW5nbGVPYnNlcnZlcic7XG5pbXBvcnQgeyBDb2xsZWN0aW9uIH0gZnJvbSAnLi9Db2xsZWN0aW9uJztcbmNvbnN0IElOVEVSTkFMX1BSRUZJWF9LRVkgPSAnb20tcmVhY3QtdWktb2JzZXJ2ZXIta2V5JztcbmZ1bmN0aW9uIFJlc2l6ZU9ic2VydmVyKHByb3BzLCByZWYpIHtcbiAgICB2YXIgX2E7XG4gICAgY29uc3QgeyBjaGlsZHJlbiB9ID0gcHJvcHM7XG4gICAgY29uc3QgY2hpbGROb2RlcyA9IHR5cGVvZiBjaGlsZHJlbiA9PT0gJ2Z1bmN0aW9uJyA/IFtjaGlsZHJlbl0gOiB0b0FycmF5KGNoaWxkcmVuKTtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tdW5kZWZcbiAgICBpZiAodHlwZW9mIHByb2Nlc3MgIT09ICd1bmRlZmluZWQnICYmICgoX2EgPSBwcm9jZXNzLmVudikgPT09IG51bGwgfHwgX2EgPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9hLk5PREVfRU5WKSAhPT0gJ3Byb2R1Y3Rpb24nKSB7XG4gICAgICAgIGlmIChjaGlsZE5vZGVzLmxlbmd0aCA+IDEpIHtcbiAgICAgICAgICAgIGNvbnNvbGUud2FybignW1Jlc2l6ZU9ic2VydmVyXSBGaW5kIG1vcmUgdGhhbiBvbmUgY2hpbGQgbm9kZSB3aXRoIGBjaGlsZHJlbmAuIFBsZWFzZSB1c2UgUmVzaXplT2JzZXJ2ZXIuQ29sbGVjdGlvbiBpbnN0ZWFkLicpO1xuICAgICAgICB9XG4gICAgICAgIGVsc2UgaWYgKGNoaWxkTm9kZXMubGVuZ3RoID09PSAwKSB7XG4gICAgICAgICAgICBjb25zb2xlLndhcm4oJ1tSZXNpemVPYnNlcnZlcl0gYGNoaWxkcmVuYCBpcyBlbXB0eS4gTm90aGluZyBpcyBpbiBvYnNlcnZlLicpO1xuICAgICAgICB9XG4gICAgfVxuICAgIHJldHVybiBjaGlsZE5vZGVzLm1hcCgoY2hpbGQsIGluZGV4KSA9PiB7XG4gICAgICAgIGNvbnN0IGtleSA9IChjaGlsZCA9PT0gbnVsbCB8fCBjaGlsZCA9PT0gdm9pZCAwID8gdm9pZCAwIDogY2hpbGQua2V5KSB8fCBgJHtJTlRFUk5BTF9QUkVGSVhfS0VZfS0ke2luZGV4fWA7XG4gICAgICAgIHJldHVybiAoX2NyZWF0ZUVsZW1lbnQoU2luZ2xlT2JzZXJ2ZXIsIE9iamVjdC5hc3NpZ24oe30sIHByb3BzLCB7IGtleToga2V5LCByZWY6IGluZGV4ID09PSAwID8gcmVmIDogdW5kZWZpbmVkIH0pLCBjaGlsZCkpO1xuICAgIH0pO1xufVxuY29uc3QgUmVmUmVzaXplT2JzZXJ2ZXIgPSBSZWFjdC5mb3J3YXJkUmVmKFJlc2l6ZU9ic2VydmVyKTtcblJlZlJlc2l6ZU9ic2VydmVyLmRpc3BsYXlOYW1lID0gJ1Jlc2l6ZU9ic2VydmVyJztcblJlZlJlc2l6ZU9ic2VydmVyLkNvbGxlY3Rpb24gPSBDb2xsZWN0aW9uO1xuZXhwb3J0IGRlZmF1bHQgUmVmUmVzaXplT2JzZXJ2ZXI7IixudWxsXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/lib/components/ResizeObserver/SingleObserver/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { ResizeObserverProps } from '../interface';
+export interface SingleObserverProps extends ResizeObserverProps {
+    children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
+}
+declare const RefSingleObserver: React.ForwardRefExoticComponent<SingleObserverProps & React.RefAttributes<HTMLElement>>;
+export default RefSingleObserver;

package/lib/components/ResizeObserver/SingleObserver/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Collection = require("../Collection");
+var _useResizeObserver = _interopRequireDefault(require("../useResizeObserver"));
+var _reactUtil = require("../utils/reactUtil");
+var _ref = require("../../../utils/ref");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function SingleObserver(props, ref) {
+  var children = props.children,
+    disabled = props.disabled,
+    onResize = props.onResize,
+    data = props.data;
+  var elementRef = React.useRef(null);
+  var onCollectionResize = React.useContext(_Collection.CollectionContext);
+  // =========================== Children ===========================
+  var isRenderProps = typeof children === 'function';
+  var mergedChildren = isRenderProps ? children(elementRef) : children;
+  // ============================= Ref ==============================
+  var canRef = !isRenderProps && /*#__PURE__*/React.isValidElement(mergedChildren) && (0, _reactUtil.supportRef)(mergedChildren);
+  var originRef = canRef ? (0, _reactUtil.getNodeRef)(mergedChildren) : null;
+  var mergedRef = (0, _ref.useComposeRef)(originRef, elementRef);
+  var getDomElement = React.useCallback(function () {
+    return (0, _reactUtil.getDOM)(elementRef.current);
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return getDomElement();
+  });
+  // =========================== Observe ============================
+  (0, _useResizeObserver["default"])(!disabled, getDomElement, onResize, function (sizeInfo, target) {
+    onCollectionResize === null || onCollectionResize === void 0 ? void 0 : onCollectionResize(sizeInfo, target, data);
+  });
+  // ============================ Render ============================
+  return canRef ? /*#__PURE__*/React.cloneElement(mergedChildren, {
+    ref: mergedRef
+  }) : mergedChildren;
+}
+var RefSingleObserver = /*#__PURE__*/React.forwardRef(SingleObserver);
+RefSingleObserver.displayName = 'SingleObserver';
+var _default = exports["default"] = RefSingleObserver;
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvc3JjL2NvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvU2luZ2xlT2JzZXJ2ZXIvaW5kZXgudHN4IiwiY29tcG9uZW50cy9SZXNpemVPYnNlcnZlci9TaW5nbGVPYnNlcnZlci9pbmRleC5qcyJdLCJuYW1lcyI6WyJSZWFjdCIsIl9pbnRlcm9wUmVxdWlyZVdpbGRjYXJkIiwicmVxdWlyZSIsIl9Db2xsZWN0aW9uIiwiX3VzZVJlc2l6ZU9ic2VydmVyIiwiX2ludGVyb3BSZXF1aXJlRGVmYXVsdCIsIl9yZWFjdFV0aWwiLCJfcmVmIiwiX2dldFJlcXVpcmVXaWxkY2FyZENhY2hlIiwiZSIsIldlYWtNYXAiLCJyIiwidCIsIl9fZXNNb2R1bGUiLCJfdHlwZW9mIiwiaGFzIiwiZ2V0IiwibiIsIl9fcHJvdG9fXyIsImEiLCJPYmplY3QiLCJkZWZpbmVQcm9wZXJ0eSIsImdldE93blByb3BlcnR5RGVzY3JpcHRvciIsInUiLCJoYXNPd25Qcm9wZXJ0eSIsImNhbGwiLCJpIiwic2V0IiwiU2luZ2xlT2JzZXJ2ZXIiLCJwcm9wcyIsInJlZiIsImNoaWxkcmVuIiwiZGlzYWJsZWQiLCJvblJlc2l6ZSIsImRhdGEiLCJlbGVtZW50UmVmIiwidXNlUmVmIiwib25Db2xsZWN0aW9uUmVzaXplIiwidXNlQ29udGV4dCIsIkNvbGxlY3Rpb25Db250ZXh0IiwiaXNSZW5kZXJQcm9wcyIsIm1lcmdlZENoaWxkcmVuIiwiY2FuUmVmIiwiaXNWYWxpZEVsZW1lbnQiLCJzdXBwb3J0UmVmIiwib3JpZ2luUmVmIiwiZ2V0Tm9kZVJlZiIsIm1lcmdlZFJlZiIsInVzZUNvbXBvc2VSZWYiLCJnZXREb21FbGVtZW50IiwidXNlQ2FsbGJhY2siLCJnZXRET00iLCJjdXJyZW50IiwidXNlSW1wZXJhdGl2ZUhhbmRsZSIsInVzZVJlc2l6ZU9ic2VydmVyIiwic2l6ZUluZm8iLCJ0YXJnZXQiLCJjbG9uZUVsZW1lbnQiLCJSZWZTaW5nbGVPYnNl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QUFHakQsS0FBSyxDQUFDa0QsV0FBVyxDQUNyQztJQUFBLE9BQU0sSUFBQUMsaUJBQU0sRUFBQ2hCLFVBQVUsQ0FBQ2lCLE9BQU8sQ0FBZ0I7RUFBQSxHQUMvQyxFQUFFLENBQ0g7RUFFRHBELEtBQUssQ0FBQ3FELG1CQUFtQixDQUFDdkIsR0FBRyxFQUFFO0lBQUEsT0FBTW1CLGFBQWEsQ0FBQSxDQUFFO0VBQUEsRUFBQztFQUVyRDtFQUNBLElBQUFLLDZCQUFpQixFQUFDLENBQUN0QixRQUFRLEVBQUVpQixhQUFhLEVBQUVoQixRQUFRLEVBQUUsVUFBQ3NCLFFBQVEsRUFBRUMsTUFBTSxFQUFJO0lBQ3pFbkIsa0JBQWtCLEtBQUEsSUFBQSxJQUFsQkEsa0JBQWtCLEtBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQSxDQUFBLEdBQWxCQSxrQkFBa0IsQ0FBR2tCLFFBQVEsRUFBRUMsTUFBTSxFQUFFdEIsSUFBSSxDQUFDO0VBQzlDLENBQUMsQ0FBQztFQUVGO0VBQ0EsT0FBT1EsTUFBTSxnQkFDVDFDLEtBQUssQ0FBQ3lELFlBQVksQ0FBQ2hCLGNBQXlDLEVBQUU7SUFDNURYLEdBQUcsRUFBRWlCO0VDakJMLENEa0JELENBQUMsR0FDRk4sY0FBYztBQUNwQjtBQUVBLElBQU1pQixpQkFBaUIsZ0JBQUcxRCxLQUFLLENBQUMyRCxVQUFVLENBQUMvQixjQUFjLENBQUM7QUFFMUQ4QixpQkFBaUIsQ0FBQ0UsV0FBVyxHQUFHLGdCQUFnQjtBQUFDLElBQUFDLFFBQUEsR0FBQUMsT0FBQSxjQUVsQ0osaUJBQWlCIiwiZmlsZSI6ImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvU2luZ2xlT2JzZXJ2ZXIvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGwsImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IENvbGxlY3Rpb25Db250ZXh0IH0gZnJvbSAnLi4vQ29sbGVjdGlvbic7XG5pbXBvcnQgdXNlUmVzaXplT2JzZXJ2ZXIgZnJvbSAnLi4vdXNlUmVzaXplT2JzZXJ2ZXInO1xuaW1wb3J0IHsgZ2V0RE9NLCBzdXBwb3J0UmVmLCBnZXROb2RlUmVmIH0gZnJvbSAnLi4vdXRpbHMvcmVhY3RVdGlsJztcbmltcG9ydCB7IHVzZUNvbXBvc2VSZWYgfSBmcm9tICcuLi8uLi8uLi91dGlscy9yZWYnO1xuZnVuY3Rpb24gU2luZ2xlT2JzZXJ2ZXIocHJvcHMsIHJlZikge1xuICAgIGNvbnN0IHsgY2hpbGRyZW4sIGRpc2FibGVkLCBvblJlc2l6ZSwgZGF0YSB9ID0gcHJvcHM7XG4gICAgY29uc3QgZWxlbWVudFJlZiA9IFJlYWN0LnVzZVJlZihudWxsKTtcbiAgICBjb25zdCBvbkNvbGxlY3Rpb25SZXNpemUgPSBSZWFjdC51c2VDb250ZXh0KENvbGxlY3Rpb25Db250ZXh0KTtcbiAgICAvLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT0gQ2hpbGRyZW4gPT09PT09PT09PT09PT09PT09PT09PT09PT09XG4gICAgY29uc3QgaXNSZW5kZXJQcm9wcyA9IHR5cGVvZiBjaGlsZHJlbiA9PT0gJ2Z1bmN0aW9uJztcbiAgICBjb25zdCBtZXJnZWRDaGlsZHJlbiA9IGlzUmVuZGVyUHJvcHMgPyBjaGlsZHJlbihlbGVtZW50UmVmKSA6IGNoaWxkcmVuO1xuICAgIC8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09IFJlZiA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbiAgICBjb25zdCBjYW5SZWYgPSAhaXNSZW5kZXJQcm9wcyAmJiBSZWFjdC5pc1ZhbGlkRWxlbWVudChtZXJnZWRDaGlsZHJlbikgJiYgc3VwcG9ydFJlZihtZXJnZWRDaGlsZHJlbik7XG4gICAgY29uc3Qgb3JpZ2luUmVmID0gY2FuUmVmID8gZ2V0Tm9kZVJlZihtZXJnZWRDaGlsZHJlbikgOiBudWxsO1xuICAgIGNvbnN0IG1lcmdlZFJlZiA9IHVzZUNvbXBvc2VSZWYob3JpZ2luUmVmLCBlbGVtZW50UmVmKTtcbiAgICBjb25zdCBnZXREb21FbGVtZW50ID0gUmVhY3QudXNlQ2FsbGJhY2soKCkgPT4gZ2V0RE9NKGVsZW1lbnRSZWYuY3VycmVudCksIFtdKTtcbiAgICBSZWFjdC51c2VJbXBlcmF0aXZlSGFuZGxlKHJlZiwgKCkgPT4gZ2V0RG9tRWxlbWVudCgpKTtcbiAgICAvLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT0gT2JzZXJ2ZSA9PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4gICAgdXNlUmVzaXplT2JzZXJ2ZXIoIWRpc2FibGVkLCBnZXREb21FbGVtZW50LCBvblJlc2l6ZSwgKHNpemVJbmZvLCB0YXJnZXQpID0+IHtcbiAgICAgICAgb25Db2xsZWN0aW9uUmVzaXplID09PSBudWxsIHx8IG9uQ29sbGVjdGlvblJlc2l6ZSA9PT0gdm9pZCAwID8gdm9pZCAwIDogb25Db2xsZWN0aW9uUmVzaXplKHNpemVJbmZvLCB0YXJnZXQsIGRhdGEpO1xuICAgIH0pO1xuICAgIC8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT0gUmVuZGVyID09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbiAgICByZXR1cm4gY2FuUmVmXG4gICAgICAgID8gUmVhY3QuY2xvbmVFbGVtZW50KG1lcmdlZENoaWxkcmVuLCB7XG4gICAgICAgICAgICByZWY6IG1lcmdlZFJlZixcbiAgICAgICAgfSlcbiAgICAgICAgOiBtZXJnZWRDaGlsZHJlbjtcbn1cbmNvbnN0IFJlZlNpbmdsZU9ic2VydmVyID0gUmVhY3QuZm9yd2FyZFJlZihTaW5nbGVPYnNlcnZlcik7XG5SZWZTaW5nbGVPYnNlcnZlci5kaXNwbGF5TmFtZSA9ICdTaW5nbGVPYnNlcnZlcic7XG5leHBvcnQgZGVmYXVsdCBSZWZTaW5nbGVPYnNlcnZlcjsiXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/lib/components/ResizeObserver/index.d.ts

@@ -0,0 +1,7 @@
+import ResizeObserver from './ResizeObserver';
+export { default as ResizeObserver } from './ResizeObserver';
+export default ResizeObserver;
+export { default as useResizeObserver } from './useResizeObserver';
+export { Collection } from './Collection';
+export type { SizeInfo, OnResize, ResizeObserverProps } from './interface';
+export type { ResizeInfo, CollectionProps } from './Collection';