@plasmicpkgs/react-aria 0.0.50 → 0.0.52
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/.tsbuildinfo +1 -1
- package/dist/react-aria.esm.js +102 -155
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +102 -155
- package/dist/react-aria.js.map +1 -1
- package/dist/registerButton.d.ts +3 -4
- package/dist/registerCheckbox.d.ts +3 -4
- package/dist/registerCheckboxGroup.d.ts +3 -4
- package/dist/registerInput.d.ts +3 -4
- package/dist/registerListBoxItem.d.ts +5 -5
- package/dist/registerRadio.d.ts +3 -4
- package/dist/registerRadioGroup.d.ts +3 -4
- package/dist/registerSlider.d.ts +3 -4
- package/dist/registerSliderOutput.d.ts +3 -4
- package/dist/registerSliderThumb.d.ts +4 -5
- package/dist/registerSliderTrack.d.ts +3 -4
- package/dist/registerSwitch.d.ts +3 -4
- package/dist/registerTextArea.d.ts +3 -4
- package/dist/registerTextField.d.ts +3 -4
- package/dist/{interaction-variant-utils.d.ts → variant-utils.d.ts} +11 -8
- package/package.json +3 -3
- package/skinny/registerButton.cjs.js +7 -18
- package/skinny/registerButton.cjs.js.map +1 -1
- package/skinny/registerButton.d.ts +3 -4
- package/skinny/registerButton.esm.js +7 -18
- package/skinny/registerButton.esm.js.map +1 -1
- package/skinny/registerCheckbox.cjs.js +7 -9
- package/skinny/registerCheckbox.cjs.js.map +1 -1
- package/skinny/registerCheckbox.d.ts +3 -4
- package/skinny/registerCheckbox.esm.js +7 -9
- package/skinny/registerCheckbox.esm.js.map +1 -1
- package/skinny/registerCheckboxGroup.cjs.js +8 -11
- package/skinny/registerCheckboxGroup.cjs.js.map +1 -1
- package/skinny/registerCheckboxGroup.d.ts +3 -4
- package/skinny/registerCheckboxGroup.esm.js +8 -11
- package/skinny/registerCheckboxGroup.esm.js.map +1 -1
- package/skinny/registerComboBox.cjs.js +1 -1
- package/skinny/registerComboBox.esm.js +1 -1
- package/skinny/registerDialogTrigger.cjs.js +1 -1
- package/skinny/registerDialogTrigger.esm.js +1 -1
- package/skinny/registerInput.cjs.js +12 -14
- package/skinny/registerInput.cjs.js.map +1 -1
- package/skinny/registerInput.d.ts +3 -4
- package/skinny/registerInput.esm.js +12 -14
- package/skinny/registerInput.esm.js.map +1 -1
- package/skinny/registerListBox.cjs.js +1 -1
- package/skinny/registerListBox.esm.js +1 -1
- package/skinny/registerListBoxItem.cjs.js +7 -17
- package/skinny/registerListBoxItem.cjs.js.map +1 -1
- package/skinny/registerListBoxItem.d.ts +5 -5
- package/skinny/registerListBoxItem.esm.js +7 -17
- package/skinny/registerListBoxItem.esm.js.map +1 -1
- package/skinny/registerRadio.cjs.js +6 -8
- package/skinny/registerRadio.cjs.js.map +1 -1
- package/skinny/registerRadio.d.ts +3 -4
- package/skinny/registerRadio.esm.js +6 -8
- package/skinny/registerRadio.esm.js.map +1 -1
- package/skinny/registerRadioGroup.cjs.js +7 -12
- package/skinny/registerRadioGroup.cjs.js.map +1 -1
- package/skinny/registerRadioGroup.d.ts +3 -4
- package/skinny/registerRadioGroup.esm.js +7 -12
- package/skinny/registerRadioGroup.esm.js.map +1 -1
- package/skinny/registerSelect.cjs.js +1 -1
- package/skinny/registerSelect.esm.js +1 -1
- package/skinny/registerSlider.cjs.js +7 -9
- package/skinny/registerSlider.cjs.js.map +1 -1
- package/skinny/registerSlider.d.ts +3 -4
- package/skinny/registerSlider.esm.js +7 -9
- package/skinny/registerSlider.esm.js.map +1 -1
- package/skinny/registerSliderOutput.cjs.js +7 -7
- package/skinny/registerSliderOutput.cjs.js.map +1 -1
- package/skinny/registerSliderOutput.d.ts +3 -4
- package/skinny/registerSliderOutput.esm.js +7 -7
- package/skinny/registerSliderOutput.esm.js.map +1 -1
- package/skinny/registerSliderThumb.cjs.js +8 -8
- package/skinny/registerSliderThumb.cjs.js.map +1 -1
- package/skinny/registerSliderThumb.d.ts +4 -5
- package/skinny/registerSliderThumb.esm.js +8 -8
- package/skinny/registerSliderThumb.esm.js.map +1 -1
- package/skinny/registerSliderTrack.cjs.js +7 -7
- package/skinny/registerSliderTrack.cjs.js.map +1 -1
- package/skinny/registerSliderTrack.d.ts +3 -4
- package/skinny/registerSliderTrack.esm.js +7 -7
- package/skinny/registerSliderTrack.esm.js.map +1 -1
- package/skinny/registerSwitch.cjs.js +7 -9
- package/skinny/registerSwitch.cjs.js.map +1 -1
- package/skinny/registerSwitch.d.ts +3 -4
- package/skinny/registerSwitch.esm.js +7 -9
- package/skinny/registerSwitch.esm.js.map +1 -1
- package/skinny/registerTextArea.cjs.js +10 -12
- package/skinny/registerTextArea.cjs.js.map +1 -1
- package/skinny/registerTextArea.d.ts +3 -4
- package/skinny/registerTextArea.esm.js +10 -12
- package/skinny/registerTextArea.esm.js.map +1 -1
- package/skinny/registerTextField.cjs.js +6 -11
- package/skinny/registerTextField.cjs.js.map +1 -1
- package/skinny/registerTextField.d.ts +3 -4
- package/skinny/registerTextField.esm.js +6 -11
- package/skinny/registerTextField.esm.js.map +1 -1
- package/skinny/{interaction-variant-utils-1d94d073.esm.js → variant-utils-23360776.esm.js} +11 -18
- package/skinny/variant-utils-23360776.esm.js.map +1 -0
- package/skinny/{interaction-variant-utils-9a869063.cjs.js → variant-utils-db5b9590.cjs.js} +11 -18
- package/skinny/variant-utils-db5b9590.cjs.js.map +1 -0
- package/skinny/{interaction-variant-utils.d.ts → variant-utils.d.ts} +11 -8
- package/skinny/interaction-variant-utils-1d94d073.esm.js.map +0 -1
- package/skinny/interaction-variant-utils-9a869063.cjs.js.map +0 -1
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SliderOutput } from "react-aria-components";
|
|
3
|
-
import { UpdateInteractionVariant } from "./interaction-variant-utils";
|
|
4
3
|
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
import { WithVariants } from "./variant-utils";
|
|
5
|
+
declare const SLIDER_OUTPUT_VARIANTS: "disabled"[];
|
|
6
|
+
export interface BaseSliderOutputProps extends React.ComponentProps<typeof SliderOutput>, WithVariants<typeof SLIDER_OUTPUT_VARIANTS> {
|
|
7
7
|
children?: React.ReactNode;
|
|
8
|
-
updateInteractionVariant?: UpdateInteractionVariant<typeof SLIDER_OUTPUT_INTERACTION_VARIANTS>;
|
|
9
8
|
}
|
|
10
9
|
export declare function BaseSliderOutput(props: BaseSliderOutputProps): React.JSX.Element;
|
|
11
10
|
export declare const SLIDER_OUTPUT_COMPONENT_NAME: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SliderOutput } from 'react-aria-components';
|
|
3
|
-
import { p as pickAriaComponentVariants } from './interaction-variant-utils-1d94d073.esm.js';
|
|
4
3
|
import { a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
|
|
4
|
+
import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
|
|
5
5
|
import '@plasmicapp/host/registerComponent';
|
|
6
6
|
|
|
7
7
|
var __defProp = Object.defineProperty;
|
|
@@ -32,18 +32,18 @@ var __objRest = (source, exclude) => {
|
|
|
32
32
|
}
|
|
33
33
|
return target;
|
|
34
34
|
};
|
|
35
|
-
const
|
|
36
|
-
const {
|
|
37
|
-
|
|
35
|
+
const SLIDER_OUTPUT_VARIANTS = ["disabled"];
|
|
36
|
+
const { variants, withObservedValues } = pickAriaComponentVariants(
|
|
37
|
+
SLIDER_OUTPUT_VARIANTS
|
|
38
38
|
);
|
|
39
39
|
function BaseSliderOutput(props) {
|
|
40
|
-
const _a = props, {
|
|
40
|
+
const _a = props, { updateVariant, children } = _a, rest = __objRest(_a, ["updateVariant", "children"]);
|
|
41
41
|
return /* @__PURE__ */ React.createElement(SliderOutput, __spreadValues({}, rest), ({ isDisabled }) => withObservedValues(
|
|
42
42
|
children,
|
|
43
43
|
{
|
|
44
44
|
disabled: isDisabled
|
|
45
45
|
},
|
|
46
|
-
|
|
46
|
+
updateVariant
|
|
47
47
|
));
|
|
48
48
|
}
|
|
49
49
|
const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName("sliderOutput");
|
|
@@ -56,7 +56,7 @@ function registerSliderOutput(loader, overrides) {
|
|
|
56
56
|
displayName: "Aria Slider Output",
|
|
57
57
|
importPath: "@plasmicpkgs/react-aria/skinny/registerSliderOutput",
|
|
58
58
|
importName: "BaseSliderOutput",
|
|
59
|
-
|
|
59
|
+
variants,
|
|
60
60
|
props: {
|
|
61
61
|
children: { type: "slot" }
|
|
62
62
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSliderOutput.esm.js","sources":["../src/registerSliderOutput.tsx"],"sourcesContent":["import React from \"react\";\nimport { SliderOutput } from \"react-aria-components\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"registerSliderOutput.esm.js","sources":["../src/registerSliderOutput.tsx"],"sourcesContent":["import React from \"react\";\nimport { SliderOutput } from \"react-aria-components\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_OUTPUT_VARIANTS = [\"disabled\" as const];\nexport interface BaseSliderOutputProps\n extends React.ComponentProps<typeof SliderOutput>,\n WithVariants<typeof SLIDER_OUTPUT_VARIANTS> {\n children?: React.ReactNode;\n}\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_OUTPUT_VARIANTS\n);\n\nexport function BaseSliderOutput(props: BaseSliderOutputProps) {\n const { updateVariant, children, ...rest } = props;\n return (\n <SliderOutput {...rest}>\n {({ isDisabled }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n },\n updateVariant\n )\n }\n </SliderOutput>\n );\n}\n\nexport const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName(\"sliderOutput\");\n\nexport function registerSliderOutput(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderOutput>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderOutput,\n {\n name: SLIDER_OUTPUT_COMPONENT_NAME,\n displayName: \"Aria Slider Output\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderOutput\",\n importName: \"BaseSliderOutput\",\n variants,\n props: {\n children: { type: \"slot\" },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,sBAAA,GAAyB,CAAC,UAAmB,CAAA,CAAA;AAOnD,MAAM,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,yBAAA;AAAA,EACvC,sBAAA;AACF,CAAA,CAAA;AAEO,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAA6C,MAAA,EAAA,GAAA,KAAA,EAArC,iBAAe,QAtBzB,EAAA,GAsB+C,IAAT,IAAS,GAAA,SAAA,CAAA,EAAA,EAAT,CAA5B,eAAe,EAAA,UAAA,CAAA,CAAA,CAAA;AACvB,EAAA,2CACG,YAAiB,EAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EACf,CAAC,EAAE,YACF,KAAA,kBAAA;AAAA,IACE,QAAA;AAAA,IACA;AAAA,MACE,QAAU,EAAA,UAAA;AAAA,KACZ;AAAA,IACA,aAAA;AAAA,GAGN,CAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,4BAAA,GAA+B,kBAAkB,cAAc,EAAA;AAE5D,SAAA,oBAAA,CACd,QACA,SACA,EAAA;AACA,EAAO,OAAA,uBAAA;AAAA,IACL,MAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,4BAAA;AAAA,MACN,WAAa,EAAA,oBAAA;AAAA,MACb,UAAY,EAAA,qDAAA;AAAA,MACZ,UAAY,EAAA,kBAAA;AAAA,MACZ,QAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAA,EAAU,EAAE,IAAA,EAAM,MAAO,EAAA;AAAA,OAC3B;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -5,8 +5,8 @@ var reactAria = require('react-aria');
|
|
|
5
5
|
var reactAriaComponents = require('react-aria-components');
|
|
6
6
|
var common = require('./common-c892c339.cjs.js');
|
|
7
7
|
var contexts = require('./contexts-c26d68f8.cjs.js');
|
|
8
|
-
var interactionVariantUtils = require('./interaction-variant-utils-9a869063.cjs.js');
|
|
9
8
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
9
|
+
var variantUtils = require('./variant-utils-db5b9590.cjs.js');
|
|
10
10
|
require('@plasmicapp/host/registerComponent');
|
|
11
11
|
|
|
12
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -60,25 +60,25 @@ var __objRest = (source, exclude) => {
|
|
|
60
60
|
}
|
|
61
61
|
return target;
|
|
62
62
|
};
|
|
63
|
-
const
|
|
63
|
+
const SLIDER_THUMB_VARIANTS = [
|
|
64
64
|
"dragging",
|
|
65
65
|
"hovered",
|
|
66
66
|
"focused",
|
|
67
67
|
"focusVisible",
|
|
68
68
|
"disabled"
|
|
69
69
|
];
|
|
70
|
-
const {
|
|
71
|
-
|
|
70
|
+
const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(
|
|
71
|
+
SLIDER_THUMB_VARIANTS
|
|
72
72
|
);
|
|
73
73
|
function BaseSliderThumb(_a) {
|
|
74
74
|
var _b = _a, {
|
|
75
75
|
children,
|
|
76
76
|
advanced,
|
|
77
|
-
|
|
77
|
+
updateVariant
|
|
78
78
|
} = _b, rest = __objRest(_b, [
|
|
79
79
|
"children",
|
|
80
80
|
"advanced",
|
|
81
|
-
"
|
|
81
|
+
"updateVariant"
|
|
82
82
|
]);
|
|
83
83
|
const context = React__default.default.useContext(contexts.PlasmicSliderContext);
|
|
84
84
|
const mergedProps = reactAria.mergeProps(context, rest);
|
|
@@ -91,7 +91,7 @@ function BaseSliderThumb(_a) {
|
|
|
91
91
|
focusVisible: isFocusVisible,
|
|
92
92
|
disabled: isDisabled
|
|
93
93
|
},
|
|
94
|
-
|
|
94
|
+
updateVariant
|
|
95
95
|
));
|
|
96
96
|
return /* @__PURE__ */ React__default.default.createElement(
|
|
97
97
|
ErrorBoundary,
|
|
@@ -120,7 +120,7 @@ function registerSliderThumb(loader, overrides) {
|
|
|
120
120
|
borderRadius: "100%",
|
|
121
121
|
cursor: "pointer"
|
|
122
122
|
},
|
|
123
|
-
|
|
123
|
+
variants,
|
|
124
124
|
props: __spreadProps(__spreadValues({}, common.getCommonProps("slider thumb", [
|
|
125
125
|
"name",
|
|
126
126
|
"isDisabled",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSliderThumb.cjs.js","sources":["../src/ErrorBoundary.tsx","../src/registerSliderThumb.tsx"],"sourcesContent":["import { Component, ReactNode } from \"react\";\n\ninterface ErrorBoundaryProps {\n children: ReactNode;\n fallback: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(_: Error): ErrorBoundaryState {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n render() {\n if (this.state.hasError) {\n return this.props.fallback;\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import React from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumb, SliderTrack } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport ErrorBoundary from \"./ErrorBoundary\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"registerSliderThumb.cjs.js","sources":["../src/ErrorBoundary.tsx","../src/registerSliderThumb.tsx"],"sourcesContent":["import { Component, ReactNode } from \"react\";\n\ninterface ErrorBoundaryProps {\n children: ReactNode;\n fallback: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(_: Error): ErrorBoundaryState {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n render() {\n if (this.state.hasError) {\n return this.props.fallback;\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import React from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumb, SliderTrack } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport ErrorBoundary from \"./ErrorBoundary\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_THUMB_VARIANTS = [\n \"dragging\" as const,\n \"hovered\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_THUMB_VARIANTS\n);\nexport interface BaseSliderThumbProps\n extends React.ComponentProps<typeof SliderThumb>,\n WithVariants<typeof SLIDER_THUMB_VARIANTS> {\n advanced?: boolean;\n}\n\nexport function BaseSliderThumb({\n children,\n advanced,\n updateVariant,\n ...rest\n}: BaseSliderThumbProps) {\n const context = React.useContext(PlasmicSliderContext);\n const mergedProps = mergeProps(context, rest);\n\n const thumb = (\n <SliderThumb {...mergedProps}>\n {({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) =>\n withObservedValues(\n <>{advanced ? children : undefined}</>,\n {\n dragging: isDragging,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: isDisabled,\n },\n updateVariant\n )\n }\n </SliderThumb>\n );\n\n return (\n <ErrorBoundary\n // If the Slider Thumb is the root of a Studio component, then we need to wrap the thumb in a track\n // to ensure that the thumb gets the required Slider context\n fallback={\n <Slider style={{ height: \"100%\", width: \"100%\" }}>\n <SliderTrack>{thumb}</SliderTrack>\n </Slider>\n }\n >\n {thumb}\n </ErrorBoundary>\n );\n}\n\nexport const SLIDER_THUMB_COMPONENT_NAME = makeComponentName(\"sliderThumb\");\n\nexport function registerSliderThumb(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderThumb>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderThumb,\n {\n name: SLIDER_THUMB_COMPONENT_NAME,\n displayName: \"Aria Slider Thumb\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderThumb\",\n importName: \"BaseSliderThumb\",\n defaultStyles: {\n position: \"absolute\",\n top: \"5px\",\n width: \"20px\",\n height: \"20px\",\n backgroundColor: \"#C80101\",\n borderRadius: \"100%\",\n cursor: \"pointer\",\n },\n variants,\n props: {\n ...getCommonProps<BaseSliderThumbProps>(\"slider thumb\", [\n \"name\",\n \"isDisabled\",\n \"autoFocus\",\n ]),\n advanced: {\n type: \"boolean\",\n displayName: \"Advanced\",\n description:\n \"Enables the children slot for creating a more customized thumb\",\n },\n children: {\n type: \"slot\",\n hidden: (ps: BaseSliderThumbProps) => !ps.advanced,\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["Component","pickAriaComponentVariants","React","PlasmicSliderContext","mergeProps","SliderThumb","Slider","SliderTrack","makeComponentName","registerComponentHelper","getCommonProps"],"mappings":"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"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { SliderThumb } from "react-aria-components";
|
|
3
|
-
import { UpdateInteractionVariant } from "./interaction-variant-utils";
|
|
4
3
|
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
import { WithVariants } from "./variant-utils";
|
|
5
|
+
declare const SLIDER_THUMB_VARIANTS: ("disabled" | "hovered" | "focused" | "focusVisible" | "dragging")[];
|
|
6
|
+
export interface BaseSliderThumbProps extends React.ComponentProps<typeof SliderThumb>, WithVariants<typeof SLIDER_THUMB_VARIANTS> {
|
|
7
7
|
advanced?: boolean;
|
|
8
|
-
updateInteractionVariant?: UpdateInteractionVariant<typeof SLIDER_THUMB_INTERACTION_VARIANTS>;
|
|
9
8
|
}
|
|
10
|
-
export declare function BaseSliderThumb({ children, advanced,
|
|
9
|
+
export declare function BaseSliderThumb({ children, advanced, updateVariant, ...rest }: BaseSliderThumbProps): React.JSX.Element;
|
|
11
10
|
export declare const SLIDER_THUMB_COMPONENT_NAME: string;
|
|
12
11
|
export declare function registerSliderThumb(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseSliderThumb>): import("@plasmicapp/host").CodeComponentMeta<BaseSliderThumbProps>;
|
|
13
12
|
export {};
|
|
@@ -3,8 +3,8 @@ import { mergeProps } from 'react-aria';
|
|
|
3
3
|
import { SliderThumb, Slider, SliderTrack } from 'react-aria-components';
|
|
4
4
|
import { g as getCommonProps } from './common-8ca74873.esm.js';
|
|
5
5
|
import { e as PlasmicSliderContext } from './contexts-0a2977d8.esm.js';
|
|
6
|
-
import { p as pickAriaComponentVariants } from './interaction-variant-utils-1d94d073.esm.js';
|
|
7
6
|
import { a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
|
|
7
|
+
import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
|
|
8
8
|
import '@plasmicapp/host/registerComponent';
|
|
9
9
|
|
|
10
10
|
class ErrorBoundary extends Component {
|
|
@@ -54,25 +54,25 @@ var __objRest = (source, exclude) => {
|
|
|
54
54
|
}
|
|
55
55
|
return target;
|
|
56
56
|
};
|
|
57
|
-
const
|
|
57
|
+
const SLIDER_THUMB_VARIANTS = [
|
|
58
58
|
"dragging",
|
|
59
59
|
"hovered",
|
|
60
60
|
"focused",
|
|
61
61
|
"focusVisible",
|
|
62
62
|
"disabled"
|
|
63
63
|
];
|
|
64
|
-
const {
|
|
65
|
-
|
|
64
|
+
const { variants, withObservedValues } = pickAriaComponentVariants(
|
|
65
|
+
SLIDER_THUMB_VARIANTS
|
|
66
66
|
);
|
|
67
67
|
function BaseSliderThumb(_a) {
|
|
68
68
|
var _b = _a, {
|
|
69
69
|
children,
|
|
70
70
|
advanced,
|
|
71
|
-
|
|
71
|
+
updateVariant
|
|
72
72
|
} = _b, rest = __objRest(_b, [
|
|
73
73
|
"children",
|
|
74
74
|
"advanced",
|
|
75
|
-
"
|
|
75
|
+
"updateVariant"
|
|
76
76
|
]);
|
|
77
77
|
const context = React.useContext(PlasmicSliderContext);
|
|
78
78
|
const mergedProps = mergeProps(context, rest);
|
|
@@ -85,7 +85,7 @@ function BaseSliderThumb(_a) {
|
|
|
85
85
|
focusVisible: isFocusVisible,
|
|
86
86
|
disabled: isDisabled
|
|
87
87
|
},
|
|
88
|
-
|
|
88
|
+
updateVariant
|
|
89
89
|
));
|
|
90
90
|
return /* @__PURE__ */ React.createElement(
|
|
91
91
|
ErrorBoundary,
|
|
@@ -114,7 +114,7 @@ function registerSliderThumb(loader, overrides) {
|
|
|
114
114
|
borderRadius: "100%",
|
|
115
115
|
cursor: "pointer"
|
|
116
116
|
},
|
|
117
|
-
|
|
117
|
+
variants,
|
|
118
118
|
props: __spreadProps(__spreadValues({}, getCommonProps("slider thumb", [
|
|
119
119
|
"name",
|
|
120
120
|
"isDisabled",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSliderThumb.esm.js","sources":["../src/ErrorBoundary.tsx","../src/registerSliderThumb.tsx"],"sourcesContent":["import { Component, ReactNode } from \"react\";\n\ninterface ErrorBoundaryProps {\n children: ReactNode;\n fallback: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(_: Error): ErrorBoundaryState {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n render() {\n if (this.state.hasError) {\n return this.props.fallback;\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import React from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumb, SliderTrack } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport ErrorBoundary from \"./ErrorBoundary\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"registerSliderThumb.esm.js","sources":["../src/ErrorBoundary.tsx","../src/registerSliderThumb.tsx"],"sourcesContent":["import { Component, ReactNode } from \"react\";\n\ninterface ErrorBoundaryProps {\n children: ReactNode;\n fallback: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n hasError: boolean;\n}\n\nclass ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n constructor(props: ErrorBoundaryProps) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(_: Error): ErrorBoundaryState {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n render() {\n if (this.state.hasError) {\n return this.props.fallback;\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import React from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumb, SliderTrack } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport ErrorBoundary from \"./ErrorBoundary\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_THUMB_VARIANTS = [\n \"dragging\" as const,\n \"hovered\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_THUMB_VARIANTS\n);\nexport interface BaseSliderThumbProps\n extends React.ComponentProps<typeof SliderThumb>,\n WithVariants<typeof SLIDER_THUMB_VARIANTS> {\n advanced?: boolean;\n}\n\nexport function BaseSliderThumb({\n children,\n advanced,\n updateVariant,\n ...rest\n}: BaseSliderThumbProps) {\n const context = React.useContext(PlasmicSliderContext);\n const mergedProps = mergeProps(context, rest);\n\n const thumb = (\n <SliderThumb {...mergedProps}>\n {({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) =>\n withObservedValues(\n <>{advanced ? children : undefined}</>,\n {\n dragging: isDragging,\n hovered: isHovered,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: isDisabled,\n },\n updateVariant\n )\n }\n </SliderThumb>\n );\n\n return (\n <ErrorBoundary\n // If the Slider Thumb is the root of a Studio component, then we need to wrap the thumb in a track\n // to ensure that the thumb gets the required Slider context\n fallback={\n <Slider style={{ height: \"100%\", width: \"100%\" }}>\n <SliderTrack>{thumb}</SliderTrack>\n </Slider>\n }\n >\n {thumb}\n </ErrorBoundary>\n );\n}\n\nexport const SLIDER_THUMB_COMPONENT_NAME = makeComponentName(\"sliderThumb\");\n\nexport function registerSliderThumb(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderThumb>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderThumb,\n {\n name: SLIDER_THUMB_COMPONENT_NAME,\n displayName: \"Aria Slider Thumb\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderThumb\",\n importName: \"BaseSliderThumb\",\n defaultStyles: {\n position: \"absolute\",\n top: \"5px\",\n width: \"20px\",\n height: \"20px\",\n backgroundColor: \"#C80101\",\n borderRadius: \"100%\",\n cursor: \"pointer\",\n },\n variants,\n props: {\n ...getCommonProps<BaseSliderThumbProps>(\"slider thumb\", [\n \"name\",\n \"isDisabled\",\n \"autoFocus\",\n ]),\n advanced: {\n type: \"boolean\",\n displayName: \"Advanced\",\n description:\n \"Enables the children slot for creating a more customized thumb\",\n },\n children: {\n type: \"slot\",\n hidden: (ps: BaseSliderThumbProps) => !ps.advanced,\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,sBAAsB,SAAkD,CAAA;AAAA,EAC5E,YAAY,KAA2B,EAAA;AACrC,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,QAAA,EAAU,KAAM,EAAA,CAAA;AAAA,GACjC;AAAA,EAEA,OAAO,yBAAyB,CAA8B,EAAA;AAE5D,IAAO,OAAA,EAAE,UAAU,IAAK,EAAA,CAAA;AAAA,GAC1B;AAAA,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,QAAU,EAAA;AACvB,MAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAAA,KACpB;AAEA,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAAA,GACpB;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACfA,MAAM,qBAAwB,GAAA;AAAA,EAC5B,UAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AACF,CAAA,CAAA;AAEA,MAAM,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,yBAAA;AAAA,EACvC,qBAAA;AACF,CAAA,CAAA;AAOO,SAAS,gBAAgB,EAKP,EAAA;AALO,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,GAlCF,GA+BgC,EAI3B,EAAA,IAAA,GAAA,SAAA,CAJ2B,EAI3B,EAAA;AAAA,IAHH,UAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAM,MAAA,OAAA,GAAU,KAAM,CAAA,UAAA,CAAW,oBAAoB,CAAA,CAAA;AACrD,EAAM,MAAA,WAAA,GAAc,UAAW,CAAA,OAAA,EAAS,IAAI,CAAA,CAAA;AAE5C,EAAM,MAAA,KAAA,mBACH,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,cAAA,CAAA,EAAA,EAAgB,WACd,CAAA,EAAA,CAAC,EAAE,UAAA,EAAY,SAAW,EAAA,SAAA,EAAW,cAAgB,EAAA,UAAA,EACpD,KAAA,kBAAA;AAAA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,QAAW,GAAA,QAAA,GAAW,KAAU,CAAA,CAAA;AAAA,IACnC;AAAA,MACE,QAAU,EAAA,UAAA;AAAA,MACV,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA,MACT,YAAc,EAAA,cAAA;AAAA,MACd,QAAU,EAAA,UAAA;AAAA,KACZ;AAAA,IACA,aAAA;AAAA,GAGN,CAAA,CAAA;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MAGC,QACE,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAQ,EAAA,KAAA,EAAO,MAAO,EAAA,EAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAa,KAAM,CACtB,CAAA;AAAA,KAAA;AAAA,IAGD,KAAA;AAAA,GACH,CAAA;AAEJ,CAAA;AAEa,MAAA,2BAAA,GAA8B,kBAAkB,aAAa,EAAA;AAE1D,SAAA,mBAAA,CACd,QACA,SACA,EAAA;AACA,EAAO,OAAA,uBAAA;AAAA,IACL,MAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,2BAAA;AAAA,MACN,WAAa,EAAA,mBAAA;AAAA,MACb,UAAY,EAAA,oDAAA;AAAA,MACZ,UAAY,EAAA,iBAAA;AAAA,MACZ,aAAe,EAAA;AAAA,QACb,QAAU,EAAA,UAAA;AAAA,QACV,GAAK,EAAA,KAAA;AAAA,QACL,KAAO,EAAA,MAAA;AAAA,QACP,MAAQ,EAAA,MAAA;AAAA,QACR,eAAiB,EAAA,SAAA;AAAA,QACjB,YAAc,EAAA,MAAA;AAAA,QACd,MAAQ,EAAA,SAAA;AAAA,OACV;AAAA,MACA,QAAA;AAAA,MACA,KAAA,EAAO,aACF,CAAA,cAAA,CAAA,EAAA,EAAA,cAAA,CAAqC,cAAgB,EAAA;AAAA,QACtD,MAAA;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,OACD,CALI,CAAA,EAAA;AAAA,QAML,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,UAAA;AAAA,UACb,WACE,EAAA,gEAAA;AAAA,SACJ;AAAA,QACA,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,MAAQ,EAAA,CAAC,EAA6B,KAAA,CAAC,EAAG,CAAA,QAAA;AAAA,SAC5C;AAAA,OACF,CAAA;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -5,8 +5,8 @@ var reactAria = require('react-aria');
|
|
|
5
5
|
var reactAriaComponents = require('react-aria-components');
|
|
6
6
|
var flattenChildren = require('react-keyed-flatten-children');
|
|
7
7
|
var contexts = require('./contexts-c26d68f8.cjs.js');
|
|
8
|
-
var interactionVariantUtils = require('./interaction-variant-utils-9a869063.cjs.js');
|
|
9
8
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
9
|
+
var variantUtils = require('./variant-utils-db5b9590.cjs.js');
|
|
10
10
|
require('@plasmicapp/host/registerComponent');
|
|
11
11
|
|
|
12
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -42,9 +42,9 @@ var __objRest = (source, exclude) => {
|
|
|
42
42
|
}
|
|
43
43
|
return target;
|
|
44
44
|
};
|
|
45
|
-
const
|
|
46
|
-
const {
|
|
47
|
-
|
|
45
|
+
const SLIDER_TRACK_VARIANTS = ["hovered"];
|
|
46
|
+
const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(
|
|
47
|
+
SLIDER_TRACK_VARIANTS
|
|
48
48
|
);
|
|
49
49
|
function findMinMaxIndices(values) {
|
|
50
50
|
let minIndex = 0;
|
|
@@ -68,7 +68,7 @@ function BaseSliderTrack(props) {
|
|
|
68
68
|
const context = React__default.default.useContext(contexts.PlasmicSliderContext);
|
|
69
69
|
const isStandalone = !context;
|
|
70
70
|
const mergedProps = reactAria.mergeProps(context, props);
|
|
71
|
-
const _a = mergedProps, { children, progressBar,
|
|
71
|
+
const _a = mergedProps, { children, progressBar, updateVariant } = _a, rest = __objRest(_a, ["children", "progressBar", "updateVariant"]);
|
|
72
72
|
const isMultiValue = isMultiValueGuard(mergedProps.value);
|
|
73
73
|
const { minIndex, maxIndex } = React.useMemo(() => {
|
|
74
74
|
if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
|
|
@@ -117,7 +117,7 @@ function BaseSliderTrack(props) {
|
|
|
117
117
|
{
|
|
118
118
|
hovered: isHovered
|
|
119
119
|
},
|
|
120
|
-
|
|
120
|
+
updateVariant
|
|
121
121
|
)));
|
|
122
122
|
if (isStandalone) {
|
|
123
123
|
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, { style: { height: "100%", width: "100%" } }, track);
|
|
@@ -134,7 +134,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
|
|
|
134
134
|
displayName: "Aria Slider Track",
|
|
135
135
|
importPath: "@plasmicpkgs/react-aria/skinny/registerSliderTrack",
|
|
136
136
|
importName: "BaseSliderTrack",
|
|
137
|
-
|
|
137
|
+
variants,
|
|
138
138
|
defaultStyles: {
|
|
139
139
|
width: "stretch",
|
|
140
140
|
backgroundColor: "#aaa",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSliderTrack.cjs.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport {\n UpdateInteractionVariant,\n pickAriaComponentVariants,\n} from \"./interaction-variant-utils\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n isDefined,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\n\nconst SLIDER_TRACK_INTERACTION_VARIANTS = [\"hovered\" as const];\n\nconst { interactionVariants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_TRACK_INTERACTION_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n extends React.ComponentProps<typeof SliderTrack> {\n progressBar?: React.ReactNode;\n // Optional callback to update the interaction variant state\n // as it's only provided if the component is the root of a Studio component\n updateInteractionVariant?: UpdateInteractionVariant<\n typeof SLIDER_TRACK_INTERACTION_VARIANTS\n >;\n children?: React.ReactElement<HTMLElement>;\n}\n\n/**\n * Finds the index of the minimum and maximum values in the slider\n * @param values\n * @returns\n */\nfunction findMinMaxIndices(values: number[]): {\n minIndex: number;\n maxIndex: number;\n} {\n let minIndex = 0;\n let maxIndex = 0;\n\n if (Array.isArray(values)) {\n for (let i = 1; i < values.length; i++) {\n if (values[i] < values[minIndex]) {\n minIndex = i;\n }\n if (values[i] > values[maxIndex]) {\n maxIndex = i;\n }\n }\n }\n\n return { minIndex, maxIndex };\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n const context = React.useContext(PlasmicSliderContext);\n const isStandalone = !context;\n const mergedProps = mergeProps(context, props);\n const { children, progressBar, updateInteractionVariant, ...rest } =\n mergedProps;\n\n const isMultiValue = isMultiValueGuard(mergedProps.value);\n\n const { minIndex, maxIndex } = useMemo(() => {\n if (\n !context ||\n !Array.isArray(context.value) ||\n context.value.length <= 1\n ) {\n return { minIndex: 0, maxIndex: 0 };\n }\n return findMinMaxIndices(context.value);\n }, [context?.value]);\n\n /**\n * Generates the thumb components based on the number of thumbs\n * and the number of values in the slider\n *\n * If the number of thumbs is less than the number of values, then\n * the last thumb is repeated for the remaining values\n *\n * If the number of thumbs is greater than the number of values, then\n * the additional thumbs are omitted\n */\n const thumbs = useMemo(() => {\n const thumbNodes = flattenChildren(children);\n if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n return [];\n }\n\n const values = isDefined(context)\n ? Array.isArray(context.value)\n ? context.value\n : [context.value]\n : [];\n\n // Last thumb be re-used if the number of thumbs is less than the number of values\n const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n return values.map((v, i) => {\n const currentThumb = thumbNodes[i];\n // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n if (i >= thumbNodes.length) {\n if (React.isValidElement(lastThumb)) {\n return React.cloneElement(lastThumb, {\n index: i,\n } as SliderThumbProps);\n }\n }\n if (!React.isValidElement(currentThumb)) {\n return null;\n }\n return React.cloneElement(currentThumb, {\n index: i,\n } as SliderThumbProps);\n });\n }, [children, context?.value]);\n\n const track = (\n <SliderTrack style={{ position: \"relative\" }} {...rest}>\n {({ state, isHovered }) => (\n <>\n {withObservedValues(\n <>\n <div\n style={{\n width: `${\n (!isMultiValue\n ? state.getThumbPercent(minIndex)\n : state.getThumbPercent(maxIndex) -\n state.getThumbPercent(minIndex)) * 100\n }%`,\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: !isMultiValue\n ? 0\n : state.getThumbPercent(minIndex) * 100 + \"%\",\n }}\n >\n {progressBar}\n </div>\n {thumbs}\n </>,\n {\n hovered: isHovered,\n },\n updateInteractionVariant\n )}\n </>\n )}\n </SliderTrack>\n );\n\n if (isStandalone) {\n return <Slider style={{ height: \"100%\", width: \"100%\" }}>{track}</Slider>;\n }\n\n return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderTrack,\n {\n name: SLIDER_TRACK_COMPONENT_NAME,\n displayName: \"Aria Slider Track\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n importName: \"BaseSliderTrack\",\n interactionVariants,\n defaultStyles: {\n width: \"stretch\",\n backgroundColor: \"#aaa\",\n position: \"relative\",\n height: \"10px\",\n padding: 0,\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"Thumbs\",\n description:\n \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n allowedComponents: [sliderThumbMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n ],\n },\n progressBar: {\n type: \"slot\",\n displayName: \"Progress Bar\",\n defaultValue: [\n {\n type: \"box\",\n styles: {\n height: \"100%\",\n width: \"100%\",\n backgroundColor: \"#ffa6a6\",\n padding: 0,\n },\n },\n ],\n },\n onHoverStart: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicSliderContext","mergeProps","useMemo","flattenChildren","isDefined","SliderTrack","Slider","makeComponentName","registerComponentHelper"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerSliderTrack.cjs.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n isDefined,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_TRACK_VARIANTS = [\"hovered\" as const];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_TRACK_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n extends React.ComponentProps<typeof SliderTrack>,\n WithVariants<typeof SLIDER_TRACK_VARIANTS> {\n progressBar?: React.ReactNode;\n children?: React.ReactElement<HTMLElement>;\n}\n\n/**\n * Finds the index of the minimum and maximum values in the slider\n * @param values\n * @returns\n */\nfunction findMinMaxIndices(values: number[]): {\n minIndex: number;\n maxIndex: number;\n} {\n let minIndex = 0;\n let maxIndex = 0;\n\n if (Array.isArray(values)) {\n for (let i = 1; i < values.length; i++) {\n if (values[i] < values[minIndex]) {\n minIndex = i;\n }\n if (values[i] > values[maxIndex]) {\n maxIndex = i;\n }\n }\n }\n\n return { minIndex, maxIndex };\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n const context = React.useContext(PlasmicSliderContext);\n const isStandalone = !context;\n const mergedProps = mergeProps(context, props);\n const { children, progressBar, updateVariant, ...rest } = mergedProps;\n\n const isMultiValue = isMultiValueGuard(mergedProps.value);\n\n const { minIndex, maxIndex } = useMemo(() => {\n if (\n !context ||\n !Array.isArray(context.value) ||\n context.value.length <= 1\n ) {\n return { minIndex: 0, maxIndex: 0 };\n }\n return findMinMaxIndices(context.value);\n }, [context?.value]);\n\n /**\n * Generates the thumb components based on the number of thumbs\n * and the number of values in the slider\n *\n * If the number of thumbs is less than the number of values, then\n * the last thumb is repeated for the remaining values\n *\n * If the number of thumbs is greater than the number of values, then\n * the additional thumbs are omitted\n */\n const thumbs = useMemo(() => {\n const thumbNodes = flattenChildren(children);\n if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n return [];\n }\n\n const values = isDefined(context)\n ? Array.isArray(context.value)\n ? context.value\n : [context.value]\n : [];\n\n // Last thumb be re-used if the number of thumbs is less than the number of values\n const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n return values.map((v, i) => {\n const currentThumb = thumbNodes[i];\n // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n if (i >= thumbNodes.length) {\n if (React.isValidElement(lastThumb)) {\n return React.cloneElement(lastThumb, {\n index: i,\n } as SliderThumbProps);\n }\n }\n if (!React.isValidElement(currentThumb)) {\n return null;\n }\n return React.cloneElement(currentThumb, {\n index: i,\n } as SliderThumbProps);\n });\n }, [children, context?.value]);\n\n const track = (\n <SliderTrack style={{ position: \"relative\" }} {...rest}>\n {({ state, isHovered }) => (\n <>\n {withObservedValues(\n <>\n <div\n style={{\n width: `${\n (!isMultiValue\n ? state.getThumbPercent(minIndex)\n : state.getThumbPercent(maxIndex) -\n state.getThumbPercent(minIndex)) * 100\n }%`,\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: !isMultiValue\n ? 0\n : state.getThumbPercent(minIndex) * 100 + \"%\",\n }}\n >\n {progressBar}\n </div>\n {thumbs}\n </>,\n {\n hovered: isHovered,\n },\n updateVariant\n )}\n </>\n )}\n </SliderTrack>\n );\n\n if (isStandalone) {\n return <Slider style={{ height: \"100%\", width: \"100%\" }}>{track}</Slider>;\n }\n\n return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderTrack,\n {\n name: SLIDER_TRACK_COMPONENT_NAME,\n displayName: \"Aria Slider Track\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n importName: \"BaseSliderTrack\",\n variants,\n defaultStyles: {\n width: \"stretch\",\n backgroundColor: \"#aaa\",\n position: \"relative\",\n height: \"10px\",\n padding: 0,\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"Thumbs\",\n description:\n \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n allowedComponents: [sliderThumbMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n ],\n },\n progressBar: {\n type: \"slot\",\n displayName: \"Progress Bar\",\n defaultValue: [\n {\n type: \"box\",\n styles: {\n height: \"100%\",\n width: \"100%\",\n backgroundColor: \"#ffa6a6\",\n padding: 0,\n },\n },\n ],\n },\n onHoverStart: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicSliderContext","mergeProps","useMemo","flattenChildren","isDefined","SliderTrack","Slider","makeComponentName","registerComponentHelper"],"mappings":"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"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { CodeComponentMeta } from "@plasmicapp/host";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { SliderTrack } from "react-aria-components";
|
|
4
|
-
import { UpdateInteractionVariant } from "./interaction-variant-utils";
|
|
5
4
|
import { BaseSliderThumbProps } from "./registerSliderThumb";
|
|
6
5
|
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
import { WithVariants } from "./variant-utils";
|
|
7
|
+
declare const SLIDER_TRACK_VARIANTS: "hovered"[];
|
|
8
|
+
export interface BaseSliderTrackProps extends React.ComponentProps<typeof SliderTrack>, WithVariants<typeof SLIDER_TRACK_VARIANTS> {
|
|
9
9
|
progressBar?: React.ReactNode;
|
|
10
|
-
updateInteractionVariant?: UpdateInteractionVariant<typeof SLIDER_TRACK_INTERACTION_VARIANTS>;
|
|
11
10
|
children?: React.ReactElement<HTMLElement>;
|
|
12
11
|
}
|
|
13
12
|
export declare function BaseSliderTrack(props: BaseSliderTrackProps): React.JSX.Element;
|
|
@@ -3,8 +3,8 @@ import { mergeProps } from 'react-aria';
|
|
|
3
3
|
import { SliderTrack, Slider } from 'react-aria-components';
|
|
4
4
|
import flattenChildren from 'react-keyed-flatten-children';
|
|
5
5
|
import { e as PlasmicSliderContext } from './contexts-0a2977d8.esm.js';
|
|
6
|
-
import { p as pickAriaComponentVariants } from './interaction-variant-utils-1d94d073.esm.js';
|
|
7
6
|
import { i as isDefined, a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
|
|
7
|
+
import { p as pickAriaComponentVariants } from './variant-utils-23360776.esm.js';
|
|
8
8
|
import '@plasmicapp/host/registerComponent';
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
@@ -35,9 +35,9 @@ var __objRest = (source, exclude) => {
|
|
|
35
35
|
}
|
|
36
36
|
return target;
|
|
37
37
|
};
|
|
38
|
-
const
|
|
39
|
-
const {
|
|
40
|
-
|
|
38
|
+
const SLIDER_TRACK_VARIANTS = ["hovered"];
|
|
39
|
+
const { variants, withObservedValues } = pickAriaComponentVariants(
|
|
40
|
+
SLIDER_TRACK_VARIANTS
|
|
41
41
|
);
|
|
42
42
|
function findMinMaxIndices(values) {
|
|
43
43
|
let minIndex = 0;
|
|
@@ -61,7 +61,7 @@ function BaseSliderTrack(props) {
|
|
|
61
61
|
const context = React.useContext(PlasmicSliderContext);
|
|
62
62
|
const isStandalone = !context;
|
|
63
63
|
const mergedProps = mergeProps(context, props);
|
|
64
|
-
const _a = mergedProps, { children, progressBar,
|
|
64
|
+
const _a = mergedProps, { children, progressBar, updateVariant } = _a, rest = __objRest(_a, ["children", "progressBar", "updateVariant"]);
|
|
65
65
|
const isMultiValue = isMultiValueGuard(mergedProps.value);
|
|
66
66
|
const { minIndex, maxIndex } = useMemo(() => {
|
|
67
67
|
if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
|
|
@@ -110,7 +110,7 @@ function BaseSliderTrack(props) {
|
|
|
110
110
|
{
|
|
111
111
|
hovered: isHovered
|
|
112
112
|
},
|
|
113
|
-
|
|
113
|
+
updateVariant
|
|
114
114
|
)));
|
|
115
115
|
if (isStandalone) {
|
|
116
116
|
return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
|
|
@@ -127,7 +127,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
|
|
|
127
127
|
displayName: "Aria Slider Track",
|
|
128
128
|
importPath: "@plasmicpkgs/react-aria/skinny/registerSliderTrack",
|
|
129
129
|
importName: "BaseSliderTrack",
|
|
130
|
-
|
|
130
|
+
variants,
|
|
131
131
|
defaultStyles: {
|
|
132
132
|
width: "stretch",
|
|
133
133
|
backgroundColor: "#aaa",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSliderTrack.esm.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport {\n UpdateInteractionVariant,\n pickAriaComponentVariants,\n} from \"./interaction-variant-utils\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n isDefined,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\n\nconst SLIDER_TRACK_INTERACTION_VARIANTS = [\"hovered\" as const];\n\nconst { interactionVariants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_TRACK_INTERACTION_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n extends React.ComponentProps<typeof SliderTrack> {\n progressBar?: React.ReactNode;\n // Optional callback to update the interaction variant state\n // as it's only provided if the component is the root of a Studio component\n updateInteractionVariant?: UpdateInteractionVariant<\n typeof SLIDER_TRACK_INTERACTION_VARIANTS\n >;\n children?: React.ReactElement<HTMLElement>;\n}\n\n/**\n * Finds the index of the minimum and maximum values in the slider\n * @param values\n * @returns\n */\nfunction findMinMaxIndices(values: number[]): {\n minIndex: number;\n maxIndex: number;\n} {\n let minIndex = 0;\n let maxIndex = 0;\n\n if (Array.isArray(values)) {\n for (let i = 1; i < values.length; i++) {\n if (values[i] < values[minIndex]) {\n minIndex = i;\n }\n if (values[i] > values[maxIndex]) {\n maxIndex = i;\n }\n }\n }\n\n return { minIndex, maxIndex };\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n const context = React.useContext(PlasmicSliderContext);\n const isStandalone = !context;\n const mergedProps = mergeProps(context, props);\n const { children, progressBar, updateInteractionVariant, ...rest } =\n mergedProps;\n\n const isMultiValue = isMultiValueGuard(mergedProps.value);\n\n const { minIndex, maxIndex } = useMemo(() => {\n if (\n !context ||\n !Array.isArray(context.value) ||\n context.value.length <= 1\n ) {\n return { minIndex: 0, maxIndex: 0 };\n }\n return findMinMaxIndices(context.value);\n }, [context?.value]);\n\n /**\n * Generates the thumb components based on the number of thumbs\n * and the number of values in the slider\n *\n * If the number of thumbs is less than the number of values, then\n * the last thumb is repeated for the remaining values\n *\n * If the number of thumbs is greater than the number of values, then\n * the additional thumbs are omitted\n */\n const thumbs = useMemo(() => {\n const thumbNodes = flattenChildren(children);\n if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n return [];\n }\n\n const values = isDefined(context)\n ? Array.isArray(context.value)\n ? context.value\n : [context.value]\n : [];\n\n // Last thumb be re-used if the number of thumbs is less than the number of values\n const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n return values.map((v, i) => {\n const currentThumb = thumbNodes[i];\n // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n if (i >= thumbNodes.length) {\n if (React.isValidElement(lastThumb)) {\n return React.cloneElement(lastThumb, {\n index: i,\n } as SliderThumbProps);\n }\n }\n if (!React.isValidElement(currentThumb)) {\n return null;\n }\n return React.cloneElement(currentThumb, {\n index: i,\n } as SliderThumbProps);\n });\n }, [children, context?.value]);\n\n const track = (\n <SliderTrack style={{ position: \"relative\" }} {...rest}>\n {({ state, isHovered }) => (\n <>\n {withObservedValues(\n <>\n <div\n style={{\n width: `${\n (!isMultiValue\n ? state.getThumbPercent(minIndex)\n : state.getThumbPercent(maxIndex) -\n state.getThumbPercent(minIndex)) * 100\n }%`,\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: !isMultiValue\n ? 0\n : state.getThumbPercent(minIndex) * 100 + \"%\",\n }}\n >\n {progressBar}\n </div>\n {thumbs}\n </>,\n {\n hovered: isHovered,\n },\n updateInteractionVariant\n )}\n </>\n )}\n </SliderTrack>\n );\n\n if (isStandalone) {\n return <Slider style={{ height: \"100%\", width: \"100%\" }}>{track}</Slider>;\n }\n\n return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderTrack,\n {\n name: SLIDER_TRACK_COMPONENT_NAME,\n displayName: \"Aria Slider Track\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n importName: \"BaseSliderTrack\",\n interactionVariants,\n defaultStyles: {\n width: \"stretch\",\n backgroundColor: \"#aaa\",\n position: \"relative\",\n height: \"10px\",\n padding: 0,\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"Thumbs\",\n description:\n \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n allowedComponents: [sliderThumbMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n ],\n },\n progressBar: {\n type: \"slot\",\n displayName: \"Progress Bar\",\n defaultValue: [\n {\n type: \"box\",\n styles: {\n height: \"100%\",\n width: \"100%\",\n backgroundColor: \"#ffa6a6\",\n padding: 0,\n },\n },\n ],\n },\n onHoverStart: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerSliderTrack.esm.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n isDefined,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_TRACK_VARIANTS = [\"hovered\" as const];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n SLIDER_TRACK_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n extends React.ComponentProps<typeof SliderTrack>,\n WithVariants<typeof SLIDER_TRACK_VARIANTS> {\n progressBar?: React.ReactNode;\n children?: React.ReactElement<HTMLElement>;\n}\n\n/**\n * Finds the index of the minimum and maximum values in the slider\n * @param values\n * @returns\n */\nfunction findMinMaxIndices(values: number[]): {\n minIndex: number;\n maxIndex: number;\n} {\n let minIndex = 0;\n let maxIndex = 0;\n\n if (Array.isArray(values)) {\n for (let i = 1; i < values.length; i++) {\n if (values[i] < values[minIndex]) {\n minIndex = i;\n }\n if (values[i] > values[maxIndex]) {\n maxIndex = i;\n }\n }\n }\n\n return { minIndex, maxIndex };\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n const context = React.useContext(PlasmicSliderContext);\n const isStandalone = !context;\n const mergedProps = mergeProps(context, props);\n const { children, progressBar, updateVariant, ...rest } = mergedProps;\n\n const isMultiValue = isMultiValueGuard(mergedProps.value);\n\n const { minIndex, maxIndex } = useMemo(() => {\n if (\n !context ||\n !Array.isArray(context.value) ||\n context.value.length <= 1\n ) {\n return { minIndex: 0, maxIndex: 0 };\n }\n return findMinMaxIndices(context.value);\n }, [context?.value]);\n\n /**\n * Generates the thumb components based on the number of thumbs\n * and the number of values in the slider\n *\n * If the number of thumbs is less than the number of values, then\n * the last thumb is repeated for the remaining values\n *\n * If the number of thumbs is greater than the number of values, then\n * the additional thumbs are omitted\n */\n const thumbs = useMemo(() => {\n const thumbNodes = flattenChildren(children);\n if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n return [];\n }\n\n const values = isDefined(context)\n ? Array.isArray(context.value)\n ? context.value\n : [context.value]\n : [];\n\n // Last thumb be re-used if the number of thumbs is less than the number of values\n const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n return values.map((v, i) => {\n const currentThumb = thumbNodes[i];\n // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n if (i >= thumbNodes.length) {\n if (React.isValidElement(lastThumb)) {\n return React.cloneElement(lastThumb, {\n index: i,\n } as SliderThumbProps);\n }\n }\n if (!React.isValidElement(currentThumb)) {\n return null;\n }\n return React.cloneElement(currentThumb, {\n index: i,\n } as SliderThumbProps);\n });\n }, [children, context?.value]);\n\n const track = (\n <SliderTrack style={{ position: \"relative\" }} {...rest}>\n {({ state, isHovered }) => (\n <>\n {withObservedValues(\n <>\n <div\n style={{\n width: `${\n (!isMultiValue\n ? state.getThumbPercent(minIndex)\n : state.getThumbPercent(maxIndex) -\n state.getThumbPercent(minIndex)) * 100\n }%`,\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: !isMultiValue\n ? 0\n : state.getThumbPercent(minIndex) * 100 + \"%\",\n }}\n >\n {progressBar}\n </div>\n {thumbs}\n </>,\n {\n hovered: isHovered,\n },\n updateVariant\n )}\n </>\n )}\n </SliderTrack>\n );\n\n if (isStandalone) {\n return <Slider style={{ height: \"100%\", width: \"100%\" }}>{track}</Slider>;\n }\n\n return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n return registerComponentHelper(\n loader,\n BaseSliderTrack,\n {\n name: SLIDER_TRACK_COMPONENT_NAME,\n displayName: \"Aria Slider Track\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n importName: \"BaseSliderTrack\",\n variants,\n defaultStyles: {\n width: \"stretch\",\n backgroundColor: \"#aaa\",\n position: \"relative\",\n height: \"10px\",\n padding: 0,\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"Thumbs\",\n description:\n \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n allowedComponents: [sliderThumbMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n ],\n },\n progressBar: {\n type: \"slot\",\n displayName: \"Progress Bar\",\n defaultValue: [\n {\n type: \"box\",\n styles: {\n height: \"100%\",\n width: \"100%\",\n backgroundColor: \"#ffa6a6\",\n padding: 0,\n },\n },\n ],\n },\n onHoverStart: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n onHoverChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var reactAriaComponents = require('react-aria-components');
|
|
5
5
|
var common = require('./common-c892c339.cjs.js');
|
|
6
|
-
var interactionVariantUtils = require('./interaction-variant-utils-9a869063.cjs.js');
|
|
7
6
|
var registerDescription = require('./registerDescription.cjs.js');
|
|
8
7
|
var registerLabel = require('./registerLabel.cjs.js');
|
|
9
8
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
9
|
+
var variantUtils = require('./variant-utils-db5b9590.cjs.js');
|
|
10
10
|
require('./registerText.cjs.js');
|
|
11
11
|
require('@plasmicapp/host/registerComponent');
|
|
12
12
|
|
|
@@ -45,7 +45,7 @@ var __objRest = (source, exclude) => {
|
|
|
45
45
|
}
|
|
46
46
|
return target;
|
|
47
47
|
};
|
|
48
|
-
const
|
|
48
|
+
const SWITCH_VARIANTS = [
|
|
49
49
|
"hovered",
|
|
50
50
|
"pressed",
|
|
51
51
|
"focused",
|
|
@@ -54,11 +54,9 @@ const SWITCH_INTERACTION_VARIANTS = [
|
|
|
54
54
|
"disabled",
|
|
55
55
|
"readonly"
|
|
56
56
|
];
|
|
57
|
-
const {
|
|
58
|
-
SWITCH_INTERACTION_VARIANTS
|
|
59
|
-
);
|
|
57
|
+
const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(SWITCH_VARIANTS);
|
|
60
58
|
function BaseSwitch(props) {
|
|
61
|
-
const _a = props, { children,
|
|
59
|
+
const _a = props, { children, updateVariant } = _a, rest = __objRest(_a, ["children", "updateVariant"]);
|
|
62
60
|
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Switch, __spreadValues({}, rest), ({
|
|
63
61
|
isHovered,
|
|
64
62
|
isPressed,
|
|
@@ -78,7 +76,7 @@ function BaseSwitch(props) {
|
|
|
78
76
|
disabled: isDisabled,
|
|
79
77
|
readonly: isReadOnly
|
|
80
78
|
},
|
|
81
|
-
|
|
79
|
+
updateVariant
|
|
82
80
|
));
|
|
83
81
|
}
|
|
84
82
|
function registerSwitch(loader, overrides) {
|
|
@@ -90,7 +88,7 @@ function registerSwitch(loader, overrides) {
|
|
|
90
88
|
displayName: "Aria Switch",
|
|
91
89
|
importPath: "@plasmicpkgs/react-aria/skinny/registerSwitch",
|
|
92
90
|
importName: "BaseSwitch",
|
|
93
|
-
|
|
91
|
+
variants,
|
|
94
92
|
defaultStyles: {
|
|
95
93
|
display: "flex",
|
|
96
94
|
flexDirection: "column",
|
|
@@ -170,7 +168,7 @@ function registerSwitch(loader, overrides) {
|
|
|
170
168
|
props: {
|
|
171
169
|
children: {
|
|
172
170
|
type: "text",
|
|
173
|
-
value: "
|
|
171
|
+
value: "Use the registered variants to see it in action..."
|
|
174
172
|
}
|
|
175
173
|
}
|
|
176
174
|
}
|