@pushwoosh/kit-helpers 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/grid.d.ts CHANGED
@@ -2,17 +2,20 @@ export declare const GridContainer: import("styled-components").StyledComponent<
2
2
  gap?: string | number | undefined;
3
3
  columns?: string | number | undefined;
4
4
  padding?: string | number | undefined;
5
+ margin?: string | number | undefined;
5
6
  justify?: "center" | "start" | "end" | "space-between" | undefined;
6
7
  }, never>;
7
8
  export declare const Horizontal: import("styled-components").StyledComponent<"div", any, {
8
9
  gap?: string | number | undefined;
9
10
  columns?: string | number | undefined;
10
11
  padding?: string | number | undefined;
12
+ margin?: string | number | undefined;
11
13
  justify?: "center" | "start" | "end" | "space-between" | undefined;
12
14
  }, never>;
13
15
  export declare const Vertical: import("styled-components").StyledComponent<"div", any, {
14
16
  gap?: string | number | undefined;
15
17
  columns?: string | number | undefined;
16
18
  padding?: string | number | undefined;
19
+ margin?: string | number | undefined;
17
20
  justify?: "center" | "start" | "end" | "space-between" | undefined;
18
21
  }, never>;
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- !function(n,t){for(var e in t)n[e]=t[e]}(exports,function(n){var t={};function e(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return n[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=n,e.c=t,e.d=function(n,t,i){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:i})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var r in n)e.d(i,r,function(t){return n[t]}.bind(null,r));return i},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="/",e(e.s=4)}([function(n,t){n.exports=require("tslib")},function(n,t){n.exports=require("react")},function(n,t){n.exports=require("styled-components")},function(n,t){n.exports=require("react-transition-group")},function(n,t,e){"use strict";e.r(t),e.d(t,"GridContainer",(function(){return s})),e.d(t,"Horizontal",(function(){return f})),e.d(t,"Vertical",(function(){return p})),e.d(t,"usePersistentFunction",(function(){return m})),e.d(t,"elementAddListener",(function(){return v})),e.d(t,"subscribeClickAway",(function(){return b})),e.d(t,"useClickAway",(function(){return g})),e.d(t,"Expand",(function(){return S}));var i,r,a,o=e(0),c=e(2),u=e.n(c),l=function(n){return"number"==typeof n},s=u.a.div.withConfig({displayName:"GridContainer",componentId:"sc-td6pqh-0"})(i||(i=Object(o.__makeTemplateObject)(["\n display: grid;\n ","\n ","\n ","\n ","\n"],["\n display: grid;\n ","\n ","\n ","\n ","\n"])),(function(n){var t=n.gap;return t&&"grid-gap: ".concat(l(t)?"".concat(t,"px"):t,";")}),(function(n){var t=n.columns;return t&&"grid-template-columns: ".concat(l(t)?"repeat(".concat(t,", 1fr)"):t,";")}),(function(n){var t=n.padding;return t&&"padding: ".concat(l(t)?"".concat(t,"px"):t,";")}),(function(n){var t=n.justify;return t&&"justify-content: ".concat(t,";")})),f=u()(s).withConfig({displayName:"Horizontal",componentId:"sc-td6pqh-1"})(r||(r=Object(o.__makeTemplateObject)(["\n grid-auto-flow: column;\n"],["\n grid-auto-flow: column;\n"]))),p=u()(s).withConfig({displayName:"Vertical",componentId:"sc-td6pqh-2"})(a||(a=Object(o.__makeTemplateObject)(["\n grid-auto-flow: row;\n"],["\n grid-auto-flow: row;\n"]))),d=e(1),h=e.n(d);function m(n){var t=Object(d.useRef)(n);return t.current=n,Object(d.useCallback)((function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];return t.current.apply(t,n)}),[])}function v(n,t,e){var i=Array.isArray(t)?t:[t];return i.forEach((function(t){n.addEventListener(t,e)})),function(){i.forEach((function(t){n.removeEventListener(t,e)}))}}function b(n,t){return v(document,["mousedown","touchstart"],(function(e){n&&!n.contains(e.target)&&t(e)}))}function g(n,t,e){var i=m(e);Object(d.useEffect)((function(){if(n)return b(t.current,i)}),[n,t,i])}var j,y,O,x,_,w=e(3),C=Object(c.css)(j||(j=Object(o.__makeTemplateObject)(["\n transition: height var(--timeout) linear, opacity var(--timeout) linear;\n\n &-enter {\n opacity: 0;\n height: 0;\n }\n\n &-enter-active {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit-active {\n opacity: 0;\n height: 0;\n }\n"],["\n transition: height var(--timeout) linear, opacity var(--timeout) linear;\n\n &-enter {\n opacity: 0;\n height: 0;\n }\n\n &-enter-active {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit-active {\n opacity: 0;\n height: 0;\n }\n"]))),E=Object(c.css)(y||(y=Object(o.__makeTemplateObject)(["\n position: relative;\n width: 1px;\n height: 1px;\n\n & > * {\n position: absolute;\n top: calc(var(--height) / -2);\n left: calc(var(--width) / -2);\n }\n"],["\n position: relative;\n width: 1px;\n height: 1px;\n\n & > * {\n position: absolute;\n top: calc(var(--height) / -2);\n left: calc(var(--width) / -2);\n }\n"]))),N=Object(c.css)(O||(O=Object(o.__makeTemplateObject)(["\n position: relative;\n width: var(--width);\n height: var(--height);\n\n & > * {\n position: absolute;\n top: 0;\n left: 0;\n }\n"],["\n position: relative;\n width: var(--width);\n height: var(--height);\n\n & > * {\n position: absolute;\n top: 0;\n left: 0;\n }\n"]))),T=Object(c.css)(x||(x=Object(o.__makeTemplateObject)(["\n transition: all var(--timeout) ease-out;\n\n & > * {\n transition: all var(--timeout) ease-out;\n }\n\n &-enter { "," }\n\n &-enter-active, &-exit { "," }\n\n &-exit-active { "," }\n"],["\n transition: all var(--timeout) ease-out;\n\n & > * {\n transition: all var(--timeout) ease-out;\n }\n\n &-enter { "," }\n\n &-enter-active, &-exit { "," }\n\n &-exit-active { "," }\n"])),E,N,E),k=u()((function(n){var t=n.className,e=n.externalClassName,i=n.internalClassName,r=n.timeout,a=void 0===r?100:r,c=n.children,u=Object(o.__rest)(n,["className","externalClassName","internalClassName","timeout","children"]),l=Object(d.useRef)(null),s=Object(d.useRef)(null),f=Object(d.useState)(),p=f[0],m=f[1];function v(){var n=s.current.getBoundingClientRect();m({"--timeout":"".concat(a,"ms"),"--width":"".concat(n.width,"px"),"--height":"".concat(n.height,"px")})}return Object(d.useEffect)(v,[a]),h.a.createElement(w.CSSTransition,Object(o.__assign)({},u,{timeout:a,classNames:t,onEnter:v,onExit:v,nodeRef:l}),h.a.createElement("div",{ref:l,className:e?"".concat(t," ").concat(e):t,style:p},h.a.createElement("div",{ref:s,className:i},c)))})).withConfig({displayName:"ExpandTransition",componentId:"sc-7jjhp8-0"})(_||(_=Object(o.__makeTemplateObject)(["\n overflow: hidden;\n ","\n"],["\n overflow: hidden;\n ","\n"])),(function(n){return"expand"===n.variant?T:C})),S=function(n){var t=n.expanded,e=n.children,i=Object(o.__rest)(n,["expanded","children"]);return h.a.createElement(w.TransitionGroup,{component:null},t&&h.a.createElement(k,Object(o.__assign)({},i,{key:0}),"function"==typeof e?e():e))}}]));
1
+ !function(n,t){for(var e in t)n[e]=t[e]}(exports,function(n){var t={};function e(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return n[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=n,e.c=t,e.d=function(n,t,i){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:i})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var r in n)e.d(i,r,function(t){return n[t]}.bind(null,r));return i},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="/",e(e.s=4)}([function(n,t){n.exports=require("tslib")},function(n,t){n.exports=require("react")},function(n,t){n.exports=require("styled-components")},function(n,t){n.exports=require("react-transition-group")},function(n,t,e){"use strict";e.r(t),e.d(t,"GridContainer",(function(){return s})),e.d(t,"Horizontal",(function(){return f})),e.d(t,"Vertical",(function(){return p})),e.d(t,"usePersistentFunction",(function(){return m})),e.d(t,"elementAddListener",(function(){return v})),e.d(t,"subscribeClickAway",(function(){return g})),e.d(t,"useClickAway",(function(){return b})),e.d(t,"Expand",(function(){return S}));var i,r,a,o=e(0),c=e(2),u=e.n(c),l=function(n){return"number"==typeof n},s=u.a.div.withConfig({displayName:"GridContainer",componentId:"sc-td6pqh-0"})(i||(i=Object(o.__makeTemplateObject)(["\n display: grid;\n ","\n ","\n ","\n ","\n ","\n"],["\n display: grid;\n ","\n ","\n ","\n ","\n ","\n"])),(function(n){var t=n.gap;return t&&"grid-gap: ".concat(l(t)?"".concat(t,"px"):t,";")}),(function(n){var t=n.columns;return t&&"grid-template-columns: ".concat(l(t)?"repeat(".concat(t,", 1fr)"):t,";")}),(function(n){var t=n.padding;return t&&"padding: ".concat(l(t)?"".concat(t,"px"):t,";")}),(function(n){var t=n.margin;return t&&"margin: ".concat(l(t)?"".concat(t,"px"):t,";")}),(function(n){var t=n.justify;return t&&"justify-content: ".concat(t,";")})),f=u()(s).withConfig({displayName:"Horizontal",componentId:"sc-td6pqh-1"})(r||(r=Object(o.__makeTemplateObject)(["\n grid-auto-flow: column;\n"],["\n grid-auto-flow: column;\n"]))),p=u()(s).withConfig({displayName:"Vertical",componentId:"sc-td6pqh-2"})(a||(a=Object(o.__makeTemplateObject)(["\n grid-auto-flow: row;\n"],["\n grid-auto-flow: row;\n"]))),d=e(1),h=e.n(d);function m(n){var t=Object(d.useRef)(n);return t.current=n,Object(d.useCallback)((function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];return t.current.apply(t,n)}),[])}function v(n,t,e){var i=Array.isArray(t)?t:[t];return i.forEach((function(t){n.addEventListener(t,e)})),function(){i.forEach((function(t){n.removeEventListener(t,e)}))}}function g(n,t){return v(document,["mousedown","touchstart"],(function(e){n&&!n.contains(e.target)&&t(e)}))}function b(n,t,e){var i=m(e);Object(d.useEffect)((function(){if(n)return g(t.current,i)}),[n,t,i])}var j,y,O,x,_,w=e(3),C=Object(c.css)(j||(j=Object(o.__makeTemplateObject)(["\n transition: height var(--timeout) linear, opacity var(--timeout) linear;\n\n &-enter {\n opacity: 0;\n height: 0;\n }\n\n &-enter-active {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit-active {\n opacity: 0;\n height: 0;\n }\n"],["\n transition: height var(--timeout) linear, opacity var(--timeout) linear;\n\n &-enter {\n opacity: 0;\n height: 0;\n }\n\n &-enter-active {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit-active {\n opacity: 0;\n height: 0;\n }\n"]))),E=Object(c.css)(y||(y=Object(o.__makeTemplateObject)(["\n position: relative;\n width: 1px;\n height: 1px;\n\n & > * {\n position: absolute;\n top: calc(var(--height) / -2);\n left: calc(var(--width) / -2);\n }\n"],["\n position: relative;\n width: 1px;\n height: 1px;\n\n & > * {\n position: absolute;\n top: calc(var(--height) / -2);\n left: calc(var(--width) / -2);\n }\n"]))),N=Object(c.css)(O||(O=Object(o.__makeTemplateObject)(["\n position: relative;\n width: var(--width);\n height: var(--height);\n\n & > * {\n position: absolute;\n top: 0;\n left: 0;\n }\n"],["\n position: relative;\n width: var(--width);\n height: var(--height);\n\n & > * {\n position: absolute;\n top: 0;\n left: 0;\n }\n"]))),T=Object(c.css)(x||(x=Object(o.__makeTemplateObject)(["\n transition: all var(--timeout) ease-out;\n\n & > * {\n transition: all var(--timeout) ease-out;\n }\n\n &-enter { "," }\n\n &-enter-active, &-exit { "," }\n\n &-exit-active { "," }\n"],["\n transition: all var(--timeout) ease-out;\n\n & > * {\n transition: all var(--timeout) ease-out;\n }\n\n &-enter { "," }\n\n &-enter-active, &-exit { "," }\n\n &-exit-active { "," }\n"])),E,N,E),k=u()((function(n){var t=n.className,e=n.externalClassName,i=n.internalClassName,r=n.timeout,a=void 0===r?100:r,c=n.children,u=Object(o.__rest)(n,["className","externalClassName","internalClassName","timeout","children"]),l=Object(d.useRef)(null),s=Object(d.useRef)(null),f=Object(d.useState)(),p=f[0],m=f[1];function v(){var n=s.current.getBoundingClientRect();m({"--timeout":"".concat(a,"ms"),"--width":"".concat(n.width,"px"),"--height":"".concat(n.height,"px")})}return Object(d.useEffect)(v,[a]),h.a.createElement(w.CSSTransition,Object(o.__assign)({},u,{timeout:a,classNames:t,onEnter:v,onExit:v,nodeRef:l}),h.a.createElement("div",{ref:l,className:e?"".concat(t," ").concat(e):t,style:p},h.a.createElement("div",{ref:s,className:i},c)))})).withConfig({displayName:"ExpandTransition",componentId:"sc-7jjhp8-0"})(_||(_=Object(o.__makeTemplateObject)(["\n overflow: hidden;\n ","\n"],["\n overflow: hidden;\n ","\n"])),(function(n){return"expand"===n.variant?T:C})),S=function(n){var t=n.expanded,e=n.children,i=Object(o.__rest)(n,["expanded","children"]);return h.a.createElement(w.TransitionGroup,{component:null},t&&h.a.createElement(k,Object(o.__assign)({},i,{key:0}),"function"==typeof e?e():e))}}]));
2
2
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"tslib\"","webpack:///external \"react\"","webpack:///external \"styled-components\"","webpack:///external \"react-transition-group\"","webpack:///./src/grid.tsx","webpack:///./src/hooks.ts","webpack:///./src/expand.tsx"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","require","isNumber","GridContainer","styled","div","_a","gap","columns","padding","justify","Horizontal","Vertical","usePersistentFunction","callback","ref","useRef","current","useCallback","_i","args","elementAddListener","element","eventNames","listener","eventNamesArray","Array","isArray","forEach","eventName","addEventListener","removeEventListener","subscribeClickAway","document","event","contains","target","useClickAway","use","cb","mcb","useEffect","collapseCss","css","enterExpandCss","exitExpandCss","expandCss","ExpandTransition","className","externalClassName","internalClassName","_b","timeout","children","rest","refExternal","refInternal","useState","externalStyle","setExternalStyle","updateStyle","rect","getBoundingClientRect","width","height","React","CSSTransition","classNames","onEnter","onExit","nodeRef","style","Expand","expanded","TransitionGroup","component"],"mappings":"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","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 4);\n","module.exports = require(\"tslib\");","module.exports = require(\"react\");","module.exports = require(\"styled-components\");","module.exports = require(\"react-transition-group\");","import styled from 'styled-components';\n\nconst isNumber = (value: unknown): value is number => typeof value === 'number';\n\nexport const GridContainer = styled.div<{\n gap?: number | string;\n columns?: number | string;\n padding?: number | string;\n justify?: 'center' | 'start' | 'end' | 'space-between';\n}>`\n display: grid;\n ${({ gap }): any => gap && `grid-gap: ${isNumber(gap) ? `${gap}px` : gap};`}\n ${({ columns }): any => columns && `grid-template-columns: ${isNumber(columns) ? `repeat(${columns}, 1fr)` : columns};`}\n ${({ padding }): any => padding && `padding: ${isNumber(padding) ? `${padding}px` : padding};`}\n ${({ justify }): any => justify && `justify-content: ${justify};`}\n`;\n\nexport const Horizontal = styled(GridContainer)`\n grid-auto-flow: column;\n`;\n\nexport const Vertical = styled(GridContainer)`\n grid-auto-flow: row;\n`;\n","import { useRef, useCallback, useEffect } from 'react';\n\nexport function usePersistentFunction<T extends (...args: any[]) => any>(callback: T): T {\n const ref = useRef(callback);\n ref.current = callback;\n return useCallback((...args: any) => ref.current(...args), []) as T;\n}\n\nexport function elementAddListener<K extends keyof HTMLElementEventMap, E extends HTMLElement>(\n element: E,\n eventNames: K | K[],\n listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void,\n): () => void {\n const eventNamesArray = Array.isArray(eventNames) ? eventNames : [eventNames];\n eventNamesArray.forEach((eventName) => {\n element.addEventListener(eventName, listener);\n });\n return (): void => {\n eventNamesArray.forEach((eventName) => {\n element.removeEventListener(eventName, listener);\n });\n };\n}\n\nexport function subscribeClickAway<T extends HTMLElement>(element: T, callback: EventListener): () => void {\n return elementAddListener(document as any, ['mousedown', 'touchstart'], (event) => {\n if (element && !element.contains(event.target as any)) {\n callback(event);\n }\n });\n}\n\nexport function useClickAway(use: boolean, ref: any, cb: EventListener): void {\n const mcb = usePersistentFunction(cb);\n\n useEffect(() => { // eslint-disable-line consistent-return\n if (use) {\n return subscribeClickAway(ref.current, mcb) as any;\n }\n }, [use, ref, mcb]);\n}\n","/* eslint-disable react/require-default-props, react/jsx-no-bind */\n\nimport React, {\n FC, useEffect, useRef, useState,\n} from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport styled, { css } from 'styled-components';\n\ntype ExpandTransitionProps = {\n className?: string;\n timeout?: number;\n externalClassName?: string;\n internalClassName?: string;\n};\nconst ExpandTransitionComp: FC<ExpandTransitionProps> = ({\n className,\n externalClassName,\n internalClassName,\n timeout = 100,\n children,\n ...rest\n}) => {\n const refExternal = useRef<HTMLDivElement>(null);\n const refInternal = useRef<HTMLDivElement>(null);\n const [externalStyle, setExternalStyle] = useState<Record<string, string>>();\n\n function updateStyle(): void {\n const rect = (refInternal.current as HTMLDivElement).getBoundingClientRect();\n setExternalStyle({\n '--timeout': `${timeout}ms`,\n '--width': `${rect.width}px`,\n '--height': `${rect.height}px`,\n });\n }\n useEffect(updateStyle, [timeout]);\n\n return (\n <CSSTransition\n {...rest}\n timeout={timeout}\n classNames={className}\n onEnter={updateStyle}\n onExit={updateStyle}\n nodeRef={refExternal}\n >\n <div\n ref={refExternal}\n className={externalClassName ? `${className} ${externalClassName}` : className}\n style={externalStyle}\n >\n <div\n ref={refInternal}\n className={internalClassName}\n >\n {children}\n </div>\n </div>\n </CSSTransition>\n );\n};\n\ntype ExpandVariants = 'expand' | 'collapse';\n\nconst collapseCss = css`\n transition: height var(--timeout) linear, opacity var(--timeout) linear;\n\n &-enter {\n opacity: 0;\n height: 0;\n }\n\n &-enter-active {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit-active {\n opacity: 0;\n height: 0;\n }\n`;\n\nconst enterExpandCss = css`\n position: relative;\n width: 1px;\n height: 1px;\n\n & > * {\n position: absolute;\n top: calc(var(--height) / -2);\n left: calc(var(--width) / -2);\n }\n`;\n\nconst exitExpandCss = css`\n position: relative;\n width: var(--width);\n height: var(--height);\n\n & > * {\n position: absolute;\n top: 0;\n left: 0;\n }\n`;\n\nconst expandCss = css`\n transition: all var(--timeout) ease-out;\n\n & > * {\n transition: all var(--timeout) ease-out;\n }\n\n &-enter { ${enterExpandCss} }\n\n &-enter-active, &-exit { ${exitExpandCss} }\n\n &-exit-active { ${enterExpandCss} }\n`;\n\nconst ExpandTransition = styled(ExpandTransitionComp)<{ variant: ExpandVariants }>`\n overflow: hidden;\n ${({ variant }) => (variant === 'expand' ? expandCss : collapseCss)}\n`;\n\ntype ExpandProps = {\n variant: ExpandVariants;\n expanded: boolean;\n timeout?: number;\n externalClassName?: string;\n internalClassName?: string;\n};\nexport const Expand: FC<ExpandProps> = ({\n expanded,\n children,\n ...rest\n}) => (\n <TransitionGroup component={null}>\n {expanded && (\n <ExpandTransition\n {...rest}\n key={0}\n >\n {typeof children === 'function' ? children() : children}\n </ExpandTransition>\n )}\n </TransitionGroup>\n);\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"tslib\"","webpack:///external \"react\"","webpack:///external \"styled-components\"","webpack:///external \"react-transition-group\"","webpack:///./src/grid.tsx","webpack:///./src/hooks.ts","webpack:///./src/expand.tsx"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","require","isNumber","GridContainer","styled","div","_a","gap","columns","padding","margin","justify","Horizontal","Vertical","usePersistentFunction","callback","ref","useRef","current","useCallback","_i","args","elementAddListener","element","eventNames","listener","eventNamesArray","Array","isArray","forEach","eventName","addEventListener","removeEventListener","subscribeClickAway","document","event","contains","target","useClickAway","use","cb","mcb","useEffect","collapseCss","css","enterExpandCss","exitExpandCss","expandCss","ExpandTransition","className","externalClassName","internalClassName","_b","timeout","children","rest","refExternal","refInternal","useState","externalStyle","setExternalStyle","updateStyle","rect","getBoundingClientRect","width","height","React","CSSTransition","classNames","onEnter","onExit","nodeRef","style","Expand","expanded","TransitionGroup","component"],"mappings":"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","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 4);\n","module.exports = require(\"tslib\");","module.exports = require(\"react\");","module.exports = require(\"styled-components\");","module.exports = require(\"react-transition-group\");","import styled from 'styled-components';\n\nconst isNumber = (value: unknown): value is number => typeof value === 'number';\n\nexport const GridContainer = styled.div<{\n gap?: number | string;\n columns?: number | string;\n padding?: number | string;\n margin?: number | string;\n justify?: 'center' | 'start' | 'end' | 'space-between';\n}>`\n display: grid;\n ${({ gap }): any => gap && `grid-gap: ${isNumber(gap) ? `${gap}px` : gap};`}\n ${({ columns }): any => columns && `grid-template-columns: ${isNumber(columns) ? `repeat(${columns}, 1fr)` : columns};`}\n ${({ padding }): any => padding && `padding: ${isNumber(padding) ? `${padding}px` : padding};`}\n ${({ margin }): any => margin && `margin: ${isNumber(margin) ? `${margin}px` : margin};`}\n ${({ justify }): any => justify && `justify-content: ${justify};`}\n`;\n\nexport const Horizontal = styled(GridContainer)`\n grid-auto-flow: column;\n`;\n\nexport const Vertical = styled(GridContainer)`\n grid-auto-flow: row;\n`;\n","import { useRef, useCallback, useEffect } from 'react';\n\nexport function usePersistentFunction<T extends (...args: any[]) => any>(callback: T): T {\n const ref = useRef(callback);\n ref.current = callback;\n return useCallback((...args: any) => ref.current(...args), []) as T;\n}\n\nexport function elementAddListener<K extends keyof HTMLElementEventMap, E extends HTMLElement>(\n element: E,\n eventNames: K | K[],\n listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void,\n): () => void {\n const eventNamesArray = Array.isArray(eventNames) ? eventNames : [eventNames];\n eventNamesArray.forEach((eventName) => {\n element.addEventListener(eventName, listener);\n });\n return (): void => {\n eventNamesArray.forEach((eventName) => {\n element.removeEventListener(eventName, listener);\n });\n };\n}\n\nexport function subscribeClickAway<T extends HTMLElement>(element: T, callback: EventListener): () => void {\n return elementAddListener(document as any, ['mousedown', 'touchstart'], (event) => {\n if (element && !element.contains(event.target as any)) {\n callback(event);\n }\n });\n}\n\nexport function useClickAway(use: boolean, ref: any, cb: EventListener): void {\n const mcb = usePersistentFunction(cb);\n\n useEffect(() => { // eslint-disable-line consistent-return\n if (use) {\n return subscribeClickAway(ref.current, mcb) as any;\n }\n }, [use, ref, mcb]);\n}\n","/* eslint-disable react/require-default-props, react/jsx-no-bind */\n\nimport React, {\n FC, useEffect, useRef, useState,\n} from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport styled, { css } from 'styled-components';\n\ntype ExpandTransitionProps = {\n className?: string;\n timeout?: number;\n externalClassName?: string;\n internalClassName?: string;\n};\nconst ExpandTransitionComp: FC<ExpandTransitionProps> = ({\n className,\n externalClassName,\n internalClassName,\n timeout = 100,\n children,\n ...rest\n}) => {\n const refExternal = useRef<HTMLDivElement>(null);\n const refInternal = useRef<HTMLDivElement>(null);\n const [externalStyle, setExternalStyle] = useState<Record<string, string>>();\n\n function updateStyle(): void {\n const rect = (refInternal.current as HTMLDivElement).getBoundingClientRect();\n setExternalStyle({\n '--timeout': `${timeout}ms`,\n '--width': `${rect.width}px`,\n '--height': `${rect.height}px`,\n });\n }\n useEffect(updateStyle, [timeout]);\n\n return (\n <CSSTransition\n {...rest}\n timeout={timeout}\n classNames={className}\n onEnter={updateStyle}\n onExit={updateStyle}\n nodeRef={refExternal}\n >\n <div\n ref={refExternal}\n className={externalClassName ? `${className} ${externalClassName}` : className}\n style={externalStyle}\n >\n <div\n ref={refInternal}\n className={internalClassName}\n >\n {children}\n </div>\n </div>\n </CSSTransition>\n );\n};\n\ntype ExpandVariants = 'expand' | 'collapse';\n\nconst collapseCss = css`\n transition: height var(--timeout) linear, opacity var(--timeout) linear;\n\n &-enter {\n opacity: 0;\n height: 0;\n }\n\n &-enter-active {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit {\n opacity: 1;\n height: var(--height);\n }\n\n &-exit-active {\n opacity: 0;\n height: 0;\n }\n`;\n\nconst enterExpandCss = css`\n position: relative;\n width: 1px;\n height: 1px;\n\n & > * {\n position: absolute;\n top: calc(var(--height) / -2);\n left: calc(var(--width) / -2);\n }\n`;\n\nconst exitExpandCss = css`\n position: relative;\n width: var(--width);\n height: var(--height);\n\n & > * {\n position: absolute;\n top: 0;\n left: 0;\n }\n`;\n\nconst expandCss = css`\n transition: all var(--timeout) ease-out;\n\n & > * {\n transition: all var(--timeout) ease-out;\n }\n\n &-enter { ${enterExpandCss} }\n\n &-enter-active, &-exit { ${exitExpandCss} }\n\n &-exit-active { ${enterExpandCss} }\n`;\n\nconst ExpandTransition = styled(ExpandTransitionComp)<{ variant: ExpandVariants }>`\n overflow: hidden;\n ${({ variant }) => (variant === 'expand' ? expandCss : collapseCss)}\n`;\n\ntype ExpandProps = {\n variant: ExpandVariants;\n expanded: boolean;\n timeout?: number;\n externalClassName?: string;\n internalClassName?: string;\n};\nexport const Expand: FC<ExpandProps> = ({\n expanded,\n children,\n ...rest\n}) => (\n <TransitionGroup component={null}>\n {expanded && (\n <ExpandTransition\n {...rest}\n key={0}\n >\n {typeof children === 'function' ? children() : children}\n </ExpandTransition>\n )}\n </TransitionGroup>\n);\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/kit-helpers",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "React component for build Pushwoosh products",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",