@makeswift/runtime 0.23.5 → 0.23.6-canary.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/dist/cjs/components/builtin/Box/register.js +3 -3
- package/dist/cjs/components/builtin/Box/register.js.map +1 -1
- package/dist/cjs/components/builtin/Button/register.js +2 -2
- package/dist/cjs/components/builtin/Button/register.js.map +1 -1
- package/dist/cjs/components/builtin/Carousel/Carousel.js +2 -2
- package/dist/cjs/components/builtin/Carousel/Carousel.js.map +1 -1
- package/dist/cjs/components/builtin/Carousel/register.js +2 -2
- package/dist/cjs/components/builtin/Carousel/register.js.map +1 -1
- package/dist/cjs/components/builtin/Countdown/register.js +2 -2
- package/dist/cjs/components/builtin/Countdown/register.js.map +1 -1
- package/dist/cjs/components/builtin/Form/register.js +4 -4
- package/dist/cjs/components/builtin/Form/register.js.map +1 -1
- package/dist/cjs/components/builtin/Image/Image.js +3 -3
- package/dist/cjs/components/builtin/Image/Image.js.map +1 -1
- package/dist/cjs/components/builtin/Navigation/register.js +4 -4
- package/dist/cjs/components/builtin/Navigation/register.js.map +1 -1
- package/dist/cjs/components/builtin/SocialLinks/register.js +3 -3
- package/dist/cjs/components/builtin/SocialLinks/register.js.map +1 -1
- package/dist/cjs/components/builtin/Text/register.js +3 -3
- package/dist/cjs/components/builtin/Text/register.js.map +1 -1
- package/dist/cjs/components/hooks/useMediaQuery.js +5 -5
- package/dist/cjs/components/hooks/useMediaQuery.js.map +1 -1
- package/dist/cjs/components/utils/responsive-style.js +2 -3
- package/dist/cjs/components/utils/responsive-style.js.map +1 -1
- package/dist/cjs/core/index.js +8 -0
- package/dist/cjs/core/index.js.map +1 -1
- package/dist/cjs/next/api-handler/handlers/manifest.js +1 -1
- package/dist/cjs/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.js +1 -1
- package/dist/cjs/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.js.map +1 -1
- package/dist/cjs/runtimes/react/hooks/use-stylesheet-factory.js +1 -2
- package/dist/cjs/runtimes/react/hooks/use-stylesheet-factory.js.map +1 -1
- package/dist/cjs/slate/BlockPlugin/setBlockKeyForDevice.js +1 -2
- package/dist/cjs/slate/BlockPlugin/setBlockKeyForDevice.js.map +1 -1
- package/dist/cjs/slate/TypographyPlugin/setActiveTypographyStyle.js +2 -2
- package/dist/cjs/slate/TypographyPlugin/setActiveTypographyStyle.js.map +1 -1
- package/dist/cjs/slate/selectors.js +2 -3
- package/dist/cjs/slate/selectors.js.map +1 -1
- package/dist/cjs/state/modules/breakpoints.js +1 -44
- package/dist/cjs/state/modules/breakpoints.js.map +1 -1
- package/dist/esm/components/builtin/Box/register.js +1 -1
- package/dist/esm/components/builtin/Box/register.js.map +1 -1
- package/dist/esm/components/builtin/Button/register.js +1 -1
- package/dist/esm/components/builtin/Button/register.js.map +1 -1
- package/dist/esm/components/builtin/Carousel/Carousel.js +1 -1
- package/dist/esm/components/builtin/Carousel/Carousel.js.map +1 -1
- package/dist/esm/components/builtin/Carousel/register.js +1 -1
- package/dist/esm/components/builtin/Carousel/register.js.map +1 -1
- package/dist/esm/components/builtin/Countdown/register.js +1 -1
- package/dist/esm/components/builtin/Countdown/register.js.map +1 -1
- package/dist/esm/components/builtin/Form/register.js +1 -1
- package/dist/esm/components/builtin/Form/register.js.map +1 -1
- package/dist/esm/components/builtin/Image/Image.js +1 -1
- package/dist/esm/components/builtin/Image/Image.js.map +1 -1
- package/dist/esm/components/builtin/Navigation/register.js +1 -1
- package/dist/esm/components/builtin/Navigation/register.js.map +1 -1
- package/dist/esm/components/builtin/SocialLinks/register.js +1 -1
- package/dist/esm/components/builtin/SocialLinks/register.js.map +1 -1
- package/dist/esm/components/builtin/Text/register.js +1 -1
- package/dist/esm/components/builtin/Text/register.js.map +1 -1
- package/dist/esm/components/hooks/useMediaQuery.js +1 -1
- package/dist/esm/components/hooks/useMediaQuery.js.map +1 -1
- package/dist/esm/components/utils/responsive-style.js +3 -2
- package/dist/esm/components/utils/responsive-style.js.map +1 -1
- package/dist/esm/core/index.js +9 -1
- package/dist/esm/core/index.js.map +1 -1
- package/dist/esm/next/api-handler/handlers/manifest.js +1 -1
- package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.js +2 -2
- package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.js.map +1 -1
- package/dist/esm/runtimes/react/hooks/use-stylesheet-factory.js +2 -2
- package/dist/esm/runtimes/react/hooks/use-stylesheet-factory.js.map +1 -1
- package/dist/esm/slate/BlockPlugin/setBlockKeyForDevice.js +4 -2
- package/dist/esm/slate/BlockPlugin/setBlockKeyForDevice.js.map +1 -1
- package/dist/esm/slate/TypographyPlugin/setActiveTypographyStyle.js +3 -1
- package/dist/esm/slate/TypographyPlugin/setActiveTypographyStyle.js.map +1 -1
- package/dist/esm/slate/selectors.js +4 -2
- package/dist/esm/slate/selectors.js.map +1 -1
- package/dist/esm/state/modules/breakpoints.js +1 -42
- package/dist/esm/state/modules/breakpoints.js.map +1 -1
- package/dist/types/components/builtin/Box/register.d.ts.map +1 -1
- package/dist/types/components/builtin/Button/register.d.ts.map +1 -1
- package/dist/types/components/builtin/Carousel/Carousel.d.ts.map +1 -1
- package/dist/types/components/builtin/Image/Image.d.ts.map +1 -1
- package/dist/types/components/hooks/useMediaQuery.d.ts +1 -1
- package/dist/types/components/hooks/useMediaQuery.d.ts.map +1 -1
- package/dist/types/components/utils/responsive-style.d.ts +1 -1
- package/dist/types/components/utils/responsive-style.d.ts.map +1 -1
- package/dist/types/controls/link.d.ts +1 -1
- package/dist/types/core/index.d.ts +1 -1
- package/dist/types/core/index.d.ts.map +1 -1
- package/dist/types/runtimes/react/hooks/use-stylesheet-factory.d.ts.map +1 -1
- package/dist/types/slate/BlockPlugin/setBlockKeyForDevice.d.ts +1 -1
- package/dist/types/slate/BlockPlugin/setBlockKeyForDevice.d.ts.map +1 -1
- package/dist/types/slate/TypographyPlugin/setActiveTypographyStyle.d.ts +1 -1
- package/dist/types/slate/TypographyPlugin/setActiveTypographyStyle.d.ts.map +1 -1
- package/dist/types/slate/selectors.d.ts +1 -2
- package/dist/types/slate/selectors.d.ts.map +1 -1
- package/dist/types/state/modules/breakpoints.d.ts +2 -7
- package/dist/types/state/modules/breakpoints.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '@makeswift/controls'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n ControlDataTypeKey,\n Checkbox,\n Link,\n ResponsiveColor,\n ResponsiveLength,\n ResponsiveLengthPropControllerDataV1Type,\n checkboxPropControllerDataSchema,\n getCheckboxPropControllerDataBoolean,\n Margin,\n Width,\n TextStyle,\n NavigationLinks,\n NavigationLinksData,\n GapX,\n ResponsiveIconRadioGroup,\n ResponsiveSelect,\n ElementID,\n Image,\n TextInput,\n type PropData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n function isHiddenBasedOnMenuAnimation(props: Record<string, unknown>, deviceId: string): boolean {\n const mobileMenuAnimation = ResponsiveSelect.fromPropData(\n props.mobileMenuAnimation as PropData<typeof ResponsiveSelect> | undefined,\n )\n\n return !findBreakpointOverride(runtime.getBreakpoints(), mobileMenuAnimation, deviceId)\n }\n\n return runtime.registerComponent(\n lazy(() => import('./Navigation')),\n {\n type: MakeswiftComponentType.Navigation,\n label: 'Navigation',\n icon: ComponentIcon.Navigation,\n props: {\n id: ElementID(),\n links: NavigationLinks(),\n linkTextStyle: TextStyle(props => {\n const links = props.links as NavigationLinksData | undefined\n\n return {\n label: 'Link text style',\n hidden: links == null || links.length === 0,\n }\n }),\n showLogo: Checkbox({ preset: true, label: 'Show logo' }),\n logoFile: Image(props => ({\n label: 'Logo',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoWidth: ResponsiveLength(props => ({\n // TODO(miguel): We're manually constructing the data here but should be using a factory\n // function instead. This is because the factory function currently expects a definition\n // but we don't have one to pass here. Perhaps we should make the factory function not\n // require the definition and use the latest version when a definition isn't provided.\n preset: {\n [ControlDataTypeKey]: ResponsiveLengthPropControllerDataV1Type,\n value: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 100, unit: 'px' },\n },\n ],\n },\n label: 'Logo width',\n min: 0,\n max: 1000,\n // TODO: This is hardcoded value, import it from LengthInputOptions\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoAltText: TextInput(props => ({\n label: 'Logo alt text',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n logoLink: Link(props => ({\n label: 'Logo on click',\n hidden:\n getCheckboxPropControllerDataBoolean(\n checkboxPropControllerDataSchema.optional().catch(undefined).parse(props.showLogo),\n ) === false,\n })),\n alignment: ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'Left', value: 'flex-start', icon: 'AlignLeft16' },\n { label: 'Center', value: 'center', icon: 'AlignCenter16' },\n { label: 'End', value: 'flex-end', icon: 'AlignRight16' },\n ],\n defaultValue: 'flex-end',\n }),\n gutter: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Link gap',\n min: 0,\n max: 100,\n step: 1,\n defaultValue: { value: 0, unit: 'px' },\n }),\n mobileMenuAnimation: ResponsiveSelect({\n label: 'Mobile menu',\n options: [\n { value: 'coverRight', label: 'Cover from right' },\n { value: 'coverLeft', label: 'Cover from left' },\n ],\n }),\n mobileMenuOpenIconColor: ResponsiveColor((props, device) => {\n return {\n label: 'Open icon color',\n placeholder: 'rgba(161, 168, 194, 0.5)',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n mobileMenuCloseIconColor: ResponsiveColor((props, device) => {\n return {\n label: 'Close icon color',\n placeholder: 'rgba(161, 168, 194, 0.5)',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n mobileMenuBackgroundColor: ResponsiveColor((props, device) => {\n return {\n label: 'Menu BG color',\n placeholder: 'black',\n hidden: isHiddenBasedOnMenuAnimation(props, device),\n }\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Margin({ format: Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getBaseBreakpoint } from "
|
|
1
|
+
import { getBaseBreakpoint } from "@makeswift/controls";
|
|
2
2
|
import { MakeswiftComponentType } from "../constants";
|
|
3
3
|
import { ComponentIcon } from "../../../state/modules/components-meta";
|
|
4
4
|
import { lazy } from "react";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '@makeswift/controls'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\nimport {\n ElementID,\n GapX,\n Margin,\n ResponsiveColor,\n ResponsiveSelect,\n ResponsiveIconRadioGroup,\n SocialLinks,\n SocialLinksPropControllerData,\n Width,\n getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./SocialLinks')),\n {\n type: MakeswiftComponentType.SocialLinks,\n label: 'Social Links',\n icon: ComponentIcon.SocialLinks,\n props: {\n id: ElementID(),\n links: SocialLinks({\n preset: {\n links: [\n {\n id: 'facebook',\n payload: { type: 'facebook', url: 'https://www.facebook.com' },\n },\n {\n id: 'instagram',\n payload: { type: 'instagram', url: 'https://www.instagram.com' },\n },\n {\n id: 'twitter',\n payload: { type: 'twitter', url: 'https://www.twitter.com' },\n },\n ],\n openInNewTab: false,\n },\n }),\n shape: ResponsiveIconRadioGroup(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData | undefined,\n )\n\n return {\n label: 'Shape',\n options: [\n { label: 'Naked', value: 'naked', icon: 'Star16' },\n { label: 'Circle', value: 'circle', icon: 'StarCircle16' },\n { label: 'Rounded', value: 'rounded', icon: 'StarRoundedSquare16' },\n { label: 'Square', value: 'square', icon: 'StarSquare16' },\n ],\n defaultValue: 'naked',\n hidden: links == null || links.links.length === 0,\n }\n }),\n size: ResponsiveIconRadioGroup(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData | undefined,\n )\n\n return {\n label: 'Size',\n options: [\n { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n ],\n defaultValue: 'medium',\n hidden: links == null || links.links.length === 0,\n }\n }),\n hoverStyle: ResponsiveSelect(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData | undefined,\n )\n const hidden = links == null || links.links.length === 0\n\n return {\n label: 'On hover',\n options: [\n { value: 'none', label: 'None' },\n { value: 'grow', label: 'Grow' },\n { value: 'shrink', label: 'Shrink' },\n { value: 'fade', label: 'Fade' },\n ],\n defaultValue: 'none',\n labelOrientation: 'horizontal',\n hidden,\n }\n }),\n fill: ResponsiveColor(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData | undefined,\n )\n const hidden = links == null || links.links.length === 0\n\n return {\n label: 'Icon color',\n hidden,\n }\n }),\n backgroundColor: ResponsiveColor(props => {\n const links = getSocialLinksPropControllerDataSocialLinksData(\n props.links as SocialLinksPropControllerData | undefined,\n )\n const hidden = links == null || links.links.length === 0\n\n return {\n label: 'Shape color',\n hidden,\n }\n }),\n alignment: ResponsiveIconRadioGroup({\n label: 'Alignment',\n options: [\n { label: 'flex-start', value: 'flex-start', icon: 'AlignLeft16' },\n { label: 'center', value: 'center', icon: 'AlignCenter16' },\n { label: 'flex-end', value: 'flex-end', icon: 'AlignRight16' },\n ],\n defaultValue: 'center',\n }),\n gutter: GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Link gap',\n min: 0,\n max: 100,\n step: 1,\n defaultValue: { value: 0, unit: 'px' },\n }),\n width: Width({\n format: Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Margin({\n format: Margin.Format.ClassName,\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: {\n marginTop: { value: 10, unit: 'px' },\n marginRight: 'auto',\n marginBottom: { value: 10, unit: 'px' },\n marginLeft: 'auto',\n },\n },\n ],\n }),\n },\n },\n )\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { MakeswiftComponentType } from "../constants";
|
|
2
|
-
import { getBaseBreakpoint } from "
|
|
2
|
+
import { getBaseBreakpoint } from "@makeswift/controls";
|
|
3
3
|
import { RichText } from "../../../controls/rich-text-v2/rich-text-v2";
|
|
4
4
|
import { lazy } from "react";
|
|
5
5
|
import { ElementID, Margin, Width } from "@makeswift/prop-controllers";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/builtin/Text/register.ts"],"sourcesContent":["import { type ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { getBaseBreakpoint } from '
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/builtin/Text/register.ts"],"sourcesContent":["import { type ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { getBaseBreakpoint } from '@makeswift/controls'\nimport { RichText } from '../../../controls/rich-text-v2/rich-text-v2'\nimport { lazy } from 'react'\nimport { ElementID, Margin, Width } from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Text')),\n {\n type: MakeswiftComponentType.Text,\n label: 'Text',\n props: {\n id: ElementID(),\n text: RichText(),\n width: Width({\n format: Width.Format.ClassName,\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 700, unit: 'px' },\n },\n ],\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Margin({\n format: Margin.Format.ClassName,\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: {\n marginTop: null,\n marginRight: 'auto',\n marginBottom: { value: 20, unit: 'px' },\n marginLeft: 'auto',\n },\n },\n ],\n }),\n },\n },\n )\n}\n"],"mappings":"AACA,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,WAAW,QAAQ,aAAa;AAElC,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,QAAQ,CAAC;AAAA,IAC3B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,MAAM,SAAS;AAAA,QACf,OAAO,MAAM;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UACrB,QAAQ;AAAA,YACN;AAAA,cACE,UAAU,kBAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,YAClC;AAAA,UACF;AAAA,UACA,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,OAAO;AAAA,UACb,QAAQ,OAAO,OAAO;AAAA,UACtB,QAAQ;AAAA,YACN;AAAA,cACE,UAAU,kBAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,aAAa;AAAA,gBACb,cAAc,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,gBACtC,YAAY;AAAA,cACd;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
findBreakpointOverride,
|
|
5
5
|
getBaseBreakpoint,
|
|
6
6
|
getBreakpointMediaQuery
|
|
7
|
-
} from "
|
|
7
|
+
} from "@makeswift/controls";
|
|
8
8
|
import { useBreakpoints } from "../../runtimes/react/hooks/use-breakpoints";
|
|
9
9
|
const getDeviceQueries = (breakpoints) => breakpoints.map((device) => ({
|
|
10
10
|
id: device.id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["import { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport { useCallback } from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["import { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport { useCallback } from 'react'\n\nimport {\n type Breakpoints,\n type DeviceOverride,\n findBreakpointOverride,\n getBaseBreakpoint,\n getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nconst getDeviceQueries = (breakpoints: Breakpoints) =>\n breakpoints.map(device => ({\n id: device.id,\n query: getBreakpointMediaQuery(device).replace('@media', ''),\n }))\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | undefined {\n const breakpoints = useBreakpoints()\n const baseBreakpointId = getBaseBreakpoint(breakpoints).id\n const subscribe = useCallback(\n (notify: () => void) => {\n const cleanUpFns = getDeviceQueries(breakpoints).map(q => {\n const mediaQueryList = window.matchMedia(q.query)\n mediaQueryList.addEventListener('change', notify)\n return () => mediaQueryList.removeEventListener('change', notify)\n })\n return () => cleanUpFns.forEach(fn => fn())\n },\n [breakpoints],\n )\n const getServerSnapshot = () =>\n findBreakpointOverride(breakpoints, responsiveValue, baseBreakpointId)?.value\n\n function getSnapshot() {\n const deviceId: string = getDeviceQueries(breakpoints).reduce(\n (matchedDevice, deviceQueries) => {\n if (window.matchMedia(deviceQueries.query).matches) {\n return deviceQueries.id\n }\n return matchedDevice\n },\n baseBreakpointId,\n )\n return findBreakpointOverride(breakpoints, responsiveValue, deviceId)?.value\n }\n\n return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"],"mappings":"AAAA,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAE5B;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAE/B,MAAM,mBAAmB,CAAC,gBACxB,YAAY,IAAI,aAAW;AAAA,EACzB,IAAI,OAAO;AAAA,EACX,OAAO,wBAAwB,MAAM,EAAE,QAAQ,UAAU,EAAE;AAC7D,EAAE;AAEG,SAAS,cAAiB,iBAA2D;AAC1F,QAAM,cAAc,eAAe;AACnC,QAAM,mBAAmB,kBAAkB,WAAW,EAAE;AACxD,QAAM,YAAY;AAAA,IAChB,CAAC,WAAuB;AACtB,YAAM,aAAa,iBAAiB,WAAW,EAAE,IAAI,OAAK;AACxD,cAAM,iBAAiB,OAAO,WAAW,EAAE,KAAK;AAChD,uBAAe,iBAAiB,UAAU,MAAM;AAChD,eAAO,MAAM,eAAe,oBAAoB,UAAU,MAAM;AAAA,MAClE,CAAC;AACD,aAAO,MAAM,WAAW,QAAQ,QAAM,GAAG,CAAC;AAAA,IAC5C;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,QAAM,oBAAoB,MACxB,uBAAuB,aAAa,iBAAiB,gBAAgB,GAAG;AAE1E,WAAS,cAAc;AACrB,UAAM,WAAmB,iBAAiB,WAAW,EAAE;AAAA,MACrD,CAAC,eAAe,kBAAkB;AAChC,YAAI,OAAO,WAAW,cAAc,KAAK,EAAE,SAAS;AAClD,iBAAO,cAAc;AAAA,QACvB;AACA,eAAO;AAAA,MACT;AAAA,MACA;AAAA,IACF;AACA,WAAO,uBAAuB,aAAa,iBAAiB,QAAQ,GAAG;AAAA,EACzE;AAEA,SAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACvE;","names":[]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
|
-
join as joinResponsiveValues
|
|
2
|
+
join as joinResponsiveValues,
|
|
3
|
+
getBreakpoint,
|
|
4
|
+
getBreakpointMediaQuery
|
|
3
5
|
} from "@makeswift/controls";
|
|
4
|
-
import { getBreakpoint, getBreakpointMediaQuery } from "../../state/modules/breakpoints";
|
|
5
6
|
import { useBreakpoints } from "../../runtimes/react/hooks/use-breakpoints";
|
|
6
7
|
import { getIndexes } from "./columns";
|
|
7
8
|
import { paddingPropertyDataToStyle } from "../../css/padding";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/utils/responsive-style.ts"],"sourcesContent":["import { WidthProperty } from 'csstype'\nimport { CSSObject } from '@emotion/css'\n\nimport type { ResponsiveValueType as ExtractResponsiveValue } from '@makeswift/controls'\n\nimport type {\n LengthData,\n ResponsiveBorderRadiusData,\n ResponsiveMarginData,\n ResponsivePaddingData,\n ResponsiveValue,\n ResponsiveLengthData,\n ResponsiveTextStyleData,\n} from '@makeswift/prop-controllers'\n\nimport {\n FallbackStrategy,\n join as joinResponsiveValues,\n type Breakpoints,\n} from '@makeswift/controls'\n\nimport { getBreakpoint, getBreakpointMediaQuery } from '../../state/modules/breakpoints'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nimport { getIndexes } from './columns'\nimport { PaddingPropertyData, paddingPropertyDataToStyle } from '../../css/padding'\nimport { MarginPropertyData, marginPropertyDataToStyle } from '../../css/margin'\nimport { BorderRadiusPropertyData, borderRadiusPropertyDataToStyle } from '../../css/border-radius'\nimport { BorderPropertyData, borderPropertyDataToStyle } from '../../css/border'\nimport { BorderPropControllerData } from '../hooks/useBorder'\nimport { colorToString } from './colorToString'\nimport { BoxShadow, ResponsiveBoxShadow } from '../hooks'\nimport { DropFirst } from './drop-first'\n\nexport function responsiveStyle<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>>(\n breakpoints: Breakpoints,\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(\n (acc, { deviceId, value }) => {\n const breakpoint = getBreakpoint(breakpoints, deviceId)\n const mediaQuery = getBreakpointMediaQuery(breakpoint)\n\n return {\n ...acc,\n [mediaQuery]: {\n ...(acc[mediaQuery] as CSSObject),\n ...value,\n },\n }\n },\n {} as CSSObject,\n )\n}\n\nexport function useResponsiveStyle<\n V,\n A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>,\n>(\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy)\n}\n\nexport function responsiveWidth(\n breakpoints: Breakpoints,\n widthData: ResponsiveLengthData | undefined,\n defaultValue: LengthData | WidthProperty<string | number> = '100%',\n): CSSObject {\n return {\n maxWidth: '100%',\n ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({\n width: typeof width === 'object' ? `${width.value}${width.unit}` : width,\n })),\n }\n}\n\nexport function useResponsiveWidth(\n ...args: DropFirst<Parameters<typeof responsiveWidth>>\n): CSSObject {\n return responsiveWidth(useBreakpoints(), ...args)\n}\n\nexport function responsivePadding(\n breakpoints: Breakpoints,\n paddingData: ResponsivePaddingData | undefined,\n defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [paddingData], ([padding = {} as PaddingPropertyData]) =>\n paddingPropertyDataToStyle(\n padding,\n Object.assign(\n { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsivePadding(\n ...args: DropFirst<Parameters<typeof responsivePadding>>\n): CSSObject {\n return responsivePadding(useBreakpoints(), ...args)\n}\n\nexport function responsiveMargin(\n breakpoints: Breakpoints,\n marginData: ResponsiveMarginData | undefined,\n defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [marginData], ([margin = {} as MarginPropertyData]) =>\n marginPropertyDataToStyle(\n margin,\n Object.assign(\n { marginTop: 0, marginRight: 'auto', marginBottom: 0, marginLeft: 'auto' },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveMargin(\n ...args: DropFirst<Parameters<typeof responsiveMargin>>\n): CSSObject {\n return responsiveMargin(useBreakpoints(), ...args)\n}\n\nexport function responsiveBorderRadius(\n breakpoints: Breakpoints,\n borderRadiusData: ResponsiveBorderRadiusData | undefined,\n defaultValue: BorderRadiusPropertyData = {} as BorderRadiusPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) =>\n borderRadiusPropertyDataToStyle(\n borderRadius,\n Object.assign(\n {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n borderBottomLeftRadius: 0,\n },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveBorderRadius(\n ...args: DropFirst<Parameters<typeof responsiveBorderRadius>>\n): CSSObject {\n return responsiveBorderRadius(useBreakpoints(), ...args)\n}\n\nexport function useResponsiveBorder(\n borderData: BorderPropControllerData | undefined,\n defaultValue: BorderPropertyData = {},\n): CSSObject {\n return useResponsiveStyle([borderData], ([border = {}]) =>\n borderPropertyDataToStyle(\n border,\n Object.assign(\n {\n borderTop: '0px solid black',\n borderRight: '0px solid black',\n borderBottom: '0px solid black',\n borderLeft: '0px solid black',\n },\n defaultValue,\n ),\n ),\n )\n}\n\nconst floor =\n (d: number) =>\n (v: number): number =>\n Math.floor(10 ** d * v) / 10 ** d\n\nexport function responsiveGridItem(\n breakpoints: Breakpoints,\n props: {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n columnGap?: ResponsiveValue<LengthData>\n rowGap?: ResponsiveValue<LengthData>\n },\n): CSSObject {\n return {\n display: 'flex',\n ...responsiveStyle(\n breakpoints,\n [props.grid, props.columnGap, props.rowGap] as const,\n ([\n { spans, count } = { spans: [[12]], count: 12 },\n columnGap = { value: 0, unit: 'px' },\n rowGap = { value: 0, unit: 'px' },\n ]) => {\n const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n const firstCol = columnIndex === 0\n const lastCol = columnIndex === spans[rowIndex].length - 1\n const span = spans[rowIndex][columnIndex]\n const fraction = floor(5)(span / count)\n const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n columnGap.unit\n } / 2`\n const iePrecisionError = '0.01px'\n const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n const firstRow = rowIndex === 0\n const lastRow = rowIndex === spans.length - 1\n\n return span === 0\n ? { display: 'none' }\n : {\n flexBasis,\n minWidth: flexBasis,\n // NOTE: IE11 width breaks without max width\n // https://github.com/philipwalton/flexbugs/issues/3\n maxWidth: flexBasis,\n paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n }\n },\n ),\n }\n}\n\nexport function useResponsiveGridItem(\n ...args: DropFirst<Parameters<typeof responsiveGridItem>>\n): CSSObject {\n return responsiveGridItem(useBreakpoints(), ...args)\n}\n\nconst getBoxShadow = (shadows: BoxShadow) =>\n shadows\n .map(\n ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n 1,\n )}px ${blurRadius}px ${spreadRadius}px ${\n color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n }`,\n )\n .filter(Boolean)\n .join()\n\nexport function responsiveShadow(\n breakpoints: Breakpoints,\n value: ResponsiveBoxShadow | undefined,\n): CSSObject {\n return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({\n boxShadow: getBoxShadow(shadow),\n }))\n}\n\nexport function useResponsiveShadow(\n ...args: DropFirst<Parameters<typeof responsiveShadow>>\n): CSSObject {\n return responsiveShadow(useBreakpoints(), ...args)\n}\n\nexport function responsiveTextStyle(\n breakpoints: Breakpoints,\n value: ResponsiveTextStyleData | undefined,\n): CSSObject {\n return responsiveStyle(\n breakpoints,\n [value],\n ([\n textStyle = {\n fontFamily: null,\n letterSpacing: null,\n fontSize: null,\n fontWeight: null,\n textTransform: [],\n fontStyle: [],\n },\n ]) => {\n const {\n fontSize,\n fontWeight,\n fontStyle = [],\n textTransform = [],\n letterSpacing,\n fontFamily,\n } = textStyle\n\n return {\n ...(fontFamily == null ? {} : { fontFamily: `\"${fontFamily}\"` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(letterSpacing == null ? {} : { letterSpacing }),\n ...(fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(textTransform.includes('uppercase') ? { textTransform: 'uppercase' } : {}),\n ...(fontStyle.includes('italic') ? { fontStyle: 'italic' } : {}),\n }\n },\n )\n}\n\nexport function useResponsiveTextStyle(\n ...args: DropFirst<Parameters<typeof responsiveTextStyle>>\n): CSSObject {\n return responsiveTextStyle(useBreakpoints(), ...args)\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/utils/responsive-style.ts"],"sourcesContent":["import { WidthProperty } from 'csstype'\nimport { CSSObject } from '@emotion/css'\n\nimport type { ResponsiveValueType as ExtractResponsiveValue } from '@makeswift/controls'\n\nimport type {\n LengthData,\n ResponsiveBorderRadiusData,\n ResponsiveMarginData,\n ResponsivePaddingData,\n ResponsiveValue,\n ResponsiveLengthData,\n ResponsiveTextStyleData,\n} from '@makeswift/prop-controllers'\n\nimport {\n type Breakpoints,\n type FallbackStrategy,\n join as joinResponsiveValues,\n getBreakpoint,\n getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nimport { getIndexes } from './columns'\nimport { PaddingPropertyData, paddingPropertyDataToStyle } from '../../css/padding'\nimport { MarginPropertyData, marginPropertyDataToStyle } from '../../css/margin'\nimport { BorderRadiusPropertyData, borderRadiusPropertyDataToStyle } from '../../css/border-radius'\nimport { BorderPropertyData, borderPropertyDataToStyle } from '../../css/border'\nimport { BorderPropControllerData } from '../hooks/useBorder'\nimport { colorToString } from './colorToString'\nimport { BoxShadow, ResponsiveBoxShadow } from '../hooks'\nimport { DropFirst } from './drop-first'\n\nexport function responsiveStyle<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>>(\n breakpoints: Breakpoints,\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(\n (acc, { deviceId, value }) => {\n const breakpoint = getBreakpoint(breakpoints, deviceId)\n const mediaQuery = getBreakpointMediaQuery(breakpoint)\n\n return {\n ...acc,\n [mediaQuery]: {\n ...(acc[mediaQuery] as CSSObject),\n ...value,\n },\n }\n },\n {} as CSSObject,\n )\n}\n\nexport function useResponsiveStyle<\n V,\n A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>,\n>(\n responsiveValues: A,\n join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n strategy?: FallbackStrategy<V>,\n): CSSObject {\n return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy)\n}\n\nexport function responsiveWidth(\n breakpoints: Breakpoints,\n widthData: ResponsiveLengthData | undefined,\n defaultValue: LengthData | WidthProperty<string | number> = '100%',\n): CSSObject {\n return {\n maxWidth: '100%',\n ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({\n width: typeof width === 'object' ? `${width.value}${width.unit}` : width,\n })),\n }\n}\n\nexport function useResponsiveWidth(\n ...args: DropFirst<Parameters<typeof responsiveWidth>>\n): CSSObject {\n return responsiveWidth(useBreakpoints(), ...args)\n}\n\nexport function responsivePadding(\n breakpoints: Breakpoints,\n paddingData: ResponsivePaddingData | undefined,\n defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [paddingData], ([padding = {} as PaddingPropertyData]) =>\n paddingPropertyDataToStyle(\n padding,\n Object.assign(\n { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsivePadding(\n ...args: DropFirst<Parameters<typeof responsivePadding>>\n): CSSObject {\n return responsivePadding(useBreakpoints(), ...args)\n}\n\nexport function responsiveMargin(\n breakpoints: Breakpoints,\n marginData: ResponsiveMarginData | undefined,\n defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [marginData], ([margin = {} as MarginPropertyData]) =>\n marginPropertyDataToStyle(\n margin,\n Object.assign(\n { marginTop: 0, marginRight: 'auto', marginBottom: 0, marginLeft: 'auto' },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveMargin(\n ...args: DropFirst<Parameters<typeof responsiveMargin>>\n): CSSObject {\n return responsiveMargin(useBreakpoints(), ...args)\n}\n\nexport function responsiveBorderRadius(\n breakpoints: Breakpoints,\n borderRadiusData: ResponsiveBorderRadiusData | undefined,\n defaultValue: BorderRadiusPropertyData = {} as BorderRadiusPropertyData,\n): CSSObject {\n return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) =>\n borderRadiusPropertyDataToStyle(\n borderRadius,\n Object.assign(\n {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n borderBottomLeftRadius: 0,\n },\n defaultValue,\n ),\n ),\n )\n}\n\nexport function useResponsiveBorderRadius(\n ...args: DropFirst<Parameters<typeof responsiveBorderRadius>>\n): CSSObject {\n return responsiveBorderRadius(useBreakpoints(), ...args)\n}\n\nexport function useResponsiveBorder(\n borderData: BorderPropControllerData | undefined,\n defaultValue: BorderPropertyData = {},\n): CSSObject {\n return useResponsiveStyle([borderData], ([border = {}]) =>\n borderPropertyDataToStyle(\n border,\n Object.assign(\n {\n borderTop: '0px solid black',\n borderRight: '0px solid black',\n borderBottom: '0px solid black',\n borderLeft: '0px solid black',\n },\n defaultValue,\n ),\n ),\n )\n}\n\nconst floor =\n (d: number) =>\n (v: number): number =>\n Math.floor(10 ** d * v) / 10 ** d\n\nexport function responsiveGridItem(\n breakpoints: Breakpoints,\n props: {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n columnGap?: ResponsiveValue<LengthData>\n rowGap?: ResponsiveValue<LengthData>\n },\n): CSSObject {\n return {\n display: 'flex',\n ...responsiveStyle(\n breakpoints,\n [props.grid, props.columnGap, props.rowGap] as const,\n ([\n { spans, count } = { spans: [[12]], count: 12 },\n columnGap = { value: 0, unit: 'px' },\n rowGap = { value: 0, unit: 'px' },\n ]) => {\n const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n const firstCol = columnIndex === 0\n const lastCol = columnIndex === spans[rowIndex].length - 1\n const span = spans[rowIndex][columnIndex]\n const fraction = floor(5)(span / count)\n const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n columnGap.unit\n } / 2`\n const iePrecisionError = '0.01px'\n const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n const firstRow = rowIndex === 0\n const lastRow = rowIndex === spans.length - 1\n\n return span === 0\n ? { display: 'none' }\n : {\n flexBasis,\n minWidth: flexBasis,\n // NOTE: IE11 width breaks without max width\n // https://github.com/philipwalton/flexbugs/issues/3\n maxWidth: flexBasis,\n paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n }\n },\n ),\n }\n}\n\nexport function useResponsiveGridItem(\n ...args: DropFirst<Parameters<typeof responsiveGridItem>>\n): CSSObject {\n return responsiveGridItem(useBreakpoints(), ...args)\n}\n\nconst getBoxShadow = (shadows: BoxShadow) =>\n shadows\n .map(\n ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n 1,\n )}px ${blurRadius}px ${spreadRadius}px ${\n color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n }`,\n )\n .filter(Boolean)\n .join()\n\nexport function responsiveShadow(\n breakpoints: Breakpoints,\n value: ResponsiveBoxShadow | undefined,\n): CSSObject {\n return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({\n boxShadow: getBoxShadow(shadow),\n }))\n}\n\nexport function useResponsiveShadow(\n ...args: DropFirst<Parameters<typeof responsiveShadow>>\n): CSSObject {\n return responsiveShadow(useBreakpoints(), ...args)\n}\n\nexport function responsiveTextStyle(\n breakpoints: Breakpoints,\n value: ResponsiveTextStyleData | undefined,\n): CSSObject {\n return responsiveStyle(\n breakpoints,\n [value],\n ([\n textStyle = {\n fontFamily: null,\n letterSpacing: null,\n fontSize: null,\n fontWeight: null,\n textTransform: [],\n fontStyle: [],\n },\n ]) => {\n const {\n fontSize,\n fontWeight,\n fontStyle = [],\n textTransform = [],\n letterSpacing,\n fontFamily,\n } = textStyle\n\n return {\n ...(fontFamily == null ? {} : { fontFamily: `\"${fontFamily}\"` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(letterSpacing == null ? {} : { letterSpacing }),\n ...(fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(textTransform.includes('uppercase') ? { textTransform: 'uppercase' } : {}),\n ...(fontStyle.includes('italic') ? { fontStyle: 'italic' } : {}),\n }\n },\n )\n}\n\nexport function useResponsiveTextStyle(\n ...args: DropFirst<Parameters<typeof responsiveTextStyle>>\n): CSSObject {\n return responsiveTextStyle(useBreakpoints(), ...args)\n}\n"],"mappings":"AAeA;AAAA,EAGE,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAC3B,SAA8B,kCAAkC;AAChE,SAA6B,iCAAiC;AAC9D,SAAmC,uCAAuC;AAC1E,SAA6B,iCAAiC;AAE9D,SAAS,qBAAqB;AAIvB,SAAS,gBACd,aACA,kBACA,MACA,UACW;AACX,SAAO,qBAAqB,aAAa,kBAAkB,MAAM,QAAQ,EAAE;AAAA,IACzE,CAAC,KAAK,EAAE,UAAU,MAAM,MAAM;AAC5B,YAAM,aAAa,cAAc,aAAa,QAAQ;AACtD,YAAM,aAAa,wBAAwB,UAAU;AAErD,aAAO;AAAA,QACL,GAAG;AAAA,QACH,CAAC,UAAU,GAAG;AAAA,UACZ,GAAI,IAAI,UAAU;AAAA,UAClB,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEO,SAAS,mBAId,kBACA,MACA,UACW;AACX,SAAO,gBAAgB,eAAe,GAAG,kBAAkB,MAAM,QAAQ;AAC3E;AAEO,SAAS,gBACd,aACA,WACA,eAA4D,QACjD;AACX,SAAO;AAAA,IACL,UAAU;AAAA,IACV,GAAG,gBAAgB,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,YAAY,OAAO;AAAA,MACxE,OAAO,OAAO,UAAU,WAAW,GAAG,MAAM,KAAK,GAAG,MAAM,IAAI,KAAK;AAAA,IACrE,EAAE;AAAA,EACJ;AACF;AAEO,SAAS,sBACX,MACQ;AACX,SAAO,gBAAgB,eAAe,GAAG,GAAG,IAAI;AAClD;AAEO,SAAS,kBACd,aACA,aACA,eAAoC,CAAC,GAC1B;AACX,SAAO;AAAA,IAAgB;AAAA,IAAa,CAAC,WAAW;AAAA,IAAG,CAAC,CAAC,UAAU,CAAC,CAAwB,MACtF;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,EAAE,YAAY,GAAG,cAAc,GAAG,eAAe,GAAG,aAAa,EAAE;AAAA,QACnE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,wBACX,MACQ;AACX,SAAO,kBAAkB,eAAe,GAAG,GAAG,IAAI;AACpD;AAEO,SAAS,iBACd,aACA,YACA,eAAmC,CAAC,GACzB;AACX,SAAO;AAAA,IAAgB;AAAA,IAAa,CAAC,UAAU;AAAA,IAAG,CAAC,CAAC,SAAS,CAAC,CAAuB,MACnF;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,EAAE,WAAW,GAAG,aAAa,QAAQ,cAAc,GAAG,YAAY,OAAO;AAAA,QACzE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,uBACX,MACQ;AACX,SAAO,iBAAiB,eAAe,GAAG,GAAG,IAAI;AACnD;AAEO,SAAS,uBACd,aACA,kBACA,eAAyC,CAAC,GAC/B;AACX,SAAO;AAAA,IAAgB;AAAA,IAAa,CAAC,gBAAgB;AAAA,IAAG,CAAC,CAAC,eAAe,CAAC,CAAC,MACzE;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL;AAAA,UACE,qBAAqB;AAAA,UACrB,sBAAsB;AAAA,UACtB,yBAAyB;AAAA,UACzB,wBAAwB;AAAA,QAC1B;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,6BACX,MACQ;AACX,SAAO,uBAAuB,eAAe,GAAG,GAAG,IAAI;AACzD;AAEO,SAAS,oBACd,YACA,eAAmC,CAAC,GACzB;AACX,SAAO;AAAA,IAAmB,CAAC,UAAU;AAAA,IAAG,CAAC,CAAC,SAAS,CAAC,CAAC,MACnD;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL;AAAA,UACE,WAAW;AAAA,UACX,aAAa;AAAA,UACb,cAAc;AAAA,UACd,YAAY;AAAA,QACd;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,QACJ,CAAC,MACD,CAAC,MACC,KAAK,MAAM,MAAM,IAAI,CAAC,IAAI,MAAM;AAE7B,SAAS,mBACd,aACA,OAMW;AACX,SAAO;AAAA,IACL,SAAS;AAAA,IACT,GAAG;AAAA,MACD;AAAA,MACA,CAAC,MAAM,MAAM,MAAM,WAAW,MAAM,MAAM;AAAA,MAC1C,CAAC;AAAA,QACC,EAAE,OAAO,MAAM,IAAI,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,GAAG;AAAA,QAC9C,YAAY,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QACnC,SAAS,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,MAClC,MAAM;AACJ,cAAM,CAAC,UAAU,WAAW,IAAI,WAAW,OAAO,MAAM,KAAK;AAC7D,cAAM,WAAW,gBAAgB;AACjC,cAAM,UAAU,gBAAgB,MAAM,QAAQ,EAAE,SAAS;AACzD,cAAM,OAAO,MAAM,QAAQ,EAAE,WAAW;AACxC,cAAM,WAAW,MAAM,CAAC,EAAE,OAAO,KAAK;AACtC,cAAM,QAAQ,GAAG,QAAQ,cAAc,UAAU,KAAK,GAAG,UAAU,IAAI;AACvE,cAAM,cAAc,GAAG,OAAO,QAAQ,IAAI,OAAO,OAAO,CAAC,MAAM,UAAU,KAAK,GAC5E,UAAU,IACZ;AACA,cAAM,mBAAmB;AACzB,cAAM,YAAY,QAAQ,KAAK,MAAM,WAAW,MAAM,gBAAgB;AACtE,cAAM,WAAW,aAAa;AAC9B,cAAM,UAAU,aAAa,MAAM,SAAS;AAE5C,eAAO,SAAS,IACZ,EAAE,SAAS,OAAO,IAClB;AAAA,UACE;AAAA,UACA,UAAU;AAAA;AAAA;AAAA,UAGV,UAAU;AAAA,UACV,aAAa,WAAW,IAAI,GAAG,UAAU,QAAQ,CAAC,GAAG,UAAU,IAAI;AAAA,UACnE,cAAc,UAAU,IAAI,GAAG,UAAU,QAAQ,CAAC,GAAG,UAAU,IAAI;AAAA,UACnE,YAAY,WAAW,IAAI,GAAG,OAAO,QAAQ,CAAC,GAAG,OAAO,IAAI;AAAA,UAC5D,eAAe,UAAU,IAAI,GAAG,OAAO,QAAQ,CAAC,GAAG,OAAO,IAAI;AAAA,QAChE;AAAA,MACN;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,yBACX,MACQ;AACX,SAAO,mBAAmB,eAAe,GAAG,GAAG,IAAI;AACrD;AAEA,MAAM,eAAe,CAAC,YACpB,QACG;AAAA,EACC,CAAC,EAAE,SAAS,EAAE,OAAO,SAAS,SAAS,YAAY,cAAc,MAAM,EAAE,MACvE,GAAG,QAAQ,WAAW,EAAE,GAAG,QAAQ,QAAQ,CAAC,CAAC,MAAM,QAAQ;AAAA,IACzD;AAAA,EACF,CAAC,MAAM,UAAU,MAAM,YAAY,MACjC,SAAS,OAAO,cAAc,KAAK,IAAI,iBACzC;AACJ,EACC,OAAO,OAAO,EACd,KAAK;AAEH,SAAS,iBACd,aACA,OACW;AACX,SAAO,gBAAgB,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO;AAAA,IAC/D,WAAW,aAAa,MAAM;AAAA,EAChC,EAAE;AACJ;AAEO,SAAS,uBACX,MACQ;AACX,SAAO,iBAAiB,eAAe,GAAG,GAAG,IAAI;AACnD;AAEO,SAAS,oBACd,aACA,OACW;AACX,SAAO;AAAA,IACL;AAAA,IACA,CAAC,KAAK;AAAA,IACN,CAAC;AAAA,MACC,YAAY;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe,CAAC;AAAA,QAChB,WAAW,CAAC;AAAA,MACd;AAAA,IACF,MAAM;AACJ,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA,YAAY,CAAC;AAAA,QACb,gBAAgB,CAAC;AAAA,QACjB;AAAA,QACA;AAAA,MACF,IAAI;AAEJ,aAAO;AAAA,QACL,GAAI,cAAc,OAAO,CAAC,IAAI,EAAE,YAAY,IAAI,UAAU,IAAI;AAAA,QAC9D,GAAI,cAAc,OAAO,CAAC,IAAI,EAAE,WAAW;AAAA,QAC3C,GAAI,iBAAiB,OAAO,CAAC,IAAI,EAAE,cAAc;AAAA,QACjD,GAAI,YAAY,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,KAAK,GAAG,SAAS,IAAI,GAAG;AAAA,QAC5E,GAAI,cAAc,SAAS,WAAW,IAAI,EAAE,eAAe,YAAY,IAAI,CAAC;AAAA,QAC5E,GAAI,UAAU,SAAS,QAAQ,IAAI,EAAE,WAAW,SAAS,IAAI,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,0BACX,MACQ;AACX,SAAO,oBAAoB,eAAe,GAAG,GAAG,IAAI;AACtD;","names":[]}
|
package/dist/esm/core/index.js
CHANGED
|
@@ -3,10 +3,14 @@ import {
|
|
|
3
3
|
ControlInstance,
|
|
4
4
|
DefaultControlInstance,
|
|
5
5
|
ShapeV2Control,
|
|
6
|
+
getBaseBreakpoint,
|
|
7
|
+
getBreakpoint,
|
|
6
8
|
findBreakpointOverride,
|
|
9
|
+
findNextFallback,
|
|
7
10
|
mergeOrCoalesceFallbacks,
|
|
8
11
|
mergeResponsiveValues,
|
|
9
|
-
shallowMergeFallbacks
|
|
12
|
+
shallowMergeFallbacks,
|
|
13
|
+
getViewportStyle
|
|
10
14
|
} from "@makeswift/controls";
|
|
11
15
|
export {
|
|
12
16
|
ControlDefinition,
|
|
@@ -14,6 +18,10 @@ export {
|
|
|
14
18
|
DefaultControlInstance,
|
|
15
19
|
ShapeV2Control,
|
|
16
20
|
findBreakpointOverride,
|
|
21
|
+
findNextFallback,
|
|
22
|
+
getBaseBreakpoint,
|
|
23
|
+
getBreakpoint,
|
|
24
|
+
getViewportStyle,
|
|
17
25
|
mergeOrCoalesceFallbacks,
|
|
18
26
|
mergeResponsiveValues,
|
|
19
27
|
shallowMergeFallbacks
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/index.ts"],"sourcesContent":["export {\n type Breakpoint,\n type BreakpointId,\n type Breakpoints,\n type ConfigType,\n type Data,\n type DataType,\n type DeviceOverride,\n type ValueType,\n type ResolvedValueType,\n type ResponsiveValue,\n type ControlMessage,\n type ReplacementContext,\n type SendMessageType,\n ControlDefinition,\n ControlInstance,\n DefaultControlInstance,\n ShapeV2Control,\n findBreakpointOverride,\n mergeOrCoalesceFallbacks,\n mergeResponsiveValues,\n shallowMergeFallbacks,\n} from '@makeswift/controls'\n"],"mappings":"AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/core/index.ts"],"sourcesContent":["export {\n type Breakpoint,\n type BreakpointId,\n type Breakpoints,\n type ConfigType,\n type Data,\n type DataType,\n type DeviceOverride,\n type FallbackStrategy,\n type ValueType,\n type ResolvedValueType,\n type ResponsiveValue,\n type ControlMessage,\n type ReplacementContext,\n type SendMessageType,\n ControlDefinition,\n ControlInstance,\n DefaultControlInstance,\n ShapeV2Control,\n getBaseBreakpoint,\n getBreakpoint,\n findBreakpointOverride,\n findNextFallback,\n mergeOrCoalesceFallbacks,\n mergeResponsiveValues,\n shallowMergeFallbacks,\n getViewportStyle,\n} from '@makeswift/controls'\n"],"mappings":"AAAA;AAAA,EAeE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}
|
|
@@ -14,7 +14,7 @@ async function handler(...args) {
|
|
|
14
14
|
const supportsDraftMode = match(args).with(routeHandlerPattern, () => true).with(apiRoutePattern, () => false).exhaustive();
|
|
15
15
|
const supportsWebhook = match(args).with(routeHandlerPattern, () => true).with(apiRoutePattern, () => false).exhaustive();
|
|
16
16
|
const body = {
|
|
17
|
-
version: "0.23.
|
|
17
|
+
version: "0.23.6-canary.0",
|
|
18
18
|
previewMode: supportsPreviewMode,
|
|
19
19
|
draftMode: supportsDraftMode,
|
|
20
20
|
interactionMode: true,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import { Slate } from "@makeswift/controls";
|
|
3
|
-
import {
|
|
2
|
+
import { Slate, getBaseBreakpoint } from "@makeswift/controls";
|
|
3
|
+
import { DefaultBreakpointID } from "../../../../../state/modules/breakpoints";
|
|
4
4
|
import { useBreakpoints } from "../../../hooks/use-breakpoints";
|
|
5
5
|
import { RichText } from "../../../../../controls";
|
|
6
6
|
function usePresetValue(definition) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Descendant } from 'slate'\nimport { Slate } from '@makeswift/controls'\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { Descendant } from 'slate'\nimport { Slate, getBaseBreakpoint } from '@makeswift/controls'\n\nimport { DefaultBreakpointID } from '../../../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../hooks/use-breakpoints'\nimport { RichTextV2Definition, RichText } from '../../../../../controls'\n\nexport function usePresetValue(definition: RichTextV2Definition): Descendant[] {\n const breakpoints = useBreakpoints()\n return useMemo(\n () => [\n {\n type: Slate.BlockType.Default,\n children: [\n {\n text: definition.config.defaultValue ?? '',\n ...(definition.config.mode === RichText.Mode.Inline\n ? {}\n : {\n typography: {\n style: [\n {\n deviceId: getBaseBreakpoint(breakpoints).id,\n value: {\n fontWeight: 400,\n fontSize: { value: 18, unit: 'px' },\n lineHeight: 1.5,\n },\n },\n ...(breakpoints.some(({ id }) => id === DefaultBreakpointID.Mobile)\n ? [\n {\n deviceId: DefaultBreakpointID.Mobile,\n value: { fontSize: { value: 16, unit: 'px' } },\n },\n ]\n : []),\n ],\n },\n }),\n },\n ],\n },\n ],\n [definition.config.mode, definition.config.defaultValue, breakpoints],\n )\n}\n\nexport const defaultValue = [\n {\n type: Slate.BlockType.Default,\n children: [\n {\n text: '',\n },\n ],\n },\n]\n"],"mappings":"AAAA,SAAS,eAAe;AAExB,SAAS,OAAO,yBAAyB;AAEzC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAA+B,gBAAgB;AAExC,SAAS,eAAe,YAAgD;AAC7E,QAAM,cAAc,eAAe;AACnC,SAAO;AAAA,IACL,MAAM;AAAA,MACJ;AAAA,QACE,MAAM,MAAM,UAAU;AAAA,QACtB,UAAU;AAAA,UACR;AAAA,YACE,MAAM,WAAW,OAAO,gBAAgB;AAAA,YACxC,GAAI,WAAW,OAAO,SAAS,SAAS,KAAK,SACzC,CAAC,IACD;AAAA,cACE,YAAY;AAAA,gBACV,OAAO;AAAA,kBACL;AAAA,oBACE,UAAU,kBAAkB,WAAW,EAAE;AAAA,oBACzC,OAAO;AAAA,sBACL,YAAY;AAAA,sBACZ,UAAU,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,sBAClC,YAAY;AAAA,oBACd;AAAA,kBACF;AAAA,kBACA,GAAI,YAAY,KAAK,CAAC,EAAE,GAAG,MAAM,OAAO,oBAAoB,MAAM,IAC9D;AAAA,oBACE;AAAA,sBACE,UAAU,oBAAoB;AAAA,sBAC9B,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,MAAM,KAAK,EAAE;AAAA,oBAC/C;AAAA,kBACF,IACA,CAAC;AAAA,gBACP;AAAA,cACF;AAAA,YACF;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,OAAO,MAAM,WAAW,OAAO,cAAc,WAAW;AAAA,EACtE;AACF;AAEO,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM,MAAM,UAAU;AAAA,IACtB,UAAU;AAAA,MACR;AAAA,QACE,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -2,10 +2,10 @@ import { useMemo, useEffect, useRef } from "react";
|
|
|
2
2
|
import { serializeStyles } from "@emotion/serialize";
|
|
3
3
|
import {
|
|
4
4
|
isNotNil,
|
|
5
|
-
getBaseBreakpoint
|
|
5
|
+
getBaseBreakpoint,
|
|
6
|
+
getBreakpointMediaQuery
|
|
6
7
|
} from "@makeswift/controls";
|
|
7
8
|
import { useCache } from "../../../next/root-style-registry";
|
|
8
|
-
import { getBreakpointMediaQuery } from "../../../state/modules/breakpoints";
|
|
9
9
|
import { styleV1Css } from "../controls/style";
|
|
10
10
|
import { typographyCss } from "../controls/typography";
|
|
11
11
|
import { useBreakpoints } from "./use-breakpoints";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-stylesheet-factory.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react'\nimport { type CSSObject, serializeStyles } from '@emotion/serialize'\nimport { type EmotionCache } from '@emotion/cache'\nimport { type SerializedStyles } from '@emotion/utils'\n\nimport {\n type Breakpoints,\n type BoxModel,\n type Stylesheet,\n type ResolvedStyle,\n type ResolvedStyleV2,\n type ResolvedTypographyStyle,\n isNotNil,\n getBaseBreakpoint,\n} from '@makeswift/controls'\n\nimport { useCache } from '../../../next/root-style-registry'\
|
|
1
|
+
{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-stylesheet-factory.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react'\nimport { type CSSObject, serializeStyles } from '@emotion/serialize'\nimport { type EmotionCache } from '@emotion/cache'\nimport { type SerializedStyles } from '@emotion/utils'\n\nimport {\n type Breakpoints,\n type BoxModel,\n type Stylesheet,\n type ResolvedStyle,\n type ResolvedStyleV2,\n type ResolvedTypographyStyle,\n isNotNil,\n getBaseBreakpoint,\n getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useCache } from '../../../next/root-style-registry'\n\nimport { styleV1Css } from '../controls/style'\nimport { typographyCss } from '../controls/typography'\n\nimport { useBreakpoints } from './use-breakpoints'\nimport { useCssId } from './use-css-id'\nimport { useStyles, serializedStyleClassName } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport type StylesheetFactory = {\n get(propName: string): Stylesheet\n useDefinedStyles(): void\n}\n\nexport function useStylesheetFactory(): StylesheetFactory {\n const breakpoints = useBreakpoints()\n const cache = useCache()\n const componentUid = useCssId()\n\n const computedStyles = useRef<Record<string, SerializedStyles>>({}).current\n const boxModelCallbacks = useRef<Record<string, (boxModel: BoxModel | null) => void>>({}).current\n\n return useMemo(() => {\n const getStylesheet = (styleSheetId: string): Stylesheet => ({\n breakpoints(): Breakpoints {\n return breakpoints\n },\n\n defineStyle(\n style: ResolvedStyle,\n onBoxModelChange?: (boxModel: BoxModel | null) => void,\n ): string {\n const serialized = serializeStyle(breakpoints, style, cache)\n const uid = `u-${componentUid}-${styleSheetId}`\n computedStyles[uid] = serialized\n\n const className = serializedStyleClassName(cache, serialized)\n if (!onBoxModelChange) return className\n\n boxModelCallbacks[uid] = onBoxModelChange\n return `${className} ${uid}`\n },\n\n child(id: string): Stylesheet {\n return getStylesheet(`${styleSheetId}-${id}`)\n },\n })\n\n return {\n get(propName: string): Stylesheet {\n return getStylesheet(propName)\n },\n\n useDefinedStyles() {\n useStyles(cache, Object.values(computedStyles))\n\n useEffect(() => {\n const unsubscribes = Object.entries(boxModelCallbacks)\n .map(([uid, callback]) =>\n callback != null\n ? pollBoxModel({\n element: document.querySelector(`.${uid}`),\n onBoxModelChange: callback,\n })\n : undefined,\n )\n .filter(isNotNil)\n\n return () => unsubscribes.forEach(fn => fn())\n }, [Object.keys(boxModelCallbacks).join(' ')])\n },\n }\n }, [breakpoints, cache, componentUid])\n}\n\nfunction isTypographyStyle(style: ResolvedStyle): style is ResolvedTypographyStyle {\n return Array.isArray(style)\n}\n\nfunction isStyleV2(style: ResolvedStyle): style is ResolvedStyleV2 {\n return typeof style === 'object' && 'getStyle' in style && typeof style.getStyle === 'function'\n}\n\nfunction styleV2Css(breakpoints: Breakpoints, style: ResolvedStyleV2<CSSObject>): CSSObject {\n return {\n ...style.getStyle(getBaseBreakpoint(breakpoints)),\n ...breakpoints.reduce(\n (styles, breakpoint) => ({\n ...styles,\n [getBreakpointMediaQuery(breakpoint)]: style.getStyle(breakpoint),\n }),\n {},\n ),\n }\n}\n\nfunction resolvedStyleToCss(breakpoints: Breakpoints, style: ResolvedStyle) {\n if (isTypographyStyle(style)) {\n return typographyCss(breakpoints, style)\n }\n\n if (isStyleV2(style)) {\n return styleV2Css(breakpoints, style as ResolvedStyleV2<CSSObject>)\n }\n\n const { properties, styleData } = style\n return styleV1Css(breakpoints, styleData, properties)\n}\n\nfunction serializeStyle(\n breakpoints: Breakpoints,\n style: ResolvedStyle,\n cache: EmotionCache,\n): SerializedStyles {\n const css = resolvedStyleToCss(breakpoints, style)\n return serializeStyles([css], cache.registered)\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { Transforms } from "slate";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
findBreakpointOverride,
|
|
4
|
+
Slate
|
|
5
|
+
} from "@makeswift/controls";
|
|
3
6
|
import { getBlocksInSelection } from "../selectors";
|
|
4
|
-
import { findBreakpointOverride } from "../../state/modules/breakpoints";
|
|
5
7
|
function setBlockKeyForDevice(editor, breakpoints, deviceId, key, value, options) {
|
|
6
8
|
const at = options?.at ?? editor.selection;
|
|
7
9
|
if (!at)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/slate/BlockPlugin/setBlockKeyForDevice.ts"],"sourcesContent":["import { Editor, Transforms, Location } from 'slate'\nimport { Slate
|
|
1
|
+
{"version":3,"sources":["../../../../src/slate/BlockPlugin/setBlockKeyForDevice.ts"],"sourcesContent":["import { Editor, Transforms, Location } from 'slate'\nimport {\n type Breakpoints,\n type BreakpointId,\n findBreakpointOverride,\n Slate,\n} from '@makeswift/controls'\n\nimport { getBlocksInSelection } from '../selectors'\nimport { EditableBlockKey, EditableBlockValue } from './types'\n\ntype SetBlockKeyForDeviceOptions = {\n at?: Location\n}\n\nexport function setBlockKeyForDevice(\n editor: Editor,\n breakpoints: Breakpoints,\n deviceId: BreakpointId,\n key: EditableBlockKey,\n value: EditableBlockValue[number]['value'],\n options?: SetBlockKeyForDeviceOptions,\n) {\n const at = options?.at ?? editor.selection\n if (!at) return\n\n const rootElements = getBlocksInSelection(editor)\n\n for (const [node, path] of rootElements) {\n if (Slate.isBlock(node)) {\n const deviceValues = node[key] ?? []\n const currentDeviceValue = findBreakpointOverride(breakpoints, deviceValues, deviceId, v => v)\n const nextDeviceValue = {\n ...currentDeviceValue,\n deviceId,\n value,\n }\n Transforms.setNodes(\n editor,\n {\n [key]: [...deviceValues.filter(v => v.deviceId !== deviceId), nextDeviceValue],\n },\n { at: path },\n )\n }\n }\n}\n"],"mappings":"AAAA,SAAiB,kBAA4B;AAC7C;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B;AAO9B,SAAS,qBACd,QACA,aACA,UACA,KACA,OACA,SACA;AACA,QAAM,KAAK,SAAS,MAAM,OAAO;AACjC,MAAI,CAAC;AAAI;AAET,QAAM,eAAe,qBAAqB,MAAM;AAEhD,aAAW,CAAC,MAAM,IAAI,KAAK,cAAc;AACvC,QAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,YAAM,eAAe,KAAK,GAAG,KAAK,CAAC;AACnC,YAAM,qBAAqB,uBAAuB,aAAa,cAAc,UAAU,OAAK,CAAC;AAC7F,YAAM,kBAAkB;AAAA,QACtB,GAAG;AAAA,QACH;AAAA,QACA;AAAA,MACF;AACA,iBAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,GAAG,GAAG,CAAC,GAAG,aAAa,OAAO,OAAK,EAAE,aAAa,QAAQ,GAAG,eAAe;AAAA,QAC/E;AAAA,QACA,EAAE,IAAI,KAAK;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { Editor, Transforms, Text, Range } from "slate";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
findBreakpointOverride
|
|
4
|
+
} from "@makeswift/controls";
|
|
3
5
|
function setActiveTypographyStyle(editor, breakpoints, deviceId, prop, value, options) {
|
|
4
6
|
Editor.withoutNormalizing(editor, () => {
|
|
5
7
|
const at = options?.at ?? editor.selection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/slate/TypographyPlugin/setActiveTypographyStyle.ts"],"sourcesContent":["import { Editor, Transforms, Text, Range } from 'slate'\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/slate/TypographyPlugin/setActiveTypographyStyle.ts"],"sourcesContent":["import { Editor, Transforms, Text, Range } from 'slate'\nimport {\n type Breakpoints,\n type BreakpointId,\n findBreakpointOverride,\n RichTextTypography,\n} from '@makeswift/controls'\n\ntype SetActiveTypographyStyleOptions = {\n at?: Range\n}\n\nexport function setActiveTypographyStyle(\n editor: Editor,\n breakpoints: Breakpoints,\n deviceId: string,\n prop: string,\n value?: unknown,\n options?: SetActiveTypographyStyleOptions,\n) {\n Editor.withoutNormalizing(editor, () => {\n const at = options?.at ?? editor.selection\n if (!at) return\n const atRef = Editor.rangeRef(editor, at)\n\n if (atRef.current) {\n Transforms.setNodes(\n editor,\n {\n slice: true,\n },\n {\n at: atRef.current,\n match: node => Text.isText(node),\n split: Range.isExpanded(atRef.current),\n },\n )\n }\n\n if (atRef.current) {\n const textNodes = Array.from(\n Editor.nodes(editor, {\n at: atRef.current,\n match: node => Text.isText(node) && node.slice === true,\n }),\n )\n\n for (const [node, path] of textNodes) {\n if (Text.isText(node)) {\n const deviceOverrides = node?.typography?.style ?? []\n const deviceStyle = findBreakpointOverride(\n breakpoints,\n deviceOverrides,\n deviceId as BreakpointId,\n v => v,\n ) || {\n value: {},\n }\n const nextDeviceStyle = {\n deviceId,\n value: { ...deviceStyle.value, [prop]: value },\n }\n\n const nextTypography: RichTextTypography = {\n ...node.typography,\n style: [...deviceOverrides.filter(v => v.deviceId !== deviceId), nextDeviceStyle],\n }\n\n Transforms.setNodes(\n editor,\n {\n typography: nextTypography,\n },\n { at: path },\n )\n }\n }\n }\n\n atRef.unref()\n })\n}\n"],"mappings":"AAAA,SAAS,QAAQ,YAAY,MAAM,aAAa;AAChD;AAAA,EAGE;AAAA,OAEK;AAMA,SAAS,yBACd,QACA,aACA,UACA,MACA,OACA,SACA;AACA,SAAO,mBAAmB,QAAQ,MAAM;AACtC,UAAM,KAAK,SAAS,MAAM,OAAO;AACjC,QAAI,CAAC;AAAI;AACT,UAAM,QAAQ,OAAO,SAAS,QAAQ,EAAE;AAExC,QAAI,MAAM,SAAS;AACjB,iBAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,OAAO;AAAA,QACT;AAAA,QACA;AAAA,UACE,IAAI,MAAM;AAAA,UACV,OAAO,UAAQ,KAAK,OAAO,IAAI;AAAA,UAC/B,OAAO,MAAM,WAAW,MAAM,OAAO;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAEA,QAAI,MAAM,SAAS;AACjB,YAAM,YAAY,MAAM;AAAA,QACtB,OAAO,MAAM,QAAQ;AAAA,UACnB,IAAI,MAAM;AAAA,UACV,OAAO,UAAQ,KAAK,OAAO,IAAI,KAAK,KAAK,UAAU;AAAA,QACrD,CAAC;AAAA,MACH;AAEA,iBAAW,CAAC,MAAM,IAAI,KAAK,WAAW;AACpC,YAAI,KAAK,OAAO,IAAI,GAAG;AACrB,gBAAM,kBAAkB,MAAM,YAAY,SAAS,CAAC;AACpD,gBAAM,cAAc;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAK;AAAA,UACP,KAAK;AAAA,YACH,OAAO,CAAC;AAAA,UACV;AACA,gBAAM,kBAAkB;AAAA,YACtB;AAAA,YACA,OAAO,EAAE,GAAG,YAAY,OAAO,CAAC,IAAI,GAAG,MAAM;AAAA,UAC/C;AAEA,gBAAM,iBAAqC;AAAA,YACzC,GAAG,KAAK;AAAA,YACR,OAAO,CAAC,GAAG,gBAAgB,OAAO,OAAK,EAAE,aAAa,QAAQ,GAAG,eAAe;AAAA,UAClF;AAEA,qBAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,YAAY;AAAA,YACd;AAAA,YACA,EAAE,IAAI,KAAK;AAAA,UACb;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,MAAM;AAAA,EACd,CAAC;AACH;","names":[]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { Editor, Text } from "slate";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
findBreakpointOverride,
|
|
4
|
+
Slate
|
|
5
|
+
} from "@makeswift/controls";
|
|
3
6
|
import unhangRange from "./utils/unhangRange";
|
|
4
7
|
import shallowEqual from "../utils/shallowEqual";
|
|
5
8
|
import { isNonNullable } from "../utils/isNonNullable";
|
|
6
|
-
import { findBreakpointOverride } from "../state/modules/breakpoints";
|
|
7
9
|
import deepEqual from "../utils/deepEqual";
|
|
8
10
|
import keys from "../utils/keys";
|
|
9
11
|
function getSelection(editor) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/slate/selectors.ts"],"sourcesContent":["import { Editor, NodeEntry, Range, Text } from 'slate'\nimport { Slate
|
|
1
|
+
{"version":3,"sources":["../../../src/slate/selectors.ts"],"sourcesContent":["import { Editor, NodeEntry, Range, Text } from 'slate'\nimport {\n type Breakpoints,\n type BreakpointId,\n findBreakpointOverride,\n Slate,\n} from '@makeswift/controls'\n\nimport { EditableBlockKey } from './BlockPlugin/types'\n\nimport unhangRange from './utils/unhangRange'\nimport shallowEqual from '../utils/shallowEqual'\nimport { isNonNullable } from '../utils/isNonNullable'\n\nimport deepEqual from '../utils/deepEqual'\nimport keys from '../utils/keys'\n\nexport function getSelection(editor: Editor): Range {\n if (editor.selection) return unhangRange(editor, editor.selection)\n return {\n anchor: Editor.start(editor, []),\n focus: Editor.end(editor, []),\n }\n}\n\nexport function getBlocksInSelection(editor: Editor): NodeEntry<Slate.RootBlock>[] {\n return Array.from(\n Editor.nodes(editor, {\n at: getSelection(editor),\n match: node => Slate.isRootBlock(node),\n }),\n ).filter((entry): entry is NodeEntry<Slate.RootBlock> => Slate.isRootBlock(entry[0]))\n}\n\nexport function getInlinesInSelection(editor: Editor): NodeEntry<Slate.Inline>[] {\n return Array.from(\n Editor.nodes(editor, {\n at: getSelection(editor),\n match: node => Slate.isInline(node),\n }),\n ).filter((entry): entry is NodeEntry<Slate.Inline> => Slate.isInline(entry[0]))\n}\n\nexport function getActiveBlockType(editor: Editor): Slate.RootBlockType | null {\n const rootBlocks = getBlocksInSelection(editor).map(([node]) => node.type)\n\n return rootBlocks.reduce<Slate.RootBlockType | null>(\n (a, b) => (a === b ? b : null),\n rootBlocks.at(0) ?? null,\n )\n}\n\nexport function getActiveBlockValue(editor: Editor, key: EditableBlockKey) {\n const blocks = getBlocksInSelection(editor)\n\n const active = blocks.map(\n ([block]) => block[key] ?? null,\n ) as (Slate.ResponsiveBlockTextAlignment | null)[]\n\n return active.length === 0 ? null : active.reduce((a, b) => (shallowEqual(a, b) ? b : null))\n}\n\nexport function getActiveBlockDeviceOverrideValue(\n editor: Editor,\n key: EditableBlockKey,\n breakpoints: Breakpoints,\n deviceId: BreakpointId,\n) {\n const active: (Slate.BlockTextAlignment | null)[] = []\n const blocks = getBlocksInSelection(editor)\n\n blocks.forEach(([block]) => {\n const deviceOverride =\n findBreakpointOverride<Slate.BlockTextAlignment>(breakpoints, block[key], deviceId) || null\n active.push(deviceOverride?.value ?? null)\n })\n\n return active.length === 0 ? null : active.reduce((a, b) => (shallowEqual(a, b) ? b : null))\n}\n\n// Typography\n\nconst concat = (a: unknown[], b: unknown[]) => a.concat(b)\n\n// TODO: This is more cruft from trying to remove null from the typography type. This optimization is not worth it.\n/**\n * This is a c/p of the intersection of the utils from the root utils folder.\n * The only change is defaulting to undefined instead of to null.\n */\nexport default function intersection<A extends Record<string, unknown>, B extends A>(\n a: A,\n b: B,\n isEqual: (a: unknown, b: unknown) => boolean = deepEqual,\n): { [K in keyof A]: A[K] | undefined } {\n const allKeys = [...new Set([...keys(a), ...keys(b)])] as (keyof A)[]\n\n return allKeys.reduce(\n (acc, k) => {\n if (isEqual(a[k], b[k])) acc[k] = a[k]\n else acc[k] = undefined\n\n return acc\n },\n {} as { [K in keyof A]: A[K] | undefined },\n )\n}\n\nconst fuseTypographyMarks = (\n values: Array<Slate.Typography | null | undefined>,\n breakpoints: Breakpoints,\n): Slate.Typography => {\n const devices = [\n ...new Set(\n values\n .filter(isNonNullable)\n .map(({ style }) => style.map(({ deviceId }) => deviceId))\n .reduce(concat, []),\n ),\n ] as BreakpointId[]\n\n return {\n id: values.map(v => v && v.id).reduce((a, b) => (a === b ? a : undefined)) ?? undefined,\n style: devices.map(deviceId =>\n values\n .map(\n v =>\n (v && findBreakpointOverride(breakpoints, v.style, deviceId)) || {\n deviceId,\n value: {},\n },\n )\n .reduce((acc, { value }) => {\n const a = intersection(acc.value, value)\n return {\n deviceId,\n value: a,\n }\n }),\n ),\n }\n}\n\nexport function getActiveTypographyMark(\n editor: Editor,\n breakpoints: Breakpoints,\n): Slate.Typography {\n const active: Slate.Typography[] = []\n\n const textNodes = Editor.nodes(editor, {\n at: getSelection(editor),\n match: node => Text.isText(node),\n })\n\n for (const [node] of textNodes) {\n if (Text.isText(node) && 'typography' in node && node.typography != undefined) {\n active.push(node.typography)\n }\n }\n return active.length === 0 ? { style: [] } : fuseTypographyMarks(active, breakpoints)\n}\n"],"mappings":"AAAA,SAAS,QAA0B,YAAY;AAC/C;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAIP,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,SAAS,qBAAqB;AAE9B,OAAO,eAAe;AACtB,OAAO,UAAU;AAEV,SAAS,aAAa,QAAuB;AAClD,MAAI,OAAO;AAAW,WAAO,YAAY,QAAQ,OAAO,SAAS;AACjE,SAAO;AAAA,IACL,QAAQ,OAAO,MAAM,QAAQ,CAAC,CAAC;AAAA,IAC/B,OAAO,OAAO,IAAI,QAAQ,CAAC,CAAC;AAAA,EAC9B;AACF;AAEO,SAAS,qBAAqB,QAA8C;AACjF,SAAO,MAAM;AAAA,IACX,OAAO,MAAM,QAAQ;AAAA,MACnB,IAAI,aAAa,MAAM;AAAA,MACvB,OAAO,UAAQ,MAAM,YAAY,IAAI;AAAA,IACvC,CAAC;AAAA,EACH,EAAE,OAAO,CAAC,UAA+C,MAAM,YAAY,MAAM,CAAC,CAAC,CAAC;AACtF;AAEO,SAAS,sBAAsB,QAA2C;AAC/E,SAAO,MAAM;AAAA,IACX,OAAO,MAAM,QAAQ;AAAA,MACnB,IAAI,aAAa,MAAM;AAAA,MACvB,OAAO,UAAQ,MAAM,SAAS,IAAI;AAAA,IACpC,CAAC;AAAA,EACH,EAAE,OAAO,CAAC,UAA4C,MAAM,SAAS,MAAM,CAAC,CAAC,CAAC;AAChF;AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,aAAa,qBAAqB,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,MAAM,KAAK,IAAI;AAEzE,SAAO,WAAW;AAAA,IAChB,CAAC,GAAG,MAAO,MAAM,IAAI,IAAI;AAAA,IACzB,WAAW,GAAG,CAAC,KAAK;AAAA,EACtB;AACF;AAEO,SAAS,oBAAoB,QAAgB,KAAuB;AACzE,QAAM,SAAS,qBAAqB,MAAM;AAE1C,QAAM,SAAS,OAAO;AAAA,IACpB,CAAC,CAAC,KAAK,MAAM,MAAM,GAAG,KAAK;AAAA,EAC7B;AAEA,SAAO,OAAO,WAAW,IAAI,OAAO,OAAO,OAAO,CAAC,GAAG,MAAO,aAAa,GAAG,CAAC,IAAI,IAAI,IAAK;AAC7F;AAEO,SAAS,kCACd,QACA,KACA,aACA,UACA;AACA,QAAM,SAA8C,CAAC;AACrD,QAAM,SAAS,qBAAqB,MAAM;AAE1C,SAAO,QAAQ,CAAC,CAAC,KAAK,MAAM;AAC1B,UAAM,iBACJ,uBAAiD,aAAa,MAAM,GAAG,GAAG,QAAQ,KAAK;AACzF,WAAO,KAAK,gBAAgB,SAAS,IAAI;AAAA,EAC3C,CAAC;AAED,SAAO,OAAO,WAAW,IAAI,OAAO,OAAO,OAAO,CAAC,GAAG,MAAO,aAAa,GAAG,CAAC,IAAI,IAAI,IAAK;AAC7F;AAIA,MAAM,SAAS,CAAC,GAAc,MAAiB,EAAE,OAAO,CAAC;AAO1C,SAAR,aACL,GACA,GACA,UAA+C,WACT;AACtC,QAAM,UAAU,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AAErD,SAAO,QAAQ;AAAA,IACb,CAAC,KAAK,MAAM;AACV,UAAI,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AAAG,YAAI,CAAC,IAAI,EAAE,CAAC;AAAA;AAChC,YAAI,CAAC,IAAI;AAEd,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEA,MAAM,sBAAsB,CAC1B,QACA,gBACqB;AACrB,QAAM,UAAU;AAAA,IACd,GAAG,IAAI;AAAA,MACL,OACG,OAAO,aAAa,EACpB,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,IAAI,CAAC,EAAE,SAAS,MAAM,QAAQ,CAAC,EACxD,OAAO,QAAQ,CAAC,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,IAAI,OAAO,IAAI,OAAK,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,GAAG,MAAO,MAAM,IAAI,IAAI,MAAU,KAAK;AAAA,IAC9E,OAAO,QAAQ;AAAA,MAAI,cACjB,OACG;AAAA,QACC,OACG,KAAK,uBAAuB,aAAa,EAAE,OAAO,QAAQ,KAAM;AAAA,UAC/D;AAAA,UACA,OAAO,CAAC;AAAA,QACV;AAAA,MACJ,EACC,OAAO,CAAC,KAAK,EAAE,MAAM,MAAM;AAC1B,cAAM,IAAI,aAAa,IAAI,OAAO,KAAK;AACvC,eAAO;AAAA,UACL;AAAA,UACA,OAAO;AAAA,QACT;AAAA,MACF,CAAC;AAAA,IACL;AAAA,EACF;AACF;AAEO,SAAS,wBACd,QACA,aACkB;AAClB,QAAM,SAA6B,CAAC;AAEpC,QAAM,YAAY,OAAO,MAAM,QAAQ;AAAA,IACrC,IAAI,aAAa,MAAM;AAAA,IACvB,OAAO,UAAQ,KAAK,OAAO,IAAI;AAAA,EACjC,CAAC;AAED,aAAW,CAAC,IAAI,KAAK,WAAW;AAC9B,QAAI,KAAK,OAAO,IAAI,KAAK,gBAAgB,QAAQ,KAAK,cAAc,QAAW;AAC7E,aAAO,KAAK,KAAK,UAAU;AAAA,IAC7B;AAAA,EACF;AACA,SAAO,OAAO,WAAW,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,oBAAoB,QAAQ,WAAW;AACtF;","names":[]}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
findBreakpointOverride
|
|
3
|
-
} from "@makeswift/controls";
|
|
4
1
|
import { ActionTypes } from "../actions";
|
|
5
2
|
import {
|
|
6
|
-
|
|
7
|
-
getBaseBreakpoint
|
|
3
|
+
getBreakpoint
|
|
8
4
|
} from "@makeswift/controls";
|
|
9
5
|
const DefaultBreakpointID = {
|
|
10
6
|
Desktop: "desktop",
|
|
@@ -99,48 +95,11 @@ function validateBreakpointsInput(input) {
|
|
|
99
95
|
}
|
|
100
96
|
});
|
|
101
97
|
}
|
|
102
|
-
const getBreakpoint = (state, breakpointId) => {
|
|
103
|
-
const breakpoint = state.find(({ id }) => id === breakpointId);
|
|
104
|
-
if (breakpoint == null)
|
|
105
|
-
throw new Error(`Unrecognized breakpoint ID: "${breakpointId}".`);
|
|
106
|
-
return breakpoint;
|
|
107
|
-
};
|
|
108
|
-
const getBreakpointMediaQuery = (breakpoint) => {
|
|
109
|
-
const parts = ["@media only screen"];
|
|
110
|
-
if (breakpoint.minWidth != null) {
|
|
111
|
-
parts.push(`(min-width: ${breakpoint.minWidth}px)`);
|
|
112
|
-
}
|
|
113
|
-
if (breakpoint.maxWidth != null) {
|
|
114
|
-
parts.push(`(max-width: ${breakpoint.maxWidth}px)`);
|
|
115
|
-
}
|
|
116
|
-
return parts.join(" and ");
|
|
117
|
-
};
|
|
118
|
-
const getViewportStyle = (state, deviceId) => {
|
|
119
|
-
const device = getBreakpoint(state, deviceId);
|
|
120
|
-
return device && {
|
|
121
|
-
width: device.viewportWidth != null ? device.viewportWidth : "100%",
|
|
122
|
-
minWidth: device.minWidth
|
|
123
|
-
};
|
|
124
|
-
};
|
|
125
|
-
function findNextFallback(breakpoints, value, deviceId, activeDeviceId, fallbackStrategy) {
|
|
126
|
-
const deviceOverride = findBreakpointOverride(
|
|
127
|
-
breakpoints,
|
|
128
|
-
value.filter((v) => v.deviceId !== activeDeviceId),
|
|
129
|
-
deviceId,
|
|
130
|
-
fallbackStrategy
|
|
131
|
-
);
|
|
132
|
-
return (deviceOverride && getBreakpoint(breakpoints, deviceOverride.deviceId)) ?? null;
|
|
133
|
-
}
|
|
134
98
|
export {
|
|
135
99
|
DEFAULT_BREAKPOINTS,
|
|
136
100
|
DefaultBreakpointID,
|
|
137
|
-
findBreakpointOverride2 as findBreakpointOverride,
|
|
138
|
-
findNextFallback,
|
|
139
|
-
getBaseBreakpoint,
|
|
140
101
|
getBreakpoint,
|
|
141
|
-
getBreakpointMediaQuery,
|
|
142
102
|
getInitialState,
|
|
143
|
-
getViewportStyle,
|
|
144
103
|
parseBreakpointsInput,
|
|
145
104
|
reducer
|
|
146
105
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import { type Breakpoint, type Breakpoints } from '@makeswift/controls'\n\nimport { Action, ActionTypes } from '../actions'\n\nexport {\n getBreakpoint,\n type Breakpoint,\n type BreakpointId,\n type Breakpoints,\n} from '@makeswift/controls'\n\nexport type State = Breakpoints\n\nexport const DefaultBreakpointID = {\n Desktop: 'desktop',\n Tablet: 'tablet',\n Mobile: 'mobile',\n} as const\n\ntype DefaultBreakpointID = (typeof DefaultBreakpointID)[keyof typeof DefaultBreakpointID]\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = [\n {\n id: DefaultBreakpointID.Desktop,\n label: 'Desktop',\n minWidth: 769,\n },\n {\n id: DefaultBreakpointID.Tablet,\n label: 'Tablet',\n minWidth: 576,\n maxWidth: 768,\n viewportWidth: 760,\n },\n {\n id: DefaultBreakpointID.Mobile,\n label: 'Mobile',\n maxWidth: 575,\n viewportWidth: 390,\n },\n]\n\nexport function getInitialState(breakpoints = DEFAULT_BREAKPOINTS): State {\n return breakpoints\n}\n\nexport function reducer(state: State = getInitialState(), action: Action): State {\n switch (action.type) {\n case ActionTypes.SET_BREAKPOINTS: {\n const breakpoints = action.payload.breakpoints\n\n if (breakpoints.length === 0) throw new Error('Breakpoints cannot be empty.')\n\n return breakpoints\n }\n\n default:\n return state\n }\n}\n\nexport type BreakpointsInput = Record<string, { width: number; label?: string; viewport?: number }>\n\nexport function parseBreakpointsInput(input: BreakpointsInput): Breakpoints {\n validateBreakpointsInput(input)\n\n const sorted = Object.entries(input)\n .map(([id, value]) => ({ ...value, id }))\n .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n const transformed = sorted.reduce(\n (prev, curr, index, array) => {\n const { width, viewport, id, label } = curr\n const next = array[index + 1]\n\n const breakpoint: Breakpoint = {\n id,\n ...(label && { label }),\n ...(next && { minWidth: next.width + 1 }),\n maxWidth: width,\n viewportWidth: viewport ?? width,\n }\n\n return [...prev, breakpoint]\n },\n [\n { id: DefaultBreakpointID.Desktop, label: 'Desktop', minWidth: sorted[0].width + 1 },\n ] as Breakpoints,\n )\n\n return transformed\n}\n\nfunction validateBreakpointsInput(input: BreakpointsInput) {\n if (DefaultBreakpointID.Desktop in input) {\n throw new Error(\n `Cannot change the base breakpoint. \"${DefaultBreakpointID.Desktop}\" is reserved as the base breakpoint.`,\n )\n }\n\n if (Object.keys(input).length === 0) {\n throw new Error(`Breakpoints cannot be empty. You must provide at least one breakpoint.`)\n }\n\n const sorted = Object.entries(input)\n .map(([id, value]) => ({ ...value, id }))\n .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n sorted.forEach(({ id, width, viewport }, index, array) => {\n // This is only valid for desktop-first. We need to check the inverse for mobile-first.\n if (viewport && viewport > width) {\n throw new Error(\n `Error on breakpoint \"${id}\". Viewport cannot be greater than its width.\n \"${id}\" has a viewport of ${viewport}px and a width of ${width}px.`,\n )\n }\n\n const next = array[index + 1]\n\n if (viewport && next && viewport < next.width) {\n throw new Error(\n `Error on breakpoint \"${id}\". Viewport cannot be smaller than the next breakpoint's width. \n \"${id}\" has a viewport of ${viewport}px and the next breakpoint \"${next.id}\" has a width of ${next.width}px.`,\n )\n }\n\n if (next && width === next.width) {\n throw new Error(\n `Breakpoints cannot have the same width. \"${id}\" and \"${next.id}\" have the same width`,\n )\n }\n })\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../../../src/components/builtin/Box/register.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../../../src/components/builtin/Box/register.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAWtD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,YAAY,cA6JtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../../../src/components/builtin/Button/register.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../../../src/components/builtin/Button/register.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAKtD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,YAAY,cAsEtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAQxD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,EAClC,KAAK,UAAU,EAChB,MAAM,6BAA6B,CAAA;AA0BpC,KAAK,KAAK,GAAG;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,qBAAqB,CAAA;IAChC,IAAI,CAAC,EAAE,qBAAqB,CAAA;IAC5B,cAAc,CAAC,EAAE,6BAA6B,CAAC,YAAY,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAA;IACpF,GAAG,CAAC,EAAE,iBAAiB,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,6BAA6B,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAA;IAC9E,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACnC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AASD,QAAA,MAAM,QAAQ,kGA6TZ,CAAA;AAEF,eAAe,QAAQ,CAAA"}
|