@foxford/ui 2.26.1 → 2.26.2

package/components/Skeleton/Skeleton.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r,isValidElement as t,cloneElement as l}from'react';import{usePalette as o}from'../../hooks/usePalette.js';import{Root as s}from'./style.js';import{jsx as a,Fragment as i}from'react/jsx-runtime';var n=r(((r,n)=>{var c=o(r);return a(s,e(e({},r),{},{palette:c,ref:n,children:r.children?t(r.children)&&'object'==typeof r.children.props&&null!==r.children.props&&!r.children.props.children?l(r.children,{},a(i,{children:" "})):r.children:a(i,{children:" "})}))}));export{n as Skeleton};
+import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r,isValidElement as t,cloneElement as l}from'react';import{useMergedPalette as o}from'../../hooks/useMergedPalette.js';import{Root as s}from'./style.js';import{jsx as a,Fragment as i}from'react/jsx-runtime';var n=r(((r,n)=>{var c=o(r);return a(s,e(e({},r),{},{palette:c,ref:n,children:r.children?t(r.children)&&'object'==typeof r.children.props&&null!==r.children.props&&!r.children.props.children?l(r.children,{},a(i,{children:" "})):r.children:a(i,{children:" "})}))}));export{n as Skeleton};
 //# sourceMappingURL=Skeleton.js.map

package/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef, isValidElement, cloneElement } from 'react'\nimport { usePalette } from 'hooks/usePalette'\nimport * as Styled from './style'\nimport type { SkeletonProps } from './types'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)\n */\nconst Skeleton: React.ForwardRefExoticComponent<SkeletonProps> = forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, ref) => {\n    const palette = usePalette(props)\n\n    return (\n      <Styled.Root {...props} palette={palette} ref={ref}>\n        {!props.children ? (\n          <>&nbsp;</>\n        ) : isValidElement(props.children) &&\n          typeof props.children.props === 'object' &&\n          props.children.props !== null &&\n          !props.children.props.children ? (\n          cloneElement(props.children, {}, <>&nbsp;</>)\n        ) : (\n          props.children\n        )}\n      </Styled.Root>\n    )\n  }\n)\n\nexport { Skeleton }\n"],"names":["Skeleton","forwardRef","props","ref","palette","usePalette","_jsx","Styled.Root","children","isValidElement","cloneElement","_Fragment"],"mappings":"4QAeMA,IAAAA,EAA2DC,GAC/D,CAACC,EAAOC,KACN,IAAMC,EAAUC,EAAWH,GAE3B,OACEI,EAACC,SAAgBL,GAAjB,GAAA,CAAwBE,QAASA,EAASD,IAAKA,EAA/CK,SACIN,EAAMM,SAEJC,EAAeP,EAAMM,WACS,iBAAzBN,EAAMM,SAASN,OACG,OAAzBA,EAAMM,SAASN,QACdA,EAAMM,SAASN,MAAMM,SACtBE,EAAaR,EAAMM,SAAU,GAAIF,EAAAK,EAAA,CAAAH,SAAA,OAEjCN,EAAMM,SAPNF,EAAAK,EAAA,CAAAH,SAAA"}
+{"version":3,"file":"Skeleton.js","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef, isValidElement, cloneElement } from 'react'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\nimport * as Styled from './style'\nimport type { SkeletonProps } from './types'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)\n */\nconst Skeleton: React.ForwardRefExoticComponent<SkeletonProps> = forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, ref) => {\n    const palette = useMergedPalette(props)\n\n    return (\n      <Styled.Root {...props} palette={palette} ref={ref}>\n        {!props.children ? (\n          <>&nbsp;</>\n        ) : isValidElement(props.children) &&\n          typeof props.children.props === 'object' &&\n          props.children.props !== null &&\n          !props.children.props.children ? (\n          cloneElement(props.children, {}, <>&nbsp;</>)\n        ) : (\n          props.children\n        )}\n      </Styled.Root>\n    )\n  }\n)\n\nexport { Skeleton }\n"],"names":["Skeleton","forwardRef","props","ref","palette","useMergedPalette","_jsx","Styled.Root","children","isValidElement","cloneElement","_Fragment"],"mappings":"wRAeMA,IAAAA,EAA2DC,GAC/D,CAACC,EAAOC,KACN,IAAMC,EAAUC,EAAiBH,GAEjC,OACEI,EAACC,SAAgBL,GAAjB,GAAA,CAAwBE,QAASA,EAASD,IAAKA,EAA/CK,SACIN,EAAMM,SAEJC,EAAeP,EAAMM,WACS,iBAAzBN,EAAMM,SAASN,OACG,OAAzBA,EAAMM,SAASN,QACdA,EAAMM,SAASN,MAAMM,SACtBE,EAAaR,EAAMM,SAAU,GAAIF,EAAAK,EAAA,CAAAH,SAAA,OAEjCN,EAAMM,SAPNF,EAAAK,EAAA,CAAAH,SAAA"}

package/hocs/withMergedProps.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{useTheme as a}from'styled-components';import{mergeDeepLeft as t}from'ramda';import{jsx as s}from'react/jsx-runtime';var o=(o,i)=>{var p=r(((r,p)=>{var l,m,n;var v=a();var d=t(r,null!==(l=null===(m=v.components)||void 0===m?void 0:m[i.displayName])&&void 0!==l?l:{});var u=null!==(n=d.preset)&&void 0!==n?n:v.preset;var c='function'==typeof i.sizes?i.sizes(e(e({},d),{},{preset:u})):i.sizes;var f=d.sizes?t(d.sizes,c):c;var y=d.palette?function(e,r){var a=arguments.length>0&&void 0!==e?e:{};var t=arguments.length>1?r:void 0;return Object.keys(a).reduce(((e,r)=>{var s;var o=a[r];return e[r]=null!==(s=t.colors[o])&&void 0!==s?s:o,e}),{})}(d.palette,v):{};return o.displayName=i.displayName,s(o,e(e({},d),{},{preset:u,sizes:f,palette:y,ref:p}))}));return p.displayName="WithMergedProps".concat(i.displayName),p};export{o as withMergedProps};
+import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{useMergedProps as s}from'../hooks/useMergedProps.js';import{useMergedSizes as a}from'../hooks/useMergedSizes.js';import{useMergedPalette as o}from'../hooks/useMergedPalette.js';import{jsx as t}from'react/jsx-runtime';function i(i,m){var p=r(((r,p)=>{var d=s(r,m.displayName);var u=a(d,m.sizes);var f=o(d);return i.displayName=m.displayName,t(i,e(e({},d),{},{sizes:u,palette:f,ref:p}))}));return p.displayName="WithMergedProps".concat(m.displayName),p}export{i as withMergedProps};
 //# sourceMappingURL=withMergedProps.js.map

package/hocs/withMergedProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { DefaultTheme } from 'styled-components'\nimport type { ResponsiveSizeProps } from 'mixins/responsive-size'\nimport type { CSSColor, Sizes, Color, ThemePreset, ColorPaletteKey } from 'shared/types'\n\nconst injectThemeColors = (\n  colors: Partial<Record<ColorPaletteKey, Color>> = {},\n  theme: DefaultTheme\n): Partial<Record<ColorPaletteKey, CSSColor>> =>\n  Object.keys(colors).reduce((resultColors, colorKey) => {\n    const color = colors[colorKey]\n    resultColors[colorKey] = theme.colors[color] ?? color\n    return resultColors\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n\nexport const withMergedProps = <\n  T extends ResponsiveSizeProps & {\n    preset?: ThemePreset\n    palette?: Partial<Record<ColorPaletteKey, Color>>\n  },\n  P extends HTMLElement = HTMLElement\n>(\n  Component: React.FC<\n    Omit<T, 'sizes' | 'preset' | 'palette'> & {\n      sizes: Sizes\n      preset: ThemePreset\n      palette: Partial<Record<ColorPaletteKey, CSSColor>>\n    } & React.RefAttributes<P>\n  >,\n  options: {\n    displayName: string\n    sizes: Sizes | ((props: Omit<T, 'sizes' | 'preset'> & { preset: ThemePreset }) => Sizes)\n  }\n) => {\n  const WithMergedProps = forwardRef<P, T>((props, ref) => {\n    const theme = useTheme()\n\n    const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n    const preset = forwardProps.preset ?? theme.preset\n    const componentSizes =\n      typeof options.sizes === 'function' ? options.sizes({ ...forwardProps, preset }) : options.sizes\n    const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, componentSizes) : componentSizes) as Sizes\n    const palette = forwardProps.palette ? injectThemeColors(forwardProps.palette, theme) : {}\n\n    Component.displayName = options.displayName\n\n    return <Component {...forwardProps} preset={preset} sizes={sizes} palette={palette} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n  return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","componentSizes","sizes","palette","e","r","colors","arguments","length","undefined","Object","keys","reduce","resultColors","colorKey","_theme$colors$color","color","_jsx","_objectSpread"],"mappings":"sNAiBaA,EAAkB,CAO7BC,EAOAC,KAKA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAd,IAAAN,SAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EACqB,mBAAlBf,EAAQgB,MAAuBhB,EAAQgB,aAAWN,GAAnB,GAAA,CAAiCI,OAAAA,KAAYd,EAAQgB,MAC7F,IAAMA,EAASN,EAAaM,MAAQL,EAAcD,EAAaM,MAAOD,GAAkBA,EACxF,IAAME,EAAUP,EAAaO,QArCP,SAAAC,EAAAC,GAAA,IACxBC,+BADwBF,EAAAA,EAC0B,GAD1B,IAExBV,EAFwBa,UAAAC,OAAA,EAAAH,OAAAI,EAAA,OAIxBC,OAAOC,KAAKL,GAAQM,QAAO,CAACC,EAAcC,KAAa,IAAAC,EACrD,IAAMC,EAAQV,EAAOQ,GAErB,OADAD,EAAaC,GAAb,QAAyBpB,EAAAA,EAAMY,OAAOU,UAAAA,IAAtCD,EAAAA,EAAgDC,EACzCH,IACN,IARqB,CAqCmCjB,EAAaO,QAAST,GAAS,GAIxF,OAFAT,EAAUc,YAAcb,EAAQa,YAEzBkB,EAAChC,EAADiC,EAAAA,EAAA,GAAetB,GAAf,GAAA,CAA6BI,OAAQA,EAAQE,MAAOA,EAAOC,QAASA,EAASb,IAAKA,QAI3F,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}
+{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ThemePreset, Sizes, Color, CSSColor, ColorPaletteKey } from 'shared/types'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { useMergedSizes } from 'hooks/useMergedSizes'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\n\ntype WrappedComponentProps = {\n  preset?: ThemePreset\n  sizes?: Partial<Sizes>\n  palette?: Partial<Record<ColorPaletteKey, Color>>\n}\n\ntype MergedProps<T> = Omit<T, 'preset' | 'sizes' | 'palette'> & {\n  preset: ThemePreset\n  sizes: Sizes\n  palette: Partial<Record<ColorPaletteKey, CSSColor>>\n}\n\ntype WithMergedPropsOptions<T> = {\n  displayName: string\n  sizes?: Sizes | ((props: T) => Sizes)\n}\n\nfunction withMergedProps<T extends WrappedComponentProps, R extends HTMLElement = HTMLElement>(\n  WrappedComponent: React.FC<MergedProps<T>>,\n  options: WithMergedPropsOptions<Omit<T, 'sizes'> & { preset: ThemePreset }>\n) {\n  const WithMergedProps = forwardRef<R, T>((wrappedComponentProps, ref) => {\n    const props = useMergedProps(wrappedComponentProps, options.displayName)\n    const sizes = useMergedSizes(props, options.sizes)\n    const palette = useMergedPalette(props)\n\n    WrappedComponent.displayName = options.displayName\n\n    return <WrappedComponent {...props} sizes={sizes} palette={palette} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n\n  return WithMergedProps\n}\n\nexport { withMergedProps }\n"],"names":["withMergedProps","WrappedComponent","options","WithMergedProps","forwardRef","wrappedComponentProps","ref","props","useMergedProps","displayName","sizes","useMergedSizes","palette","useMergedPalette","_jsx","_objectSpread"],"mappings":"uTAuBA,SAASA,EACPC,EACAC,GAEA,IAAMC,EAAkBC,GAAAA,CAAkBC,EAAuBC,KAC/D,IAAMC,EAAQC,EAAeH,EAAuBH,EAAQO,aAC5D,IAAMC,EAAQC,EAAeJ,EAAOL,EAAQQ,OAC5C,IAAME,EAAUC,EAAiBN,GAIjC,OAFAN,EAAiBQ,YAAcP,EAAQO,YAEhCK,EAACb,EAADc,EAAAA,EAAA,GAAsBR,GAAtB,GAAA,CAA6BG,MAAOA,EAAOE,QAASA,EAASN,IAAKA,QAK3E,OAFAH,EAAgBM,YAAgCP,kBAAAA,OAAAA,EAAQO,aAEjDN"}

package/hooks/useMergedPalette.js

@@ -0,0 +1,2 @@
+import{useTheme as e}from'styled-components';function r(r){var t;var o=e();var a=null!==(t=r.palette)&&void 0!==t?t:{};return Object.keys(a).reduce(((e,r)=>{var t;return e[r]=null!==(t=o.colors[a[r]])&&void 0!==t?t:a[r],e}),{})}export{r as useMergedPalette};
+//# sourceMappingURL=useMergedPalette.js.map

package/hooks/useMergedPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedPalette.js","sources":["../../../src/hooks/useMergedPalette.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { ColorPaletteKey, Color, CSSColor } from 'shared/types'\n\nexport function useMergedPalette<\n  T extends {\n    palette?: Partial<Record<ColorPaletteKey, Color>>\n  }\n>(componentProps: T): Record<ColorPaletteKey, CSSColor> {\n  const theme = useTheme()\n\n  const palette = componentProps.palette ?? {}\n\n  return Object.keys(palette).reduce((injected, key) => {\n    injected[key] = theme.colors[palette[key]] ?? palette[key]\n    return injected\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n}\n"],"names":["useMergedPalette","componentProps","_componentProps$palet","theme","useTheme","palette","Object","keys","reduce","injected","key","_theme$colors$palette","colors"],"mappings":"6CAGO,SAASA,EAIdC,GAAsD,IAAAC,EACtD,IAAMC,EAAQC,IAEd,IAAMC,UAAUJ,EAAAA,EAAeI,uBAAW,GAE1C,OAAOC,OAAOC,KAAKF,GAASG,QAAO,CAACC,EAAUC,KAAQ,IAAAC,EAEpD,OADAF,EAASC,WAAOP,EAAAA,EAAMS,OAAOP,EAAQK,mBAASL,EAAQK,GAC/CD,IACN"}

package/hooks/useMergedProps.js

@@ -0,0 +1,2 @@
+import e from'@babel/runtime/helpers/objectSpread2';import{useTheme as r}from'styled-components';import{mergeDeepLeft as o}from'ramda';function t(t,p){var s,m,a;var n=r();var l=null!==(m=(null!==(s=n.components)&&void 0!==s?s:{})[p])&&void 0!==m?m:{};var i=o(t,l);return e(e({},i),{},{preset:null!==(a=i.preset)&&void 0!==a?a:n.preset})}export{t as useMergedProps};
+//# sourceMappingURL=useMergedProps.js.map

package/hooks/useMergedProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedProps.js","sources":["../../../src/hooks/useMergedProps.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { ThemePreset } from 'shared/types'\n\nexport function useMergedProps<\n  T extends {\n    preset?: ThemePreset\n  }\n>(\n  componentProps: T,\n  componentName: string\n): T & {\n  preset: ThemePreset\n} {\n  const theme = useTheme()\n\n  const context = theme.components ?? {}\n  const contextProps: T = context[componentName] ?? {}\n  const mergedProps = mergeDeepLeft(componentProps, contextProps) as T\n\n  return {\n    ...mergedProps,\n    preset: mergedProps.preset ?? theme.preset,\n  }\n}\n"],"names":["useMergedProps","componentProps","componentName","_theme$components","_context$componentNam","_mergedProps$preset","theme","useTheme","contextProps","context","components","mergedProps","mergeDeepLeft","_objectSpread","preset"],"mappings":"uIAIO,SAASA,EAKdC,EACAC,GAGA,IAAAC,EAAAC,EAAAC,EACA,IAAMC,EAAQC,IAGd,IAAMC,UAAkBC,WADRH,EAAAA,EAAMI,0BAAc,IACJR,kBAAkB,GAClD,IAAMS,EAAcC,EAAcX,EAAgBO,GAElD,OAAAK,EAAAA,EAAA,GACKF,GADL,GAAA,CAEEG,OAAM,UAAEH,EAAYG,cAAAA,IAAdT,EAAAA,EAAwBC,EAAMQ"}

package/hooks/useMergedSizes.js

@@ -0,0 +1,2 @@
+import{mergeDeepLeft as e}from'ramda';var r={xxxl:{},xxl:{},xl:{},l:{},m:{},s:{},xs:{},xxs:{},xxxs:{}};function x(x,s){var a;var o=arguments.length>1&&void 0!==s?s:r;var t='function'==typeof o?o(x):o;var i=null!==(a=x.sizes)&&void 0!==a?a:{};return e(i,t)}export{x as useMergedSizes};
+//# sourceMappingURL=useMergedSizes.js.map

package/hooks/useMergedSizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedSizes.js","sources":["../../../src/hooks/useMergedSizes.ts"],"sourcesContent":["import { mergeDeepLeft } from 'ramda'\nimport type { Sizes } from 'shared/types'\n\nconst SIZES_EMPTY: Sizes = { xxxl: {}, xxl: {}, xl: {}, l: {}, m: {}, s: {}, xs: {}, xxs: {}, xxxs: {} }\n\nexport function useMergedSizes<\n  T extends {\n    sizes?: Partial<Sizes>\n  }\n>(componentProps: T, componentSizes: Sizes | ((props: T) => Sizes) = SIZES_EMPTY): Sizes {\n  const sizesDefault = typeof componentSizes === 'function' ? componentSizes(componentProps) : componentSizes\n  const sizesProp = componentProps.sizes ?? {}\n\n  return mergeDeepLeft(sizesProp, sizesDefault) as Sizes\n}\n"],"names":["SIZES_EMPTY","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs","useMergedSizes","componentProps","a","_componentProps$sizes","componentSizes","sizesDefault","sizesProp","sizes","mergeDeepLeft"],"mappings":"sCAGA,IAAMA,EAAqB,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAE7F,SAASC,EAIdC,EAJKC,GAIkF,IAAAC,EAAA,IAApEC,+BAJdF,EAAAA,EAI8DZ,EACnE,IAAMe,EAAyC,mBAAnBD,EAAgCA,EAAeH,GAAkBG,EAC7F,IAAME,UAAYL,EAAAA,EAAeM,qBAAS,GAE1C,OAAOC,EAAcF,EAAWD"}