@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/utils/click-away/ClickAway.stories.tsx

@@ -1,248 +0,0 @@
-import * as React from 'react';
-
-import {Avatar} from '../../components/Avatar/Avatar';
-import {Button} from '../../components/Button';
-import {Icon} from '../../components/Icon';
-import {ButtonTextMedium, SubTitleSmall} from '../../components/Text';
-import {Tooltip} from '../../components/Tooltip';
-import type {ClickAwayProps} from '../../utils/click-away';
-import {ClickAway} from '../../utils/click-away';
-
-import css from './ClickAway.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'utils/Click Away',
-  argTypes: {
-    closeOnEscapeKeypress: {
-      type: {optional: true},
-      description:
-        'If **true**, the component is closed when Escape is pressed',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    onChange: {
-      type: {optional: true},
-      description:
-        '**onChange** handler is triggered when the child component is opened or closed. This should be helpful in cases where you want to have custom logic based on isOpen.',
-      action: 'changed',
-      table: {
-        type: {summary: '(isOpen: boolean) => mixed'},
-      },
-    },
-    children: {
-      type: {required: true},
-      control: {
-        type: 'null',
-      },
-      description: 'React Node that ClickAway wraps on',
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-    triggerRef: {
-      type: {optional: true},
-      description:
-        'ref that is used to refer to the element which triggers the open or close of the child. Click on triggerRef toggles open/close of the child',
-      table: {
-        type: {
-          summary: 'triggerRef',
-        },
-      },
-    },
-    boundaryRef: {
-      type: {optional: true},
-      description:
-        'ref that contains the child and prevents any click action to close the child(similar to cancelNext)',
-      table: {
-        type: {
-          summary: 'boundaryRef',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'Can use ClickAway util with any of the components where clickAway functionality is required',
-      source: {
-        code: null,
-      },
-      description: {
-        component: `
-\`\`\`js
-import { ClickAway } from "@spaced-out/ui-design-system/lib/utils/click-away";
-\`\`\`
-This story demonstrates ClickAway util for any component.
-
-It is a utility component that listens for click events outside of its child.
-
-- Supports passing a \`clickAwayRef\` prop to the component.
-- You can always force Open the instance from ref by using \`clickAwayRef.current?.forceOpen\`. This might be useful when want to force Open as per you needs.
-- You can always force Close the instance from ref by using \`clickAwayRef.current?.forceClose\`. This might be useful when want to force Close as per you needs.
-
-
-\`\`\`jsx
-<ClickAway onChange={onChange} closeOnEscapeKeypress={true}>
-  {({
-    isOpen,
-    onOpen,
-    height,
-    pageBottom,
-    clickAway,
-    boundaryRef,
-    triggerRef
-  }) => (
-    <>
-      <Button
-        ariaLabel="Icon Button"
-        iconRightName="user-plus"
-        size="small"
-        type="ghost"
-        onClick={() => {
-          onOpen();
-        }}
-        ref={triggerRef}
-      />
-
-      {isOpen && (
-        <div
-          style={{height}}
-          ref={boundaryRef}
-        >
-        {/* Elements as per requirement */}
-        {/* Below button is just to showcase the use of clickAway */}
-          <div>
-            <Button
-              size="small"
-              type="tertiary"
-              onClick={() => {
-                clickAway();
-              }}
-            >
-              Close
-            </Button>
-          </div>
-        </div>
-      )}
-    </>
-  )}
-</ClickAway>
-\`\`\`
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/utils/click-away.js',
-    },
-  },
-};
-
-export const _ClickAway = (args: ClickAwayProps) => (<div className={css.container}>
-  <ClickAway {...args}>
-    {({isOpen, onOpen, height, clickAway, boundaryRef, triggerRef}) => (
-      <>
-        <Button
-// @ts-ignore - TS2769 - No overload matches this call.
-          ref={triggerRef}
-          ariaLabel="Icon Button"
-          iconRightName="user-plus"
-          size="small"
-          type="ghost"
-          onClick={() => {
-            onOpen();
-          }}
-        />
-
-        {isOpen && (
-// @ts-ignore - TS2322 - Type 'number | null | undefined' is not assignable to type 'Height<string | number> | undefined'. | TS2322 - Type 'BoundaryRefType<HTMLElement | null | undefined>' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-          <div className={css.dropDown} style={{height}} ref={boundaryRef}>
-            <div className={css.dropDownHeader}>
-              <SubTitleSmall color="primary">
-                {'Conversation Owner'}
-              </SubTitleSmall>
-              <Tooltip
-                placement="bottom"
-                body="Assign a conversation owner, so they will receive notifications on any new messages."
-                bodyMaxLines={3}
-              >
-                <Icon
-                  color="primary"
-                  name="circle-question"
-                  size="small"
-                  type="regular"
-                />
-              </Tooltip>
-            </div>
-            <div className={css.dropDownBody}>
-              <div className={css.customComponent}>
-                <Avatar
-                  color="blue"
-                  imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png"
-                  iconName="face-party"
-                  iconType="regular"
-                  size="medium"
-                />
-                <ButtonTextMedium className={css.text}>
-                  Angelina White
-                </ButtonTextMedium>
-              </div>
-              <div className={css.customComponent}>
-                <Avatar
-                  imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/4.png"
-                  color="green"
-                  size="medium"
-                  text="John"
-                />
-                <ButtonTextMedium className={css.text}>
-                  John Smith
-                </ButtonTextMedium>
-              </div>
-              <div className={css.customComponent}>
-                <Avatar
-                  imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/6.png"
-                  color="orange"
-                  size="medium"
-                  text="Jacobs Marley"
-                />
-                <ButtonTextMedium className={css.text}>
-                  Sarah Parker
-                </ButtonTextMedium>
-              </div>
-            </div>
-            <div className={css.dropDownFooter}>
-              <Button
-                size="small"
-                type="tertiary"
-                onClick={() => {
-                  clickAway();
-                }}
-              >
-                Close
-              </Button>
-            </div>
-          </div>
-        )}
-      </>
-    )}
-  </ClickAway>
-</div>);
-
-_ClickAway.args = {
-  closeOnEscapeKeypress: true,
-};

package/lib/utils/click-away/click-away.ts

@@ -1,230 +0,0 @@
-import * as React from 'react';
-import invariant from 'invariant';
-
-import {pageHeight} from '../dom';
-
-
-type BoundaryRefType<T> = {
-  current: T | null | undefined;
-};
-
-type TriggerRefType<T> = {
-  current: T | null | undefined;
-};
-
-export type ChildProps = {
-  onOpen: () => void;
-  isOpen: boolean;
-  height: number | null | undefined;
-  pageBottom: number | null | undefined;
-  clickAway: () => void;
-  boundaryRef: BoundaryRefType<HTMLElement | null | undefined>;
-  triggerRef: TriggerRefType<HTMLElement | null | undefined>;
-};
-
-export type ClickAwayRefType = {
-  current: {
-    forceClose: () => void;
-    forceOpen: () => void;
-  } | null | undefined;
-} | null | undefined;
-
-export type ClickAwayProps = {
-  closeOnEscapeKeypress?: boolean;
-  children: (props: ChildProps) => React.ReactNode;
-  onChange?: (isOpen: boolean) => unknown;
-  clickAwayRef?: ClickAwayRefType;
-  /**
-     * When containsNestedFloatingPortals is true, prevents ClickAway from closing the dropdown if the click target
-     * is inside a floating portal root element.
-     *
-     * This is necessary for nested dropdowns rendered using floating portals,
-     * such as via `@floating-ui/react`. Floating portals render elements outside
-     * the normal DOM tree (often directly into `document.body` or another container)
-     * using `ReactDOM.createPortal`. As a result, these nested dropdowns do not
-     * appear inside the parent dropdown's `boundaryRef` or `triggerRef` subtree.
-     *
-     * To address this, the floating portal ensures that all nested dropdowns
-     * are mounted into a **shared root element** — effectively maintaining a
-     * common DOM ancestry. This allows parent dropdowns to detect when clicks
-     * occur within any of their nested children, even if rendered via portals.
-     * The shared root element is the closest parent element that has a `data-floating-ui-portal` attribute.
-     * Because of this, the ClickAway logic will not close the parent menu if the click target is inside boundaryRef's parentElement.
-     *
-     * Enabling `containsNestedFloatingPortals` allows the ClickAway logic to account
-     * for this shared root and avoids incorrectly closing the parent menu when
-     * interacting with nested dropdowns.
-     */
-  containsNestedFloatingPortals?: boolean;
-};
-
-type ClickAwayState = {
-  isOpen: boolean;
-  height: number | null | undefined;
-  pageBottom: number | null | undefined;
-};
-
-// TODO(Nishant): Make this a functional component
-
-export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
-  static defaultProps: {
-    containsNestedFloatingPortals?: boolean;
-    closeOnEscapeKeypress?: boolean;
-  } = {
-      containsNestedFloatingPortals: false,
-      closeOnEscapeKeypress: true,
-    };
-
-  state: ClickAwayState = {
-    isOpen: false,
-    height: null,
-    pageBottom: null,
-  };
-
-  el: HTMLElement | null | undefined = null;
-  boundaryRef: BoundaryRefType<HTMLElement | null | undefined> = React.createRef();
-  triggerRef: TriggerRefType<HTMLElement | null | undefined> = React.createRef();
-
-  componentDidMount() {
-    if (this.el) {
-      this.setState({
-        height: this.el.offsetHeight,
-        pageBottom: this.pageBottom(),
-      });
-    }
-  }
-
-// @ts-ignore - TS6133 - 'prevProps' is declared but its value is never read.
-  componentDidUpdate(prevProps: ClickAwayProps, prevState: ClickAwayState) {
-    const {isOpen} = this.state;
-    if (prevState.isOpen !== isOpen) {
-      if (this.state.isOpen) {
-        window.document.addEventListener('click', this.handleCloseClick, {
-          capture: true,
-        });
-        if (this.props.closeOnEscapeKeypress) {
-          window.document.addEventListener(
-            'keyup',
-// @ts-ignore - TS2769 - No overload matches this call.
-            this.handleCloseOnEscapeKeypress,
-          );
-        }
-      } else {
-        window.document.removeEventListener('click', this.handleCloseClick, {
-          capture: true,
-        });
-        window.document.removeEventListener(
-          'keyup',
-// @ts-ignore - TS2769 - No overload matches this call.
-          this.handleCloseOnEscapeKeypress,
-        );
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick, {
-      capture: true,
-    });
-    window.document.removeEventListener(
-      'keyup',
-// @ts-ignore - TS2769 - No overload matches this call.
-      this.handleCloseOnEscapeKeypress,
-    );
-  }
-
-  render(): React.ReactNode {
-    const {height, isOpen, pageBottom} = this.state;
-    const {clickAwayRef} = this.props;
-    if (clickAwayRef) {
-      clickAwayRef.current = {
-        forceClose: this.forceClose,
-        forceOpen: this.handleOpenClick,
-      };
-    }
-    return this.props.children({
-      onOpen: this.handleOpenClick,
-      isOpen,
-      height,
-      pageBottom,
-      clickAway: this.forceClose,
-      boundaryRef: this.boundaryRef,
-      triggerRef: this.triggerRef,
-    });
-  }
-
-  handleOpenClick: () => void = () => {
-    // NOTE (kyle): we recalculate the position on click because sibling and niece components
-    // could have changed.
-    let {pageBottom} = this.state;
-    if (this.el) {
-      pageBottom = this.pageBottom();
-    }
-
-    this.setState(
-      {
-        isOpen: !this.state.isOpen,
-        pageBottom,
-      },
-      this.handleOnChange,
-    );
-  };
-
-  handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
-    if (
-      evt.target instanceof Node &&
-      this.props.containsNestedFloatingPortals &&
-      this.boundaryRef.current?.parentElement &&
-      (this.boundaryRef.current.parentElement === evt.target ||
-        this.boundaryRef.current.parentElement.contains(evt.target))
-    ) {
-      return;
-    }
-
-    if (
-      evt.target instanceof Node &&
-      this.boundaryRef &&
-// @ts-ignore - TS2367 - This condition will always return 'false' since the types 'BoundaryRefType<HTMLElement | null | undefined>' and 'Node' have no overlap.
-      (this.boundaryRef === evt.target ||
-        this.boundaryRef.current?.contains(evt.target))
-    ) {
-      return;
-    }
-
-    if (
-      evt.target instanceof Node &&
-      this.triggerRef &&
-// @ts-ignore - TS2367 - This condition will always return 'false' since the types 'TriggerRefType<HTMLElement | null | undefined>' and 'Node' have no overlap.
-      (this.triggerRef === evt.target ||
-        this.triggerRef.current?.contains(evt.target))
-    ) {
-      return;
-    }
-
-    this.setState(
-      {
-        isOpen: false,
-      },
-      this.handleOnChange,
-    );
-  };
-
-  handleCloseOnEscapeKeypress: (evt?: React.KeyboardEvent<EventTarget>) => void = (evt?: React.KeyboardEvent<EventTarget>) => {
-      if (evt?.key === 'Escape') {
-        this.forceClose();
-      }
-    };
-
-  forceClose: () => void = () => {
-    this.setState({isOpen: false}, this.handleOnChange);
-  };
-
-  handleOnChange: () => unknown = () =>
-    this.props.onChange && this.props.onChange(this.state.isOpen);
-
-  pageBottom(): any {
-    invariant(this.el, 'pageBottom() requires that this.el not be null');
-    const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
-    return pageHeight() - bottomBound + window.scrollY;
-  }
-}

package/lib/utils/click-away/index.ts

@@ -1 +0,0 @@
-export * from './click-away';