@tcn/ui 0.2.0 → 0.3.0

package/dist/utils/click_away_listener.d.ts

@@ -7,5 +7,6 @@ export interface ClickAwayListenerProps {
     isException?: (target: HTMLElement) => boolean;
     refs?: React.RefObject<Element>[];
 }
+export declare function isEventWithinElement(event: MouseEvent | TouchEvent, node: HTMLElement | null, activated: boolean, refs: (Element | null)[]): boolean;
 export declare const ClickAwayListener: React.ForwardRefExoticComponent<ClickAwayListenerProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=click_away_listener.d.ts.map

package/dist/utils/click_away_listener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"click_away_listener.d.ts","sourceRoot":"","sources":["../../src/utils/click_away_listener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC;IAC3C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAE/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;CACnC;AAuCD,eAAO,MAAM,iBAAiB,4FA0E7B,CAAC"}
+{"version":3,"file":"click_away_listener.d.ts","sourceRoot":"","sources":["../../src/utils/click_away_listener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC;IAC3C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAE/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;CACnC;AAWD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,UAAU,GAAG,UAAU,EAC9B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,WAsBzB;AAED,eAAO,MAAM,iBAAiB,4FA0E7B,CAAC"}

package/dist/utils/click_away_listener.js

@@ -53,6 +53,7 @@ const F = m.forwardRef(
   }
 );
 export {
-  F as ClickAwayListener
+  F as ClickAwayListener,
+  w as isEventWithinElement
 };
 //# sourceMappingURL=click_away_listener.js.map

package/dist/utils/click_away_listener.js.map

@@ -1 +1 @@
-{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from './hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nfunction isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEA,SAASC,EACPC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvC,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}
+{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from './hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nexport function isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvC,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}

package/dist/utils/index.d.ts

@@ -1,17 +1,18 @@
-export * from './focus_redirect.js';
 export * from './click_away_listener.js';
+export * from './focus_redirect.js';
 export * from './scroll_away_listener.js';
-export * from './hooks/make_context_hook.js';
 export * from './dnd/hooks/use_draggable.js';
+export * from './hooks/make_context_hook.js';
 export * from './hooks/use_fork_ref.js';
 export * from './hooks/use_media_query.js';
 export * from './hooks/use_resize_observer.js';
 export * from './default_value.js';
 export * from './calendar/calendar_date.js';
 export * from './calendar/calendar_dates_generator.js';
-export * from './calendar/month.js';
-export * from './calendar/get_months_of_year.js';
 export * from './calendar/get_days_of_week.js';
-export * from './types/variations.js';
+export * from './calendar/get_months_of_year.js';
+export * from './calendar/month.js';
 export * from './types/dimensions.js';
+export * from './types/variations.js';
+export * from './responsive/responsive_renderer.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,qBAAqB,CAAC;AACpC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAE/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,qCAAqC,CAAC"}

package/dist/utils/index.js

@@ -1,30 +1,33 @@
-import { FocusRedirect as o } from "./focus_redirect.js";
-import { ClickAwayListener as f } from "./click_away_listener.js";
-import { ScrollAwayListener as m } from "./scroll_away_listener.js";
-import { makeContextHook as p } from "./hooks/make_context_hook.js";
-import { useDraggable as i } from "./dnd/hooks/use_draggable.js";
+import { ClickAwayListener as o, isEventWithinElement as t } from "./click_away_listener.js";
+import { FocusRedirect as m } from "./focus_redirect.js";
+import { ScrollAwayListener as s } from "./scroll_away_listener.js";
+import { useDraggable as a } from "./dnd/hooks/use_draggable.js";
+import { makeContextHook as i } from "./hooks/make_context_hook.js";
 import { useForkRef as u } from "./hooks/use_fork_ref.js";
-import { useMediaQuery as l } from "./hooks/use_media_query.js";
-import { TriggerConfig as c, useResizeObserver as d } from "./hooks/use_resize_observer.js";
+import { useMediaQuery as d } from "./hooks/use_media_query.js";
+import { TriggerConfig as R, useResizeObserver as c } from "./hooks/use_resize_observer.js";
 import { defaultValue as C } from "./default_value.js";
-import { CalendarDatesGenerator as M } from "./calendar/calendar_dates_generator.js";
-import { Month as R } from "./calendar/month.js";
-import { getMonthsOfYear as h } from "./calendar/get_months_of_year.js";
-import { getDaysOfWeek as A } from "./calendar/get_days_of_week.js";
+import { CalendarDatesGenerator as v } from "./calendar/calendar_dates_generator.js";
+import { getDaysOfWeek as M } from "./calendar/get_days_of_week.js";
+import { getMonthsOfYear as b } from "./calendar/get_months_of_year.js";
+import { Month as A } from "./calendar/month.js";
+import { ResponsiveRenderer as F } from "./responsive/responsive_renderer.js";
 export {
-  M as CalendarDatesGenerator,
-  f as ClickAwayListener,
-  o as FocusRedirect,
-  R as Month,
-  m as ScrollAwayListener,
-  c as TriggerConfig,
+  v as CalendarDatesGenerator,
+  o as ClickAwayListener,
+  m as FocusRedirect,
+  A as Month,
+  F as ResponsiveRenderer,
+  s as ScrollAwayListener,
+  R as TriggerConfig,
   C as defaultValue,
-  A as getDaysOfWeek,
-  h as getMonthsOfYear,
-  p as makeContextHook,
-  i as useDraggable,
+  M as getDaysOfWeek,
+  b as getMonthsOfYear,
+  t as isEventWithinElement,
+  i as makeContextHook,
+  a as useDraggable,
   u as useForkRef,
-  l as useMediaQuery,
-  d as useResizeObserver
+  d as useMediaQuery,
+  c as useResizeObserver
 };
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/utils/mouse_leave_region.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface MouseLeaveRegionProps {
+    elementsRefs: (React.RefObject<Element> | React.MutableRefObject<Element>)[];
+    onMouseLeave: () => void;
+    buffer?: number;
+}
+export declare function MouseLeaveRegion({ onMouseLeave, elementsRefs: elementRefs, buffer, }: MouseLeaveRegionProps): null;
+//# sourceMappingURL=mouse_leave_region.d.ts.map

package/dist/utils/mouse_leave_region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.d.ts","sourceRoot":"","sources":["../../src/utils/mouse_leave_region.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;IAC7E,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EAAE,WAAW,EACzB,MAAU,GACX,EAAE,qBAAqB,QAyBvB"}

package/dist/utils/mouse_leave_region.js

@@ -0,0 +1,26 @@
+import { useEffect as u } from "react";
+function v({
+  onMouseLeave: o,
+  elementsRefs: i,
+  buffer: t = 8
+}) {
+  return u(() => {
+    const r = (e) => {
+      i.some((c) => {
+        const s = c.current;
+        if (s != null) {
+          const n = s.getBoundingClientRect(), l = Math.max(e.clientX - t, n.left), m = Math.min(e.clientX + t, n.right), a = Math.max(e.clientY - t, n.top), p = Math.min(e.clientY + t, n.bottom);
+          return l <= m && a <= p;
+        }
+        return !1;
+      }) || o();
+    };
+    return window.addEventListener("mousemove", r), () => {
+      window.removeEventListener("mousemove", r);
+    };
+  }, [o, i, t]), null;
+}
+export {
+  v as MouseLeaveRegion
+};
+//# sourceMappingURL=mouse_leave_region.js.map

package/dist/utils/mouse_leave_region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mouse_leave_region.js","sources":["../../src/utils/mouse_leave_region.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport interface MouseLeaveRegionProps {\n  elementsRefs: (React.RefObject<Element> | React.MutableRefObject<Element>)[];\n  onMouseLeave: () => void;\n  buffer?: number;\n}\n\nexport function MouseLeaveRegion({\n  onMouseLeave,\n  elementsRefs: elementRefs,\n  buffer = 8,\n}: MouseLeaveRegionProps) {\n  useEffect(() => {\n    const update = (event: MouseEvent) => {\n      const intersects = elementRefs.some(ref => {\n        const element = ref.current;\n        if (element != null) {\n          const rect = element.getBoundingClientRect();\n          const overlapLeft = Math.max(event.clientX - buffer, rect.left);\n          const overlapRight = Math.min(event.clientX + buffer, rect.right);\n          const overlapTop = Math.max(event.clientY - buffer, rect.top);\n          const overlapBottom = Math.min(event.clientY + buffer, rect.bottom);\n          return overlapLeft <= overlapRight && overlapTop <= overlapBottom;\n        }\n        return false;\n      });\n      if (!intersects) {\n        onMouseLeave();\n      }\n    };\n    window.addEventListener('mousemove', update);\n    return () => {\n      window.removeEventListener('mousemove', update);\n    };\n  }, [onMouseLeave, elementRefs, buffer]);\n  return null;\n}\n"],"names":["MouseLeaveRegion","onMouseLeave","elementRefs","buffer","useEffect","update","event","ref","element","rect","overlapLeft","overlapRight","overlapTop","overlapBottom"],"mappings":";AAQO,SAASA,EAAiB;AAAA,EAC/B,cAAAC;AAAA,EACA,cAAcC;AAAA,EACd,QAAAC,IAAS;AACX,GAA0B;AACxB,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAS,CAACC,MAAsB;AAapC,MAZmBJ,EAAY,KAAK,CAAAK,MAAO;AACzC,cAAMC,IAAUD,EAAI;AACpB,YAAIC,KAAW,MAAM;AACnB,gBAAMC,IAAOD,EAAQ,sBAAA,GACfE,IAAc,KAAK,IAAIJ,EAAM,UAAUH,GAAQM,EAAK,IAAI,GACxDE,IAAe,KAAK,IAAIL,EAAM,UAAUH,GAAQM,EAAK,KAAK,GAC1DG,IAAa,KAAK,IAAIN,EAAM,UAAUH,GAAQM,EAAK,GAAG,GACtDI,IAAgB,KAAK,IAAIP,EAAM,UAAUH,GAAQM,EAAK,MAAM;AAClE,iBAAOC,KAAeC,KAAgBC,KAAcC;AAAA,QACtD;AACA,eAAO;AAAA,MACT,CAAC,KAECZ,EAAA;AAAA,IAEJ;AACA,kBAAO,iBAAiB,aAAaI,CAAM,GACpC,MAAM;AACX,aAAO,oBAAoB,aAAaA,CAAM;AAAA,IAChD;AAAA,EACF,GAAG,CAACJ,GAAcC,GAAaC,CAAM,CAAC,GAC/B;AACT;"}

package/dist/utils/types/dimensions.d.ts

@@ -6,7 +6,17 @@ export interface Dimensions {
     width: number;
     height: number;
 }
-export interface Rect {
+export interface Rectangle {
+    dimensions: Dimensions;
+    position: Position;
+}
+export interface RectCorners {
+    topLeft: Position;
+    topRight: Position;
+    bottomLeft: Position;
+    bottomRight: Position;
+}
+export interface RectEdges {
     top: number;
     right: number;
     bottom: number;

package/dist/utils/types/dimensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/utils/types/dimensions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,IAAI;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd"}
+{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/utils/types/dimensions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,QAAQ,CAAC;IACrB,WAAW,EAAE,QAAQ,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -134,8 +134,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/state": "1.0.1",
-    "@tcn/icons": "2.1.1"
+    "@tcn/icons": "2.2.0",
+    "@tcn/state": "1.1.0"
   },
   "scripts": {
     "build": "vite build",

package/src/inputs/color_input/color_input.tsx

@@ -11,7 +11,7 @@ import { ColorPicker } from './color_picker.js';
 import { Input } from '../input/input.js';
 import styles from './color_input.module.css';
 
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 
 export interface ColorInputProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {

package/src/inputs/date_picker/date_picker_input.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Hierarchy } from '../../utils/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 import { clsx } from 'clsx';
 import { HTMLAttributes } from 'react';
 import { Button } from '../../actions/index.js';

package/src/inputs/date_picker/date_picker_year_input.tsx

@@ -2,7 +2,7 @@ import { Button } from '../../actions/index.js';
 import { clsx } from 'clsx';
 import styles from './date_picker_year_input.module.css';
 import { useState } from 'react';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 import { DatePickerYearSelector } from './date_picker_year_selector.js';
 import { useSignalValue } from '@tcn/state';

package/src/inputs/suggestions/suggestion_list.tsx

@@ -10,7 +10,7 @@ import { OptionProps, Option } from '../options/option.js';
 import styles from './suggestion_list.module.css';
 
 import { Button } from '../../actions/index.js';
-import { Popper } from '../../overlay/popper/popper.js';
+import { Popper } from '../../overlay/popper/legacy/popper.js';
 
 const MAX_RESULTS = 50;
 const BATCH_SIZE = 50;

package/src/layouts/index.ts

@@ -1,13 +1,15 @@
-export * from './body/h_body.js';
-export * from './body/v_body.js';
 export * from './column/column.js';
 export * from './divider/divider.js';
-export * from './footer/footer.js';
 export * from './grid/grid.js';
-export * from './header/header.js';
 export * from './list/item.js';
 export * from './list/list.js';
 export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-export * from './utility_bar/utility_bar.js';
+// Scaffold
+export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
+export { HBody, type HBodyProps } from './body/h_body.js';
+export { VBody, type VBodyProps } from './body/v_body.js';
+export { Footer, type FooterProps } from './footer/footer.js';
+export { Header, type HeaderProps } from './header/header.js';
+export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';

package/src/layouts/scaffold/scaffold.module.css

@@ -0,0 +1,5 @@
+.scaffold-stack {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}

package/src/layouts/scaffold/scaffold.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+import type { Alignment } from '../../stacks/types/alignment.js';
+import { VStack } from '../../stacks/v_stack.js';
+// Styles
+import styles from './scaffold.module.css';
+
+export interface ScaffoldProps extends Omit<BoxProps, 'as'> {
+  vAlign?: Alignment;
+  hAlign?: Alignment;
+}
+
+export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(
+  {
+    children,
+    width,
+    height = '100%',
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    hAlign,
+    vAlign = 'start',
+    className,
+    ...props
+  }: ScaffoldProps,
+  ref
+) {
+  return (
+    <Box
+      ref={ref}
+      width={width}
+      height={height}
+      minWidth={minWidth}
+      maxWidth={maxWidth}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      data-h-alignment={hAlign}
+      data-v-alignment={vAlign}
+      className={clsx(className, 'tcn-scaffold')}
+      {...props}
+    >
+      <VStack
+        as="section"
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        hAlign={hAlign}
+        vAlign={vAlign}
+        ref={ref}
+        className={clsx(styles['scaffold-stack'], 'tcn-scaffold-stack')}
+        zIndex={0}
+      >
+        {children}
+      </VStack>
+    </Box>
+  );
+});

package/src/layouts/utility_bar/utility_bar.module.css

@@ -1,7 +1,4 @@
 .utility-bar {
   width: 100%;
   min-height: 0;
-  border-bottom: 1px solid rgb(221, 221, 221);
-  padding: var(--padding-medium);
-  gap: var(--gap-medium);
 }

package/src/overlay/frame/frame.module.css

@@ -0,0 +1,5 @@
+.frame {
+  padding: 0;
+  border: none;
+  background: none;
+}

package/src/overlay/frame/frame.stories.tsx

@@ -6,7 +6,7 @@ import { BodyText } from '../../typography/index.js';
 import { Header } from '../../layouts/index.js';
 import styles from './frame_stories.module.css';
 export default {
-  title: 'Overlay/Floating/Frame',
+  title: 'Overlays/Floating/Frame',
   component: Frame,
   tags: ['autodocs'],
 

package/src/overlay/frame/frame.tsx

@@ -3,6 +3,10 @@ import { ZStack, type ZStackProps } from '../../stacks/index.js';
 import { Portal } from '../portal/portal.js';
 import { Draggable } from '../../utils/dnd/draggable/draggable.js';
 
+// Styles
+import styles from './frame.module.css';
+import { clsx } from 'clsx';
+
 export interface FrameOwnProps {
   isOpen?: boolean;
   children?: React.ReactNode;
@@ -13,7 +17,14 @@ export interface FrameOwnProps {
 export type FrameProps = ZStackProps & FrameOwnProps;
 
 export const Frame = React.forwardRef<HTMLDialogElement, FrameProps>(function Frame(
-  { children, isOpen = false, draggable = true, veil = false, ...rest }: FrameProps,
+  {
+    children,
+    isOpen = false,
+    draggable = true,
+    veil = false,
+    className,
+    ...rest
+  }: FrameProps,
   ref
 ) {
   if (!isOpen) {
@@ -22,9 +33,14 @@ export const Frame = React.forwardRef<HTMLDialogElement, FrameProps>(function Fr
 
   return (
     <Portal>
-      <ZStack width="100%" height="100%" data-is-veil={veil} className="tcn-frame">
+      <ZStack width="100%" height="100%" data-is-veil={veil} className="tcn-frame-veil">
         <Draggable draggable={draggable}>
-          <ZStack ref={ref} {...rest}>
+          <ZStack
+            as="dialog"
+            ref={ref}
+            className={clsx(styles['frame'], 'tcn-frame', className)}
+            {...rest}
+          >
             {children}
           </ZStack>
         </Draggable>

package/src/overlay/index.ts

@@ -1,6 +1,33 @@
 export * from './portal/portal.js';
 export * from './context_menu/context_menu.js';
 export * from './menu/menu.js';
-export * from './tooltip/tooltip.js';
-export * from './popper/popper.js';
+
 export { Frame, type FrameOwnProps, type FrameProps } from './frame/frame.js';
+export {
+  ElementTethered,
+  type ElementTetheredProps,
+} from './tethered/element_tethered.js';
+export { Tethered, type TetheredProps } from './tethered/tethered.js';
+export { type HorizontalTether, type VerticalTether } from './tethered/types.js';
+export * from './popper/legacy/popper.js';
+export {
+  PopperDismissal,
+  type PopperDismissalDecoratorProps,
+} from './popper/base/dismissal_decorator.js';
+export {
+  PreviewPopper,
+  type PreviewPopperProps,
+} from './popper/preview_popper.js';
+export {
+  ContextPopper,
+  type ContextPopperProps,
+} from './popper/context_popper.js';
+export {
+  ElementPopper,
+  type ElementPopperProps,
+} from './popper/element_popper.js';
+export {
+  type BasePopperOwnProps,
+  type BasePopperProps,
+  BasePopper,
+} from './popper/base/base_popper.js';

package/src/overlay/menu/menu.tsx

@@ -4,7 +4,7 @@ import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import type { HStackProps } from '../../stacks/h_stack.js';
 import type { VStackProps } from '../../stacks/v_stack.js';
-import { Popper, type PopperProps } from '../../overlay/popper/popper.js';
+import { Popper, type PopperProps } from '../popper/legacy/popper.js';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import styles from './menu.module.css';
 import { clsx } from 'clsx';

package/src/overlay/popper/__stories__/base_args.ts

@@ -0,0 +1,75 @@
+import { type ArgTypes } from '@storybook/react-vite';
+import { PopperDismissal } from '../base/dismissal_decorator.js';
+import type { BasePopperProps } from '../base/base_popper.js';
+import type { BaseTetheredOwnProps } from '../../tethered/tethered.js';
+
+export type SB_PopoverStoryProps = Pick<
+  BasePopperProps,
+  'restoreFocus' | 'dismissals' | 'veil'
+> &
+  BaseTetheredOwnProps;
+
+export const SBPopperInitialArgs: SB_PopoverStoryProps = {
+  verticalAnchor: 'top',
+  horizontalAnchor: 'center',
+  verticalOrigin: 'bottom',
+  horizontalOrigin: 'center',
+  verticalOffset: 0,
+  horizontalOffset: 0,
+  restoreFocus: false,
+  veil: false,
+};
+
+export const SBPopperBaseArgs: ArgTypes<SB_PopoverStoryProps> = {
+  verticalAnchor: {
+    options: ['top', 'center', 'bottom'],
+    control: { type: 'radio' },
+    description: 'The anchor to position the popper vertically.',
+  },
+  horizontalAnchor: {
+    options: ['start', 'center', 'end'],
+    control: { type: 'radio' },
+    description: 'The anchor to position the popper horizontally.',
+  },
+  verticalOrigin: {
+    options: ['top', 'center', 'bottom'],
+    control: { type: 'radio' },
+    description: 'The origin to position the popper vertically.',
+  },
+  horizontalOrigin: {
+    options: ['start', 'center', 'end'],
+    control: { type: 'radio' },
+    description: 'The origin to position the popper horizontally.',
+  },
+  verticalOffset: {
+    control: { type: 'number' },
+    defaultValue: 0,
+    description: 'The offset to position the popper vertically.',
+  },
+  horizontalOffset: {
+    control: { type: 'number' },
+    defaultValue: 0,
+    description: 'The offset to position the popper horizontally.',
+  },
+  restoreFocus: {
+    control: { type: 'boolean' },
+    defaultValue: false,
+    description: 'Whether to restore focus when the popper is closed.',
+  },
+  dismissals: {
+    options: [
+      PopperDismissal.SCROLL_AWAY,
+      PopperDismissal.CLICK_AWAY,
+      PopperDismissal.MOUSE_LEAVE,
+      PopperDismissal.VEIL_CLICK,
+    ],
+    control: { type: 'multi-select' },
+    defaultValue: [PopperDismissal.SCROLL_AWAY, PopperDismissal.CLICK_AWAY],
+    description: 'The dismissals to apply to the popper.',
+  },
+  veil: {
+    control: { type: 'boolean' },
+    defaultValue: false,
+    description: 'Whether to display a veil when the popper is open.',
+  },
+};