@kanda-libs/ks-component-ts 0.2.256-qa → 0.2.257

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Advanced/index.tsx

@@ -1,98 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useAdvancedProps from '~/components/Popover/Advanced/useAdvancedProps';
-import PopoverMenu from '~/components/PopoverMenu';
-import type { PopoverMenuItemProps } from '~/components/PopoverMenu/PopoverMenuItem';
-import type { AdvancedItem, AdvancedProps } from './types';
-
-export type { AdvancedProps };
-
-const Advanced: FunctionComponent<AdvancedProps> = function ({
-  button,
-  above = false,
-  right = false,
-  onAction,
-  items: originalItems = [],
-  wrapper: ButtonWrapper = ({ children }) => children,
-  search: SearchResults,
-  searchInput: SearchInput,
-  searchPlaceholder = 'Search..',
-  searchDebounceInterval = 200,
-  size = 'xs',
-  variant = 'panel-full',
-  selectedColorVariant = 'default',
-  ...props
-}) {
-  const {
-    classNames,
-    showPopover,
-    button: Button,
-    panel,
-    ref,
-    handleClose,
-    panelStyle,
-    items,
-    debouncedSearch,
-    onSearch,
-    clearSearch,
-    showPanel,
-    value,
-  } = useAdvancedProps({
-    button,
-    above,
-    right,
-    items: originalItems as AdvancedItem[],
-    onAction,
-    searchDebounceInterval,
-    variant,
-  });
-
-  const SearchResultsTag = SearchResults as unknown as FunctionComponent<any>;
-  const SearchInputTag = SearchInput as unknown as FunctionComponent<any>;
-
-  return (
-    <div className={classNames.wrapper}>
-      {showPopover && (
-        <div ref={ref} className={classNames.container}>
-          <div className={classNames.panelWrapper}>
-            <div className={classNames.popover}>
-              <PopoverMenu
-                header={
-                  SearchResults && (
-                    <SearchInputTag
-                      value={value}
-                      placeholder={searchPlaceholder}
-                      onChange={onSearch}
-                    />
-                  )
-                }
-                size={size}
-                items={items as PopoverMenuItemProps[]}
-                selectedColorVariant={selectedColorVariant}
-                onClose={handleClose}
-                {...props}
-                content={
-                  debouncedSearch ? (
-                    <SearchResultsTag
-                      query={debouncedSearch}
-                      clearSearch={clearSearch}
-                      handleClose={handleClose}
-                    />
-                  ) : null
-                }
-                {...props}
-              />
-            </div>
-            {showPanel && (
-              <div style={panelStyle} className={classNames.panel}>
-                {panel({ handleClose })}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      <ButtonWrapper>{Button as JSX.Element}</ButtonWrapper>
-    </div>
-  );
-};
-
-export default Advanced;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Advanced/types.d.ts

@@ -1,51 +0,0 @@
-import type { FunctionComponent, MouseEvent } from 'react';
-import type { StringIndexedObject } from '~/types';
-import { PopoverMenuItemSize } from '~/components/PopoverMenu/types';
-import type { PopoverMenuItemSelectedColorVariant } from '~/components/PopoverMenu/PopoverMenuItem/types';
-
-export interface AdvancedItem {
-  action?: {
-    type: 'open_panel';
-    action?: () => JSX.Element;
-    panel?: () => JSX.Element;
-  };
-  name: string;
-  icon?: string;
-  stopPropagation?: boolean;
-}
-
-export interface AdvancedWrapperArgs {
-  children: JSX.Element;
-}
-
-export interface AdvancedProps {
-  button: JSX.Element | JSX.Element[];
-  /**
-   * Position above button rather than below
-   */
-  above?: boolean;
-  /**
-   * Position popover to right-align rather than left-align
-   */
-  right?: boolean;
-  /**
-   * Button wrapper
-   */
-  wrapper?: (args: AdvancedWrapperArgs) => JSX.Element;
-  items?: AdvancedItem[];
-  /**
-   * On action callback
-   */
-  className?: string;
-  onAction?: (action: StringIndexedObject, e: MouseEvent) => void;
-  /**
-   * Size
-   */
-  size?: PopoverMenuItemSize;
-  search?: FunctionComponent;
-  searchInput?: FunctionComponent;
-  searchPlaceholder?: string;
-  searchDebounceInterval?: number;
-  variant?: 'panel-full' | 'panel-short' | 'green' | 'default';
-  selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Advanced/useAdvancedProps.ts

@@ -1,232 +0,0 @@
-import {
-  useState,
-  cloneElement,
-  useCallback,
-  useMemo,
-  type MouseEvent,
-  MutableRefObject,
-} from 'react';
-import clsx from 'clsx';
-import { useDebounce } from 'use-debounce';
-import {
-  VARIANTS,
-  PANEL_STYLE,
-  BASE_CLASS_NAMES,
-  VARIANT_CLASS_NAMES,
-  ACTIONS,
-} from './constants';
-import { emptyPanel, popoverRounding } from './helpers';
-import { useOuterClick, useEscClick } from '~/hooks';
-
-import type {
-  AdvancedItem,
-  AdvancedProps,
-} from '~/components/Popover/Advanced/types';
-import type { StringIndexedObject } from '~/types';
-
-export type AdvancedPropsHookArgs = Omit<
-  AdvancedProps,
-  'wrapper' | 'className' | 'size' | 'searchInput' | 'searchPlaceholder'
->;
-
-interface AdvancedPropsEvent {
-  target: {
-    value: string;
-  };
-}
-
-export interface AdvancedPanelArgs {
-  handleClose: () => void;
-}
-
-export interface AdvancedPropsHook {
-  classNames: StringIndexedObject;
-  showPopover: boolean;
-  button: JSX.Element | JSX.Element;
-  panel: (args: AdvancedPanelArgs) => JSX.Element;
-  ref: MutableRefObject<any>;
-  handleClose: () => void;
-  panelStyle: StringIndexedObject;
-  items: AdvancedItem[];
-  debouncedSearch: string;
-  onSearch: (event: AdvancedPropsEvent) => void;
-  clearSearch: () => void;
-  showPanel: boolean;
-  value: string;
-}
-
-export default function useAdvancedProps({
-  button,
-  above,
-  right,
-  items: originalItems,
-  onAction,
-  searchDebounceInterval = 100,
-  variant = 'panel-full',
-}: AdvancedPropsHookArgs): AdvancedPropsHook {
-  const [search, setSearch] = useState('');
-  const [debouncedSearch] = useDebounce(search, searchDebounceInterval);
-
-  const [showPopover, setShowPopover] = useState(false);
-  const [panel, setPanel] = useState<() => JSX.Element>(() => emptyPanel);
-  const [selected, setSelected] = useState(-1);
-
-  const onClick = useCallback(
-    () => setShowPopover(!showPopover),
-    [showPopover],
-  );
-
-  /**
-   * Handles close logic
-   */
-  const handleClose = useCallback(() => {
-    if (!showPopover) return;
-    setShowPopover(false);
-    setPanel(() => emptyPanel);
-  }, [showPopover]);
-
-  /**
-   * Handles chained esc key logic
-   */
-  const handleEsc = useCallback(() => {
-    if (debouncedSearch) {
-      setSearch('');
-      return;
-    }
-    if (!showPopover) return;
-    if (!!panel) {
-      setPanel(() => emptyPanel);
-      return;
-    }
-    setShowPopover(false);
-  }, [debouncedSearch, showPopover, panel]);
-
-  /*
-   * Uses hook to call close when the click is outside of modal
-   */
-  const ref = useOuterClick(handleClose);
-
-  /*
-   * Uses hook to call close when the click is outside of modal
-   */
-  useEscClick(handleEsc);
-
-  const newButton = useMemo(
-    () =>
-      cloneElement(button as JSX.Element, {
-        onClick: () => onClick(),
-      }),
-    [button, onClick],
-  );
-
-  const containerClassName = clsx(
-    BASE_CLASS_NAMES.container,
-    above
-      ? VARIANT_CLASS_NAMES.above.container
-      : VARIANT_CLASS_NAMES.below.container,
-    right
-      ? VARIANT_CLASS_NAMES.right.container
-      : VARIANT_CLASS_NAMES.left.container,
-  );
-
-  const popoverClassName = clsx(
-    BASE_CLASS_NAMES.popover,
-    popoverRounding(!!panel, variant, !!right),
-  );
-
-  const positionVariantClassName = right
-    ? VARIANT_CLASS_NAMES.right.panel
-    : VARIANT_CLASS_NAMES.left.panel;
-
-  const panelClassName = clsx(
-    BASE_CLASS_NAMES.panel,
-    above ? VARIANT_CLASS_NAMES.above.panel : VARIANT_CLASS_NAMES.below.panel,
-    (VARIANT_CLASS_NAMES as StringIndexedObject)[variant]?.panel ||
-      positionVariantClassName,
-  );
-
-  const panelStyle = VARIANTS.includes(variant) ? PANEL_STYLE[variant] : {};
-
-  const classNames = {
-    ...BASE_CLASS_NAMES,
-    container: containerClassName,
-    popover: popoverClassName,
-    panel: panelClassName,
-  };
-
-  /**
-   * Enhances items
-
-   */
-  const items = useMemo(
-    () =>
-      (originalItems as AdvancedItem[]).map((itemProps, i) => {
-        const action = itemProps.action || { type: '', panel: null };
-
-        /**
-         * Handles action click
-         * @param {Event} event
-         */
-        const handleClick = (event: MouseEvent) => {
-          if (action.type === ACTIONS.OPEN_PANEL || itemProps.stopPropagation) {
-            event.stopPropagation();
-          }
-
-          if (action.type === ACTIONS.OPEN_PANEL) {
-            setSelected(i);
-
-            if (!!panel && selected === i) {
-              setPanel(() => emptyPanel);
-              setSelected(-1);
-
-              return;
-            }
-
-            setPanel(() => action.panel as () => JSX.Element);
-          }
-
-          if (onAction) {
-            onAction(action, event);
-          }
-        };
-
-        const props = {
-          ...itemProps,
-          onClick: handleClick,
-          selected: i === selected,
-        };
-
-        if (action.type !== ACTIONS.OPEN_PANEL) return props;
-
-        return { ...props, arrow: true };
-      }),
-    [originalItems, selected, onAction, panel],
-  );
-
-  /**
-   * Handles search
-   */
-  const onSearch = (event: AdvancedPropsEvent) => setSearch(event.target.value);
-
-  const value = search;
-
-  const clearSearch = () => setSearch('');
-
-  const showPanel = panel !== emptyPanel;
-
-  return {
-    classNames,
-    showPopover,
-    button: newButton,
-    panel,
-    ref,
-    handleClose,
-    panelStyle,
-    items,
-    debouncedSearch,
-    onSearch,
-    clearSearch,
-    showPanel,
-    value,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Standard/constants.ts

@@ -1,4 +0,0 @@
-export const CLASS_NAMES = {
-  baseWrapper:
-    'absolute border border-neutral-200 rounded-lg bg-neutral-000 shadow-popover z-30',
-};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Standard/index.tsx

@@ -1,77 +0,0 @@
-import React, { FunctionComponent, MutableRefObject } from 'react';
-import useStandardPopover from '~/components/Popover/Standard/useStandardPopover';
-
-export interface StandardHandleCloseArgs {
-  handleClose: () => void;
-}
-
-export type StandardHandleClose = (
-  args: StandardHandleCloseArgs,
-) => JSX.Element | JSX.Element[];
-
-export interface StandardProps {
-  children: StandardHandleClose;
-  button?: JSX.Element | JSX.Element | null;
-  className?: string;
-  /**
-   * Position above button rather than below
-   */
-  above?: boolean;
-  /**
-   * Position popover to right-align rather than left-align
-   */
-  right?: boolean;
-  /**
-   * Visible state
-   */
-  visible?: boolean | number;
-  /**
-   * Y margin shift - tailwind className
-   */
-  yMargin?: string;
-  /**
-   * X margin shift - tailwind className
-   */
-  xMargin?: string;
-}
-
-const Standard: FunctionComponent<StandardProps> = function ({
-  children,
-  above = false,
-  right = false,
-  visible = false,
-  button = null,
-  yMargin,
-  xMargin,
-}) {
-  const {
-    classNames,
-    showPopover,
-    button: Button,
-    ref,
-    handleClose,
-  } = useStandardPopover({
-    above,
-    right,
-    visible,
-    button,
-    yMargin,
-    xMargin,
-  });
-
-  return (
-    <div className={classNames.container}>
-      {Button}
-      {showPopover && (
-        <div
-          ref={ref as MutableRefObject<HTMLDivElement>}
-          className={classNames.wrapper}
-        >
-          {children({ handleClose })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Standard;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Standard/useStandardPopover.ts

@@ -1,96 +0,0 @@
-import {
-  useState,
-  cloneElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  FunctionComponentElement,
-} from 'react';
-
-import { CLASS_NAMES } from './constants';
-import useOuterClick, { type OuterClickHook } from '~/hooks/useOuterClick';
-import useEscClick from '~/hooks/useEscClick';
-import { useClasses } from '~/hooks';
-
-import type { StandardProps } from './index';
-import type { StringIndexedObject } from '~/types';
-
-export type StandardPopoverArgs = Omit<StandardProps, 'children'>;
-
-export interface StandardPopoverHook {
-  handleClose: () => void;
-  classNames: StringIndexedObject;
-  showPopover: boolean;
-  onClick: (e: MouseEvent) => void;
-  button: FunctionComponentElement<any> | null | undefined;
-  ref: OuterClickHook;
-}
-
-export default function useStandardPopover({
-  button,
-  above,
-  right,
-  visible,
-  className,
-  xMargin,
-  yMargin,
-}: StandardPopoverArgs): StandardPopoverHook {
-  const [showPopover, setShowPopover] = useState(visible);
-
-  const onClick = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setShowPopover(!showPopover);
-  };
-
-  const hidePopover = () => setShowPopover(false);
-
-  /**
-   * Handles close logic
-   */
-  const handleClose = useCallback(() => setShowPopover(false), []);
-
-  /*
-   * Uses hook to call close when the click is outside of modal
-   */
-  const ref = useOuterClick(hidePopover);
-  /*
-   * Uses hook to call close when the click is outside of modal
-   */
-  useEscClick(hidePopover);
-
-  const newButton =
-    button && cloneElement(button, { onClick: (e: MouseEvent) => onClick(e) });
-
-  const y = useMemo(() => {
-    if (yMargin) return yMargin;
-    return above ? 'mb-1.5' : 'mt-1.5';
-  }, [above, yMargin]);
-
-  const classNames = useClasses(CLASS_NAMES, {
-    container: ['relative', className],
-    wrapper: [
-      '.baseWrapper',
-      above ? 'bottom-full' : 'top-full',
-      y,
-      right ? 'right-0' : 'left-0',
-      xMargin || '',
-    ],
-  });
-
-  /**
-   * Update state when prop changes
-   */
-  useEffect(() => {
-    setShowPopover(visible);
-  }, [visible]);
-
-  return {
-    handleClose,
-    classNames,
-    showPopover: showPopover as boolean,
-    onClick,
-    button: newButton,
-    ref,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Sticky/constants.ts

@@ -1,4 +0,0 @@
-export const CLASS_NAMES = {
-  popover:
-    'absolute border border-neutral-200 rounded-lg bg-neutral-000 shadow-popover z-30 p-2 max-w-100',
-};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Sticky/index.tsx

@@ -1,28 +0,0 @@
-import React, { type MutableRefObject, type FunctionComponent } from 'react';
-import { CLASS_NAMES } from './constants';
-import useStickyPopover from './useStickyPopover';
-
-export interface StickyProps {
-  children: JSX.Element;
-  content: JSX.Element;
-}
-
-const Sticky: FunctionComponent<StickyProps> = function ({
-  children,
-  content,
-}) {
-  const { ref, showPopover, popoverStyle } = useStickyPopover();
-
-  return (
-    <div ref={ref as MutableRefObject<HTMLDivElement>}>
-      {content}
-      {showPopover && (
-        <div style={popoverStyle} className={CLASS_NAMES.popover}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Sticky;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/Sticky/useStickyPopover.ts

@@ -1,55 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type MutableRefObject,
-  type CSSProperties,
-} from 'react';
-import { useMousePosition } from '~/hooks';
-
-export interface StickyPopoverHook {
-  ref: MutableRefObject<HTMLDivElement | undefined>;
-  showPopover: boolean;
-  popoverStyle: CSSProperties;
-}
-
-export default function useStickyPopover(): StickyPopoverHook {
-  const ref = useRef<HTMLDivElement>();
-  const [showPopover, setShowPopover] = useState(false);
-  const { x, y } = useMousePosition(ref as MutableRefObject<HTMLElement>);
-
-  const handleMouseEnter = useCallback(() => {
-    setShowPopover(true);
-  }, [setShowPopover]);
-
-  const handleMouseLeave = useCallback(() => {
-    setShowPopover(false);
-  }, [setShowPopover]);
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.addEventListener('mouseenter', handleMouseEnter);
-      ref.current.addEventListener('mouseleave', handleMouseLeave);
-      return () => {
-        if (ref.current) {
-          ref.current.removeEventListener('mouseenter', handleMouseEnter);
-          ref.current.removeEventListener('mouseleave', handleMouseLeave);
-        }
-      };
-    }
-
-    return () => {};
-  }, [ref]);
-
-  const popoverStyle: CSSProperties = {
-    left: `${x}px`,
-    top: `${y}px`,
-  };
-
-  return {
-    ref,
-    showPopover,
-    popoverStyle,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Popover/index.ts

@@ -1,11 +0,0 @@
-import Standard from './Standard';
-import Advanced from './Advanced';
-import Sticky from './Sticky';
-
-const Popover = {
-  Standard,
-  Advanced,
-  Sticky,
-};
-
-export default Popover;