@entur/layout 3.6.1 → 3.7.1

package/dist/beta/esm/LayoutWrapper/useResponsiveValue.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResponsiveValue.mjs","sources":["../../../../src/beta/LayoutWrapper/useResponsiveValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useLayoutValues } from './useLayoutValues';\nimport type { ResponsiveValue } from './utils';\n\nconst isResponsiveObject = <T>(\n  value: ResponsiveValue<T>,\n): value is { sm?: T; md?: T; lg?: T } => {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !Array.isArray(value) &&\n    ('sm' in value || 'md' in value || 'lg' in value)\n  );\n};\n\nconst getCurrentBreakpoint = (\n  breakpoints: { sm: number; md: number; lg: number },\n  windowWidth: number,\n): 'sm' | 'md' | 'lg' => {\n  if (windowWidth >= breakpoints.lg) {\n    return 'lg';\n  }\n  if (windowWidth >= breakpoints.md) {\n    return 'md';\n  }\n  return 'sm';\n};\n\nexport const useResponsiveValue = <T>(\n  value: ResponsiveValue<T> | undefined,\n): T | undefined => {\n  const { breakpoints } = useLayoutValues();\n  const [currentBreakpoint, setCurrentBreakpoint] = useState<\n    'sm' | 'md' | 'lg'\n  >(() => {\n    if (typeof window === 'undefined') {\n      return 'sm';\n    }\n    return getCurrentBreakpoint(breakpoints, window.innerWidth);\n  });\n\n  useEffect(() => {\n    if (\n      typeof window === 'undefined' ||\n      typeof window.matchMedia !== 'function'\n    ) {\n      return;\n    }\n\n    const updateBreakpoint = () => {\n      setCurrentBreakpoint(\n        getCurrentBreakpoint(breakpoints, window.innerWidth),\n      );\n    };\n\n    const mediaQueries = [\n      window.matchMedia(`(min-width: ${breakpoints.md}px)`),\n      window.matchMedia(`(min-width: ${breakpoints.lg}px)`),\n    ];\n\n    updateBreakpoint();\n\n    const handleChange = () => {\n      updateBreakpoint();\n    };\n\n    mediaQueries.forEach(mq => {\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleChange);\n      } else {\n        mq.addListener(handleChange);\n      }\n    });\n\n    return () => {\n      mediaQueries.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleChange);\n        } else {\n          mq.removeListener(handleChange);\n        }\n      });\n    };\n  }, [breakpoints]);\n\n  if (!value) {\n    return undefined;\n  }\n\n  if (!isResponsiveObject(value)) {\n    return value;\n  }\n\n  const responsiveValue = value[currentBreakpoint];\n  if (responsiveValue !== undefined) {\n    return responsiveValue;\n  }\n\n  const fallbackOrder: Array<'lg' | 'md' | 'sm'> =\n    currentBreakpoint === 'lg'\n      ? ['lg', 'md', 'sm']\n      : currentBreakpoint === 'md'\n      ? ['md', 'sm']\n      : ['sm'];\n\n  for (const bp of fallbackOrder) {\n    if (value[bp] !== undefined) {\n      return value[bp];\n    }\n  }\n\n  return undefined;\n};\n"],"names":[],"mappings":";;AAIA,MAAM,qBAAqB,CACzB,UACwC;AACxC,SACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,MACnB,QAAQ,SAAS,QAAQ,SAAS,QAAQ;AAE/C;AAEA,MAAM,uBAAuB,CAC3B,aACA,gBACuB;AACvB,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,qBAAqB,CAChC,UACkB;AAClB,QAAM,EAAE,YAAA,IAAgB,gBAAA;AACxB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAEhD,MAAM;AACN,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,WAAO,qBAAqB,aAAa,OAAO,UAAU;AAAA,EAC5D,CAAC;AAED,YAAU,MAAM;AACd,QACE,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,YAC7B;AACA;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAM;AAC7B;AAAA,QACE,qBAAqB,aAAa,OAAO,UAAU;AAAA,MAAA;AAAA,IAEvD;AAEA,UAAM,eAAe;AAAA,MACnB,OAAO,WAAW,eAAe,YAAY,EAAE,KAAK;AAAA,MACpD,OAAO,WAAW,eAAe,YAAY,EAAE,KAAK;AAAA,IAAA;AAGtD,qBAAA;AAEA,UAAM,eAAe,MAAM;AACzB,uBAAA;AAAA,IACF;AAEA,iBAAa,QAAQ,CAAA,OAAM;AACzB,UAAI,GAAG,kBAAkB;AACvB,WAAG,iBAAiB,UAAU,YAAY;AAAA,MAC5C,OAAO;AACL,WAAG,YAAY,YAAY;AAAA,MAC7B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,mBAAa,QAAQ,CAAA,OAAM;AACzB,YAAI,GAAG,qBAAqB;AAC1B,aAAG,oBAAoB,UAAU,YAAY;AAAA,QAC/C,OAAO;AACL,aAAG,eAAe,YAAY;AAAA,QAChC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,mBAAmB,KAAK,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM,iBAAiB;AAC/C,MAAI,oBAAoB,QAAW;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,gBACJ,sBAAsB,OAClB,CAAC,MAAM,MAAM,IAAI,IACjB,sBAAsB,OACtB,CAAC,MAAM,IAAI,IACX,CAAC,IAAI;AAEX,aAAW,MAAM,eAAe;AAC9B,QAAI,MAAM,EAAE,MAAM,QAAW;AAC3B,aAAO,MAAM,EAAE;AAAA,IACjB;AAAA,EACF;AAEA,SAAO;AACT;"}

package/dist/beta/esm/LayoutWrapper/utils.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.mjs","sources":["../../../../src/beta/LayoutWrapper/utils.ts"],"sourcesContent":["const VALID_SPACING_VALUES = [\n  '2xs',\n  'xs',\n  's',\n  's-m',\n  'm',\n  'm-l',\n  'l',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n  '5xl',\n  '6xl',\n  '7xl',\n  '8xl',\n  '9xl',\n  '10xl',\n  '11xl',\n  'none',\n] as const;\n\nexport type GridSpacingValue = (typeof VALID_SPACING_VALUES)[number];\n\nexport type ResponsiveValue<T> =\n  | T\n  | {\n      sm?: T;\n      md?: T;\n      lg?: T;\n    };\n\nexport type Breakpoints = {\n  sm: number;\n  md: number;\n  lg: number;\n};\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n  sm: 0,\n  md: 800,\n  lg: 1200,\n};\n\nconst isValidSpacingValue = (value: unknown): value is GridSpacingValue => {\n  return (\n    typeof value === 'string' &&\n    VALID_SPACING_VALUES.includes(value as GridSpacingValue)\n  );\n};\n\nexport const getSpacingValue = (\n  spacing: GridSpacingValue | undefined,\n  componentName = 'Grid',\n): string | undefined => {\n  if (!spacing) return undefined;\n  if (spacing === 'none') return '0';\n\n  if (!isValidSpacingValue(spacing)) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        `Invalid ${componentName} spacing value: \"${spacing}\". Valid values are: ${VALID_SPACING_VALUES.join(\n          ', ',\n        )}. Falling back to undefined.`,\n      );\n    }\n    return undefined;\n  }\n\n  return `var(--${spacing})`;\n};\n"],"names":[],"mappings":"AAAA,MAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAkBO,MAAM,sBAAmC;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,sBAAsB,CAAC,UAA8C;AACzE,SACE,OAAO,UAAU,YACjB,qBAAqB,SAAS,KAAyB;AAE3D;AAEO,MAAM,kBAAkB,CAC7B,SACA,gBAAgB,WACO;AACvB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,OAAQ,QAAO;AAE/B,MAAI,CAAC,oBAAoB,OAAO,GAAG;AACjC,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,cAAQ;AAAA,QACN,WAAW,aAAa,oBAAoB,OAAO,wBAAwB,qBAAqB;AAAA,UAC9F;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IAEL;AACA,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,OAAO;AACzB;"}

package/dist/beta/types/LayoutWrapper/LayoutWrapper.d.ts

@@ -1,13 +0,0 @@
-import { default as React } from 'react';
-import { Breakpoints } from './utils';
-export type LayoutValues = {
-    breakpoints: Breakpoints;
-};
-export type LayoutWrapperProps = {
-    /** Custom breakpoint values to override defaults */
-    breakpoints?: Partial<Breakpoints>;
-    /** Children components that can use layout values */
-    children: React.ReactNode;
-};
-export declare const LayoutWrapper: ({ breakpoints: customBreakpoints, children, }: LayoutWrapperProps) => JSX.Element;
-export declare const useLayoutContext: () => LayoutValues | null;