@1money/component-ui 0.0.49 → 0.0.51

package/es/components/Radio/interface.d.ts

@@ -0,0 +1,122 @@
+import type { CSSProperties, InputHTMLAttributes, ReactNode, RefObject } from 'react';
+import type { IconName } from "../Icons";
+export type RadioValueType = string | number;
+export type RadioVariant = 'default' | 'cell';
+export type RadioSize = 'large' | 'medium' | 'small';
+export type RadioOrientation = 'horizontal' | 'vertical';
+export type RadioAlignment = 'left' | 'center';
+export type RadioLabelPlacement = 'left' | 'right';
+export type RadioGroupDirection = 'vertical' | 'horizontal';
+export interface RadioChangeTarget {
+    checked: boolean;
+    disabled: boolean;
+    id?: string;
+    name?: string;
+    type: 'radio';
+    value?: RadioValueType;
+}
+export interface RadioChangeEvent {
+    nativeEvent: Event;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    target: RadioChangeTarget;
+}
+type NativeRadioInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'checked' | 'className' | 'defaultChecked' | 'onChange' | 'size' | 'style' | 'type' | 'value'>;
+export interface RadioProps extends NativeRadioInputProps {
+    ref?: RefObject<HTMLLabelElement | null>;
+    className?: string;
+    prefixCls?: string;
+    style?: CSSProperties;
+    /** Value that identifies this radio within a RadioGroup */
+    value?: RadioValueType;
+    /** Whether the radio is checked (controlled, standalone usage) */
+    checked?: boolean;
+    /** Default checked state (uncontrolled, standalone usage) */
+    defaultChecked?: boolean;
+    /** Label text displayed next to the radio */
+    label?: ReactNode;
+    /** Description text displayed below the label */
+    description?: ReactNode;
+    /** Visual variant of the radio */
+    variant?: RadioVariant;
+    /** Visual size used by the cell variant */
+    size?: RadioSize;
+    /** Alignment used by the cell variant (`left` for horizontal, `center` for vertical). */
+    alignment?: RadioAlignment;
+    /** Placement of the label relative to the radio dot for the default variant. */
+    labelPlacement?: RadioLabelPlacement;
+    /** Optional icon rendered by the cell variant */
+    icon?: IconName | ReactNode;
+    /** Optional tag label rendered by the cell variant */
+    tag?: string;
+    /** Callback when checked state changes */
+    onChange?: (event: RadioChangeEvent) => void;
+}
+export interface RadioOptionItem {
+    /** Value that identifies this option */
+    value: RadioValueType;
+    /** HTML id attribute for the underlying radio input */
+    id?: string;
+    /** Label text displayed next to the radio */
+    label?: ReactNode;
+    /** Description text displayed below the label */
+    description?: ReactNode;
+    /** Visual variant of the radio */
+    variant?: RadioVariant;
+    /** Visual size used by the cell variant */
+    size?: RadioSize;
+    /** Alignment used by the cell variant (`left` for horizontal, `center` for vertical). */
+    alignment?: RadioAlignment;
+    /** Placement of the label relative to the radio dot for the default variant. */
+    labelPlacement?: RadioLabelPlacement;
+    /** Optional icon rendered by the cell variant */
+    icon?: IconName | ReactNode;
+    /** Optional tag label rendered by the cell variant */
+    tag?: string;
+    /** Whether this specific option is disabled */
+    disabled?: boolean;
+    /** Whether this specific option is required */
+    required?: boolean;
+    /** Title attribute for the underlying radio input */
+    title?: string;
+}
+export interface RadioGroupProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    prefixCls?: string;
+    className?: string;
+    /** Currently selected value (controlled) */
+    value?: RadioValueType;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: RadioValueType;
+    /** HTML id attribute for the root radiogroup container */
+    id?: string;
+    /** HTML name attribute for native radio grouping */
+    name?: string;
+    /** Disables all radios in the group */
+    disabled?: boolean;
+    /** @deprecated Use `direction` to control the group direction. */
+    layout?: RadioGroupDirection;
+    /** Direction of the group */
+    direction?: RadioGroupDirection;
+    /** Visual variant inherited by child radios */
+    variant?: RadioVariant;
+    /** Visual size inherited by child radios */
+    size?: RadioSize;
+    /** Alignment inherited by cell-variant child radios. */
+    alignment?: RadioAlignment;
+    /** Label placement inherited by default-variant child radios. */
+    labelPlacement?: RadioLabelPlacement;
+    /** Gap between radio items — accepts spacing token key or CSS value */
+    gap?: number | string;
+    /** Title attribute for the root radiogroup container */
+    title?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Quick-render mode: array of radio options */
+    options?: RadioOptionItem[];
+    /** Custom Radio children (takes precedence over options) */
+    children?: ReactNode;
+    /** Callback when the selected value changes */
+    onChange?: (event: RadioChangeEvent) => void;
+}
+export {};

package/es/components/Radio/interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50cy9SYWRpby9pbnRlcmZhY2UuanMiLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMiLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vaW50ZXJmYWNlLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7fTsiXSwibWFwcGluZ3MiOiJBQUFBIiwiaWdub3JlTGlzdCI6W119

package/es/components/Radio/style/Radio.css

@@ -0,0 +1,362 @@
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-radio {
+  display: inline-flex;
+  gap: var(--om-spacing-300, 12px);
+  align-items: flex-start;
+  cursor: pointer;
+}
+.om-component-ui-radio-box-wrapper {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--om-body-lg-font-size) * 1.375);
+}
+.om-component-ui-radio-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  cursor: inherit;
+  opacity: 0;
+}
+.om-component-ui-radio-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--om-spacing-400, 16px);
+  height: var(--om-spacing-400, 16px);
+  overflow: hidden;
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-default-secondary, #9fa3a3);
+  border-radius: var(--om-radius-full, 9999px);
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.om-component-ui-radio-box::after {
+  position: absolute;
+  width: var(--om-spacing-200, 8px);
+  height: var(--om-spacing-200, 8px);
+  background-color: var(--om-icon-on-brand, #dde6f4);
+  border-radius: var(--om-radius-full, 9999px);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  content: "";
+}
+.om-component-ui-radio-input:checked + .om-component-ui-radio-box {
+  background-color: var(--om-bg-brand, #073387);
+  border-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-radio-input:checked + .om-component-ui-radio-box::after {
+  transform: scale(1);
+  opacity: 1;
+}
+.om-component-ui-radio-input:focus-visible + .om-component-ui-radio-box {
+  border-color: var(--om-border-brand, #073387);
+  box-shadow: 0 0 0 1px var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-width: 0;
+}
+.om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-strong-font-weight);
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-radio-description {
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-strong-font-weight);
+  color: var(--om-text-default-tertiary, #646465);
+}
+.om-component-ui-radio-tag {
+  display: inline-flex;
+  margin-top: var(--om-spacing-100, 4px);
+}
+.om-component-ui-radio-cell {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+.om-component-ui-radio-cell-input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  margin: 0;
+  cursor: inherit;
+  opacity: 0;
+}
+.om-component-ui-radio-cell-panel {
+  --om-radio-cell-icon: var(--om-icon-default, #131313);
+  --om-radio-cell-indicator-icon: var(--om-icon-on-brand, #dde6f4);
+  position: relative;
+  display: flex;
+  gap: var(--om-spacing-300, 12px);
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-default, #d1d2d2);
+  border-radius: var(--om-radius-300, 12px);
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.om-component-ui-radio-cell-indicator, .om-component-ui-radio-cell-icon, .om-component-ui-radio-cell-radio {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+.om-component-ui-radio-cell-indicator {
+  width: var(--om-spacing-800, 32px);
+  height: var(--om-spacing-800, 32px);
+  color: var(--om-radio-cell-icon);
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+  border-radius: var(--om-radius-full, 9999px);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.om-component-ui-radio-cell-indicator-compact {
+  width: var(--om-spacing-600, 24px);
+  height: var(--om-spacing-600, 24px);
+}
+.om-component-ui-radio-cell-icon {
+  color: var(--om-radio-cell-icon);
+}
+.om-component-ui-radio-cell-radio {
+  width: var(--om-spacing-400, 16px);
+  height: var(--om-spacing-400, 16px);
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-default-secondary, #9fa3a3);
+  border-radius: var(--om-radius-full, 9999px);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.om-component-ui-radio-cell-radio-dot {
+  width: var(--om-spacing-100, 4px);
+  height: var(--om-spacing-100, 4px);
+  background-color: var(--om-icon-on-brand, #dde6f4);
+  border-radius: var(--om-radius-full, 9999px);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.om-component-ui-radio-cell .om-component-ui-radio-content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-width: 0;
+}
+.om-component-ui-radio-cell .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-strong-font-weight);
+}
+.om-component-ui-radio-cell .om-component-ui-radio-description {
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-font-weight);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-large .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-medium .om-component-ui-radio-cell-panel, .om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-300, 12px) var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-medium .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-font-weight);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-content {
+  justify-content: center;
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-strong-font-weight);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-description {
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-strong-font-weight);
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-cell-panel {
+  flex-direction: column;
+  justify-content: center;
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-content {
+  align-items: center;
+  text-align: center;
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-label,
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-description {
+  text-align: center;
+}
+.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-large .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-600, 24px) var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-medium .om-component-ui-radio-cell-panel, .om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-small .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-medium .om-component-ui-radio-label, .om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-small .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-font-weight);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border-color: var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel .om-component-ui-radio-cell-indicator {
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel .om-component-ui-radio-cell-radio {
+  background-color: var(--om-bg-brand, #073387);
+  border-color: var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel .om-component-ui-radio-cell-radio-dot {
+  transform: scale(1);
+  opacity: 1;
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel {
+  border-width: 1px;
+}
+.om-component-ui-radio-cell-input:focus-visible + .om-component-ui-radio-cell-panel {
+  border-color: var(--om-border-brand, #073387);
+  box-shadow: 0 0 0 1px var(--om-border-brand, #073387);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-box {
+  border-color: var(--om-border-default-tertiary, #404042);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-input:checked + .om-component-ui-radio-box {
+  background-color: var(--om-bg-brand-hover, #052561);
+  border-color: var(--om-bg-brand-hover, #052561);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-cell-panel {
+  border-color: var(--om-border-default-tertiary, #404042);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel {
+  border-color: var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-disabled {
+  cursor: not-allowed;
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-box {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-input:checked + .om-component-ui-radio-box {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-input:checked + .om-component-ui-radio-box::after {
+  background-color: var(--om-icon-on-disabled, #bbbdc1);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-label,
+.om-component-ui-radio-disabled .om-component-ui-radio-description {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-panel {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-indicator {
+  color: var(--om-icon-on-disabled, #bbbdc1);
+  background-color: var(--om-bg-disabled, #f0f0f0);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-icon {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-radio {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-radio-dot {
+  background-color: var(--om-icon-on-disabled, #bbbdc1);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-tag {
+  opacity: 0.6;
+}
+.om-component-ui-radio-right .om-component-ui-radio-box-wrapper {
+  order: 1;
+}
+.om-component-ui-radio-right .om-component-ui-radio-content {
+  order: 0;
+}
+.om-component-ui-radio-right .om-component-ui-radio-cell-indicator,
+.om-component-ui-radio-right .om-component-ui-radio-cell-icon,
+.om-component-ui-radio-right .om-component-ui-radio-cell-radio {
+  order: 1;
+}
+.om-component-ui-radio-right .om-component-ui-radio-cell .om-component-ui-radio-content {
+  order: 0;
+}
+
+.om-component-ui-radio-group {
+  display: flex;
+}
+.om-component-ui-radio-group-vertical {
+  flex-direction: column;
+  gap: var(--om-spacing-300, 12px);
+}
+.om-component-ui-radio-group-horizontal {
+  flex-flow: row wrap;
+  gap: var(--om-spacing-600, 24px);
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-vertical {
+  gap: var(--om-spacing-300, 12px);
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-vertical > .om-component-ui-radio {
+  width: 100%;
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-horizontal {
+  gap: var(--om-spacing-300, 12px);
+  align-items: stretch;
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-horizontal > .om-component-ui-radio {
+  flex: 1 1 0;
+  min-width: 0;
+}

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

@@ -0,0 +1,3 @@
+import '../../Tag/style/css';
+import './Radio.css';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vc3JjL2NvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyx3QkFBd0I7QUFDL0IsT0FBTyxjQUFjIiwiZmlsZSI6ImNvbXBvbmVudHMvUmFkaW8vc3R5bGUvY3NzLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

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

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

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

@@ -0,0 +1,3 @@
+import '../../Tag/style';
+import './Radio.css';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vc3JjL2NvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyx3QkFBd0I7QUFDL0IsT0FBTyxjQUFjIiwiZmlsZSI6ImNvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/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/es/components/ResizeObserver/Collection.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export var CollectionContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+export 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 _jsx(CollectionContext.Provider, {
+    value: onResize,
+    children: children
+  });
+}
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvQ29sbGVjdGlvbi5qcyIsImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvQ29sbGVjdGlvbi50c3giXSwibmFtZXMiOlsianN4IiwiX2pzeCIsIlJlYWN0IiwiQ29sbGVjdGlvbkNvbnRleHQiLCJjcmVhdGVDb250ZXh0IiwiQ29sbGVjdGlvbiIsIl9yZWYiLCJjaGlsZHJlbiIsIm9uQmF0Y2hSZXNpemUiLCJyZXNpemVJZFJlZiIsInVzZVJlZiIsInJlc2l6ZUluZm9zUmVmIiwib25Db2xsZWN0aW9uUmVzaXplIiwidXNlQ29udGV4dCIsIm9uQmF0Y2hSZXNpemVSZWYiLCJjdXJyZW50Iiwib25Db2xsZWN0aW9uUmVzaXplUmVmIiwib25SZXNpemUiLCJ1c2VDYWxsYmFjayIsInNpemUiLCJlbGVtZW50IiwiZGF0YSIsIl9hIiwiY3VycmVudElkIiwicHVzaCIsIlByb21pc2UiLCJyZXNvbHZlIiwidGhlbiIsImNhbGwiLCJQcm92aWRlciIsInZhbHVlIl0sIm1hcHBpbmdzIjoiQUFBQSxTQUFTQSxHQUFHLElBQUlDLElBQUksUUFBUSxtQkFBbUI7QUNBL0MsT0FBTyxLQUFLQyxLQUFLLE1BQU0sT0FBTztBQUs5QixPQUFPLElBQU1DLGlCQUFpQixnQkFBR0QsS0FBSyxDQUFDRSxhQUFhLENBQTRCLElBQUksQ0FBQztBQWNyRjtBRGZBO0FBQ0E7QUNpQkEsT0FBTSxTQUFVQyxVQUFVQSxDQUFBQyxJQUFBLEVBQTZDO0VBQUEsSUFBMUNDLFFBQVEsR0FBQUQsSUFBQSxDQUFSQyxRQUFRO0lBQUVDLGFBQWEsR0FBQUYsSUFBQSxDQUFiRSxhQUFhO0VBQ2xELElBQU1DLFdBQVcsR0FBR1AsS0FBSyxDQUFDUSxNQUFNLENBQUMsQ0FBQyxDQUFDO0VBQ25DLElBQU1DLGNBQWMsR0FBR1QsS0FBSyxDQUFDUSxNQUFNLENBQWUsRUFBRSxDQUFDO0VBRXJELElBQU1FLGtCQUFrQixHQUFHVixLQUFLLENBQUNXLFVBQVUsQ0FBQ1YsaUJBQWlCLENBQUM7RUFFOUQsSUFBTVcsZ0JBQWdCLEdBQUdaLEtBQUssQ0FBQ1EsTUFBTSxDQUFDRixhQUFhLENBQUM7RUFDcERNLGdCQUFnQixDQUFDQyxPQUFPLEdBQUdQLGFBQWE7RUFFeEMsSUFBTVEscUJBQXFCLEdBQUdkLEtBQUssQ0FBQ1EsTUFBTSxDQUFDRSxrQkFBa0IsQ0FBQztFQUM5REkscUJBQXFCLENBQUNELE9BQU8sR0FBR0gsa0JBQWtCO0VBRWxELElBQU1LLFFBQVEsR0FBR2YsS0FBSyxDQUFDZ0IsV0FBVyxDQUNoQyxVQUFDQyxJQUFJLEVBQUVDLE9BQU8sRUFBRUMsSUFBSSxFQUFJO0lEcEJwQixJQUFJQyxFQUFFO0lDcUJSYixXQUFXLENBQUNNLE9BQU8sSUFBSSxDQUFDO0lBQ3hCLElBQU1RLFNBQVMsR0FBR2QsV0FBVyxDQUFDTSxPQUFPO0lBRXJDSixjQUFjLENBQUNJLE9BQU8sQ0FBQ1MsSUFBSSxDQUFDO01BQzFCTCxJQUFJLEVBQUpBLElBQUk7TUFDSkMsT0FBTyxFQUFQQSxPQUFPO01BQ1BDLElBQUksRUFBSkE7SURwQkEsQ0NxQkQsQ0FBQztJQUVGSSxPQUFPLENBQUNDLE9BQU8sQ0FBQSxDQUFFLENBQUNDLElBQUksQ0FBQyxZQUFLO01EckJ0QixJQUFJTCxFQUFFO01Dc0JWLElBQUlDLFNBQVMsS0FBS2QsV0FBVyxDQUFDTSxPQUFPLEVBQUU7UUFDckMsQ0FBQU8sRUFBQSxHQUFBUixnQkFBZ0IsQ0FBQ0MsT0FBTyxNQUFBLElBQUEsSUFBQU8sRUFBQSxLQUFBLEtBQUEsQ0FBQSxHQUFBLEtBQUEsQ0FBQSxHQUFBQSxFQUFBLENBQUFNLElBQUEsQ0FBQWQsZ0JBQUEsRUFBR0gsY0FBYyxDQUFDSSxPQUFPLENBQUM7UUFDbERKLGNBQWMsQ0FBQ0ksT0FBTyxHQUFHLEVBQUU7TUFDN0I7SUFDRixDQUFDLENBQUM7SUFFRjtJQUNBLENBQUFPLEVBQUEsR0FBQU4scUJBQXFCLENBQUNELE9BQU8sTUFBQSxJQUFBLElBQUFPLEVBQUEsS0FBQSxLQUFBLENBQUEsR0FBQSxLQUFBLENBQUEsR0FBQUEsRUFBQSxDQUFBTSxJQUFBLENBQUFaLHFCQUFBLEVBQUdHLElBQUksRUFBRUMsT0FBTyxFQUFFQyxJQUFJLENBQUM7RUFDdEQsQ0FBQyxFQUNELEVBQUUsQ0FDSDtFQUVELE9BQU9wQixJQUFBLENBQUNFLGlCQUFpQixDQUFDMEIsUUFBUSxFQUFBO0lBQUNDLEtBQUssRUFBRWIsUUFBUTtJQUFBVixRQUFBLEVBQUdBO0VBQVEsQ0FBQSxDQUE4QjtBQUM3RiIsImZpbGUiOiJjb21wb25lbnRzL1Jlc2l6ZU9ic2VydmVyL0NvbGxlY3Rpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuZXhwb3J0IGNvbnN0IENvbGxlY3Rpb25Db250ZXh0ID0gUmVhY3QuY3JlYXRlQ29udGV4dChudWxsKTtcbi8qKlxuICogQ29sbGVjdCBhbGwgdGhlIHJlc2l6ZSBldmVudCBmcm9tIGNoaWxkcmVuIFJlc2l6ZU9ic2VydmVyXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBDb2xsZWN0aW9uKHsgY2hpbGRyZW4sIG9uQmF0Y2hSZXNpemUgfSkge1xuICAgIGNvbnN0IHJlc2l6ZUlkUmVmID0gUmVhY3QudXNlUmVmKDApO1xuICAgIGNvbnN0IHJlc2l6ZUluZm9zUmVmID0gUmVhY3QudXNlUmVmKFtdKTtcbiAgICBjb25zdCBvbkNvbGxlY3Rpb25SZXNpemUgPSBSZWFjdC51c2VDb250ZXh0KENvbGxlY3Rpb25Db250ZXh0KTtcbiAgICBjb25zdCBvbkJhdGNoUmVzaXplUmVmID0gUmVhY3QudXNlUmVmKG9uQmF0Y2hSZXNpemUpO1xuICAgIG9uQmF0Y2hSZXNpemVSZWYuY3VycmVudCA9IG9uQmF0Y2hSZXNpemU7XG4gICAgY29uc3Qgb25Db2xsZWN0aW9uUmVzaXplUmVmID0gUmVhY3QudXNlUmVmKG9uQ29sbGVjdGlvblJlc2l6ZSk7XG4gICAgb25Db2xsZWN0aW9uUmVzaXplUmVmLmN1cnJlbnQgPSBvbkNvbGxlY3Rpb25SZXNpemU7XG4gICAgY29uc3Qgb25SZXNpemUgPSBSZWFjdC51c2VDYWxsYmFjaygoc2l6ZSwgZWxlbWVudCwgZGF0YSkgPT4ge1xuICAgICAgICB2YXIgX2E7XG4gICAgICAgIHJlc2l6ZUlkUmVmLmN1cnJlbnQgKz0gMTtcbiAgICAgICAgY29uc3QgY3VycmVudElkID0gcmVzaXplSWRSZWYuY3VycmVudDtcbiAgICAgICAgcmVzaXplSW5mb3NSZWYuY3VycmVudC5wdXNoKHtcbiAgICAgICAgICAgIHNpemUsXG4gICAgICAgICAgICBlbGVtZW50LFxuICAgICAgICAgICAgZGF0YSxcbiAgICAgICAgfSk7XG4gICAgICAgIFByb21pc2UucmVzb2x2ZSgpLnRoZW4oKCkgPT4ge1xuICAgICAgICAgICAgdmFyIF9hO1xuICAgICAgICAgICAgaWYgKGN1cnJlbnRJZCA9PT0gcmVzaXplSWRSZWYuY3VycmVudCkge1xuICAgICAgICAgICAgICAgIChfYSA9IG9uQmF0Y2hSZXNpemVSZWYuY3VycmVudCkgPT09IG51bGwgfHwgX2EgPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9hLmNhbGwob25CYXRjaFJlc2l6ZVJlZiwgcmVzaXplSW5mb3NSZWYuY3VycmVudCk7XG4gICAgICAgICAgICAgICAgcmVzaXplSW5mb3NSZWYuY3VycmVudCA9IFtdO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgICAgLy8gQ29udGludWUgYnViYmxpbmcgaWYgcGFyZW50IGV4aXN0XG4gICAgICAgIChfYSA9IG9uQ29sbGVjdGlvblJlc2l6ZVJlZi5jdXJyZW50KSA9PT0gbnVsbCB8fCBfYSA9PT0gdm9pZCAwID8gdm9pZCAwIDogX2EuY2FsbChvbkNvbGxlY3Rpb25SZXNpemVSZWYsIHNpemUsIGVsZW1lbnQsIGRhdGEpO1xuICAgIH0sIFtdKTtcbiAgICByZXR1cm4gX2pzeChDb2xsZWN0aW9uQ29udGV4dC5Qcm92aWRlciwgeyB2YWx1ZTogb25SZXNpemUsIGNoaWxkcmVuOiBjaGlsZHJlbiB9KTtcbn0iLG51bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/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/es/components/ResizeObserver/ResizeObserver.js

@@ -0,0 +1,31 @@
+import { createElement as _createElement } from "react";
+import * as React from 'react';
+import { toArray } from './utils/reactUtil';
+import SingleObserver from './SingleObserver';
+import { Collection } from './Collection';
+var INTERNAL_PREFIX_KEY = 'om-component-ui-observer-key';
+function ResizeObserver(props, ref) {
+  var _a;
+  var children = props.children;
+  var childNodes = typeof children === 'function' ? [children] : 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__*/_createElement(SingleObserver, Object.assign({}, props, {
+      key: key,
+      ref: index === 0 ? ref : undefined
+    }), child);
+  });
+}
+var RefResizeObserver = /*#__PURE__*/React.forwardRef(ResizeObserver);
+RefResizeObserver.displayName = 'ResizeObserver';
+RefResizeObserver.Collection = Collection;
+export default RefResizeObserver;
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvUmVzaXplT2JzZXJ2ZXIuanMiLCJjb21wb25lbnRzL3NyYy9jb21wb25lbnRzL1Jlc2l6ZU9ic2VydmVyL1Jlc2l6ZU9ic2VydmVyLnRzeCJdLCJuYW1lcyI6WyJjcmVhdGVFbGVtZW50IiwiX2NyZWF0ZUVsZW1lbnQiLCJSZWFjdCIsInRvQXJyYXkiLCJTaW5nbGVPYnNlcnZlciIsIkNvbGxlY3Rpb24iLCJJTlRFUk5BTF9QUkVGSVhfS0VZIiwiUmVzaXplT2JzZXJ2ZXIiLCJwcm9wcyIsInJlZiIsIl9hIiwiY2hpbGRyZW4iLCJjaGlsZE5vZGVzIiwicHJvY2VzcyIsImVudiIsIk5PREVfRU5WIiwibGVuZ3RoIiwiY29uc29sZSIsIndhcm4iLCJtYXAiLCJjaGlsZCIsImluZGV4Iiwia2V5IiwiY29uY2F0IiwiT2JqZWN0IiwiYXNzaWduIiwidW5kZWZpbmVkIiwiUmVmUmVzaXplT2JzZXJ2ZXIiLCJmb3J3YXJkUmVmIiwiZGlzcGxheU5hbWUiXSwibWFwcGluZ3MiOiJBQUFBLFNBQVNBLGFBQWEsSUFBSUMsY0FBYyxRQUFRLE9BQU87QUNBdkQsT0FBTyxLQUFLQyxLQUFLLE1BQU0sT0FBTztBQUU5QixTQUFTQyxPQUFPLFFBQVEsbUJBQW1CO0FBQzNDLE9BQU9DLGNBQWMsTUFBTSxrQkFBa0I7QUFDN0MsU0FBU0MsVUFBVSxRQUFRLGNBQWM7QUFFekMsSUFBTUMsbUJBQW1CLEdBQUcsOEJBQThCO0FBRTFELFNBQVNDLGNBQWNBLENBQUNDLEtBQTBCLEVBQUVDLEdBQTJCLEVBQUE7RUREM0UsSUFBSUMsRUFBRTtFQ0VSLElBQVFDLFFBQVEsR0FBS0gsS0FBSyxDQUFsQkcsUUFBUTtFQUNoQixJQUFNQyxVQUFVLEdBQUcsT0FBT0QsUUFBUSxLQUFLLFVBQVUsR0FBRyxDQUFDQSxRQUFRLENBQUMsR0FBR1IsT0FBTyxDQUFDUSxRQUFRLENBQUM7RUFFbEY7RUFDQSxJQUFJLE9BQU9FLE9BQU8sS0FBSyxXQUFXLElBQUksQ0FBQSxDQUFBSCxFQUFBLEdBQUFHLE9BQU8sQ0FBQ0MsR0FBRyxNQUFBLElBQUEsSUFBQUosRUFBQSxLQUFBLEtBQUEsQ0FBQSxHQUFBLEtBQUEsQ0FBQSxHQUFBQSxFQUFBLENBQUVLLFFBQVEsTUFBSyxZQUFZLEVBQUU7SUFDNUUsSUFBSUgsVUFBVSxDQUFDSSxNQUFNLEdBQUcsQ0FBQyxFQUFFO01BQ3pCQyxPQUFPLENBQUNDLElBQUksQ0FDViwrR0FBK0csQ0FDaEg7SUFDSCxDQUFDLE1BQU0sSUFBSU4sVUFBVSxDQUFDSSxNQUFNLEtBQUssQ0FBQyxFQUFFO01BQ2xDQyxPQUFPLENBQUNDLElBQUksQ0FBQyw4REFBOEQsQ0FBQztJQUM5RTtFQUNGO0VBRUEsT0FBT04sVUFBVSxDQUFDTyxHQUFHLENBQUMsVUFBQ0MsS0FBSyxFQUFFQyxLQUFLLEVBQUk7SUFDckMsSUFBTUMsR0FBRyxHQUFHLENBQUNGLEtBQTRCLEtBQUEsSUFBQSxJQUE1QkEsS0FBSyxLQUFBLEtBQUEsQ0FBQSxHQUFBLEtBQUEsQ0FBQSxHQUFMQSxLQUFLLENBQXlCRSxHQUFHLFFBQUFDLE1BQUEsQ0FBT2pCLG1CQUFtQixPQUFBaUIsTUFBQSxDQUFJRixLQUFLLENBQUU7SUFDbkYsb0JBQ0VwQixjQUFBLENBQUNHLGNBQWMsRUFBQW9CLE1BQUEsQ0FBQUMsTUFBQSxDQUFBLENBQUEsQ0FBQSxFQUFLakIsS0FBSyxFQUFBO01BQUVjLEdBQUcsRUFBRUEsR0FBRztNQUFFYixHQUFHLEVBQUVZLEtBQUssS0FBSyxDQUFDLEdBQUdaLEdBQUcsR0FBR2lCO0lBQVMsQ0FBQSxDQUFBLEVBQ3BFTixLQUFZLENBQ0U7RUFFckIsQ0FBQyxDQUE4QjtBQUNqQztBQUVBLElBQU1PLGlCQUFpQixnQkFBR3pCLEtBQUssQ0FBQzBCLFVBQVUsQ0FBQ3JCLGNBQWMsQ0FJeEQ7QUFFRG9CLGlCQUFpQixDQUFDRSxXQUFXLEdBQUcsZ0JBQWdCO0FBQ2hERixpQkFBaUIsQ0FBQ3RCLFVBQVUsR0FBR0EsVUFBVTtBQUV6QyxlQUFlc0IsaUJBQWlCIiwiZmlsZSI6ImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvUmVzaXplT2JzZXJ2ZXIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjcmVhdGVFbGVtZW50IGFzIF9jcmVhdGVFbGVtZW50IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB0b0FycmF5IH0gZnJvbSAnLi91dGlscy9yZWFjdFV0aWwnO1xuaW1wb3J0IFNpbmdsZU9ic2VydmVyIGZyb20gJy4vU2luZ2xlT2JzZXJ2ZXInO1xuaW1wb3J0IHsgQ29sbGVjdGlvbiB9IGZyb20gJy4vQ29sbGVjdGlvbic7XG5jb25zdCBJTlRFUk5BTF9QUkVGSVhfS0VZID0gJ29tLWNvbXBvbmVudC11aS1vYnNlcnZlci1rZXknO1xuZnVuY3Rpb24gUmVzaXplT2JzZXJ2ZXIocHJvcHMsIHJlZikge1xuICAgIHZhciBfYTtcbiAgICBjb25zdCB7IGNoaWxkcmVuIH0gPSBwcm9wcztcbiAgICBjb25zdCBjaGlsZE5vZGVzID0gdHlwZW9mIGNoaWxkcmVuID09PSAnZnVuY3Rpb24nID8gW2NoaWxkcmVuXSA6IHRvQXJyYXkoY2hpbGRyZW4pO1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby11bmRlZlxuICAgIGlmICh0eXBlb2YgcHJvY2VzcyAhPT0gJ3VuZGVmaW5lZCcgJiYgKChfYSA9IHByb2Nlc3MuZW52KSA9PT0gbnVsbCB8fCBfYSA9PT0gdm9pZCAwID8gdm9pZCAwIDogX2EuTk9ERV9FTlYpICE9PSAncHJvZHVjdGlvbicpIHtcbiAgICAgICAgaWYgKGNoaWxkTm9kZXMubGVuZ3RoID4gMSkge1xuICAgICAgICAgICAgY29uc29sZS53YXJuKCdbUmVzaXplT2JzZXJ2ZXJdIEZpbmQgbW9yZSB0aGFuIG9uZSBjaGlsZCBub2RlIHdpdGggYGNoaWxkcmVuYC4gUGxlYXNlIHVzZSBSZXNpemVPYnNlcnZlci5Db2xsZWN0aW9uIGluc3RlYWQuJyk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSBpZiAoY2hpbGROb2Rlcy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIGNvbnNvbGUud2FybignW1Jlc2l6ZU9ic2VydmVyXSBgY2hpbGRyZW5gIGlzIGVtcHR5LiBOb3RoaW5nIGlzIGluIG9ic2VydmUuJyk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmV0dXJuIGNoaWxkTm9kZXMubWFwKChjaGlsZCwgaW5kZXgpID0+IHtcbiAgICAgICAgY29uc3Qga2V5ID0gKGNoaWxkID09PSBudWxsIHx8IGNoaWxkID09PSB2b2lkIDAgPyB2b2lkIDAgOiBjaGlsZC5rZXkpIHx8IGAke0lOVEVSTkFMX1BSRUZJWF9LRVl9LSR7aW5kZXh9YDtcbiAgICAgICAgcmV0dXJuIChfY3JlYXRlRWxlbWVudChTaW5nbGVPYnNlcnZlciwgT2JqZWN0LmFzc2lnbih7fSwgcHJvcHMsIHsga2V5OiBrZXksIHJlZjogaW5kZXggPT09IDAgPyByZWYgOiB1bmRlZmluZWQgfSksIGNoaWxkKSk7XG4gICAgfSk7XG59XG5jb25zdCBSZWZSZXNpemVPYnNlcnZlciA9IFJlYWN0LmZvcndhcmRSZWYoUmVzaXplT2JzZXJ2ZXIpO1xuUmVmUmVzaXplT2JzZXJ2ZXIuZGlzcGxheU5hbWUgPSAnUmVzaXplT2JzZXJ2ZXInO1xuUmVmUmVzaXplT2JzZXJ2ZXIuQ29sbGVjdGlvbiA9IENvbGxlY3Rpb247XG5leHBvcnQgZGVmYXVsdCBSZWZSZXNpemVPYnNlcnZlcjsiLG51bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/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;