@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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTextField.esm.js","sources":["../src/registerTextField.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport type { InputProps, TextFieldProps } from \"react-aria-components\";\nimport { TextField } from \"react-aria-components\";\nimport { getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport {
|
|
1
|
+
{"version":3,"file":"registerTextField.esm.js","sources":["../src/registerTextField.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport type { InputProps, TextFieldProps } from \"react-aria-components\";\nimport { TextField } from \"react-aria-components\";\nimport { getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { registerFieldError } from \"./registerFieldError\";\nimport { INPUT_COMPONENT_NAME, registerInput } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME, registerLabel } from \"./registerLabel\";\nimport { registerTextArea } from \"./registerTextArea\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeChildComponentName,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst TEXT_FIELD_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseTextFieldProps\n extends Omit<TextFieldProps, \"autoComplete\">,\n WithVariants<typeof TEXT_FIELD_VARIANTS> {\n label?: ReactNode;\n description?: ReactNode;\n multiline?: boolean;\n inputProps?: InputProps;\n autoComplete?: string[];\n children: ReactNode;\n}\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TEXT_FIELD_VARIANTS);\n\nexport function BaseTextField(props: BaseTextFieldProps) {\n const { children, updateVariant, autoComplete, ...rest } = props;\n\n return (\n <PlasmicTextFieldContext.Provider value={props}>\n <TextField autoComplete={resolveAutoComplete(autoComplete)} {...rest}>\n {({ isDisabled, isReadOnly }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n readonly: isReadOnly,\n },\n updateVariant\n )\n }\n </TextField>\n </PlasmicTextFieldContext.Provider>\n );\n}\n\nexport const TEXT_FIELD_COMPONENT_NAME = makeComponentName(\"textField\");\n\nexport function registerTextField(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTextField>\n) {\n registerComponentHelper(\n loader,\n BaseTextField,\n {\n name: TEXT_FIELD_COMPONENT_NAME,\n displayName: \"Aria TextField\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTextField\",\n importName: \"BaseTextField\",\n variants,\n // TODO: Support for validate prop\n props: {\n ...getCommonProps<BaseTextFieldProps>(\"Text Field\", [\n \"name\",\n \"isDisabled\",\n \"isReadOnly\",\n \"autoFocus\",\n \"aria-label\",\n \"isRequired\",\n \"value\",\n \"maxLength\",\n \"minLength\",\n \"pattern\",\n \"type\",\n \"inputMode\",\n \"validationBehavior\",\n \"autoComplete\",\n \"onChange\",\n \"onFocus\",\n \"onBlur\",\n \"onFocusChange\",\n \"onKeyDown\",\n \"onKeyUp\",\n \"onCopy\",\n \"onCut\",\n \"onPaste\",\n \"onCompositionStart\",\n \"onCompositionEnd\",\n \"onCompositionUpdate\",\n \"onSelect\",\n \"onBeforeInput\",\n \"onInput\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true as any,\n defaultValue: {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n gap: \"5px\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Type something...\",\n },\n },\n },\n ],\n },\n },\n\n isInvalid: {\n // TODO: Not sure if needed\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n customValidationErrors: {\n // TODO: Not sure if needed\n type: \"array\",\n description: \"Errors for custom validation\",\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n\n const thisName = makeChildComponentName(\n overrides?.parentComponentName,\n TEXT_FIELD_COMPONENT_NAME\n );\n\n registerFieldError(loader, { parentComponentName: thisName });\n registerInput(loader, { parentComponentName: thisName });\n registerLabel(loader, { parentComponentName: thisName });\n registerTextArea(loader, { parentComponentName: thisName });\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const ARIA_COMPONENTS_VARIANTS = {
|
|
4
4
|
hovered: {
|
|
5
5
|
cssSelector: "[data-hovered]",
|
|
6
6
|
displayName: "Hovered"
|
|
@@ -41,33 +41,26 @@ const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
|
|
|
41
41
|
function ChangesObserver({
|
|
42
42
|
children,
|
|
43
43
|
changes,
|
|
44
|
-
|
|
44
|
+
updateVariant
|
|
45
45
|
}) {
|
|
46
46
|
React.useEffect(() => {
|
|
47
|
-
if (
|
|
48
|
-
|
|
47
|
+
if (updateVariant) {
|
|
48
|
+
updateVariant(changes);
|
|
49
49
|
}
|
|
50
|
-
}, [changes,
|
|
51
|
-
return
|
|
50
|
+
}, [changes, updateVariant]);
|
|
51
|
+
return children;
|
|
52
52
|
}
|
|
53
|
-
function realWithObservedValues(children, changes,
|
|
54
|
-
return /* @__PURE__ */ React.createElement(
|
|
55
|
-
ChangesObserver,
|
|
56
|
-
{
|
|
57
|
-
changes,
|
|
58
|
-
updateInteractionVariant
|
|
59
|
-
},
|
|
60
|
-
children
|
|
61
|
-
);
|
|
53
|
+
function realWithObservedValues(children, changes, updateVariant) {
|
|
54
|
+
return /* @__PURE__ */ React.createElement(ChangesObserver, { changes, updateVariant }, children);
|
|
62
55
|
}
|
|
63
56
|
function pickAriaComponentVariants(keys) {
|
|
64
57
|
return {
|
|
65
|
-
|
|
66
|
-
keys.map((key) => [key,
|
|
58
|
+
variants: Object.fromEntries(
|
|
59
|
+
keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])
|
|
67
60
|
),
|
|
68
61
|
withObservedValues: realWithObservedValues
|
|
69
62
|
};
|
|
70
63
|
}
|
|
71
64
|
|
|
72
65
|
export { pickAriaComponentVariants as p };
|
|
73
|
-
//# sourceMappingURL=
|
|
66
|
+
//# sourceMappingURL=variant-utils-23360776.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variant-utils-23360776.esm.js","sources":["../src/variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n};\n\ntype AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;\n\ntype CodeComponentVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"variants\"]\n>;\n\ntype VariantMeta = CodeComponentVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateVariant<T extends AriaVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\nexport interface WithVariants<T extends AriaVariant[]> {\n // Optional callback to update the CC variant state\n // as it's only provided if the component is the root of a Studio component\n updateVariant?: UpdateVariant<T>;\n}\n\ntype WithObservedValues<T extends AriaVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateVariant: UpdateVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaVariant[]>({\n children,\n changes,\n updateVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateVariant?: UpdateVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateVariant) {\n updateVariant(changes);\n }\n }, [changes, updateVariant]);\n return children;\n}\n\nfunction realWithObservedValues<T extends AriaVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateVariant?: UpdateVariant<T>\n) {\n return (\n <ChangesObserver changes={changes} updateVariant={updateVariant}>\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaVariant[]>(\n keys: T\n): {\n variants: Record<ArrayElement<T>, VariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n variants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])\n ) as Record<ArrayElement<T>, VariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":[],"mappings":";;AAGA,MAAM,wBAA2B,GAAA;AAAA,EAC/B,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AA4BA,SAAS,eAAyC,CAAA;AAAA,EAChD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAIG,EAAA;AACD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,aAAa,CAAC,CAAA,CAAA;AAC3B,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,aACA,EAAA;AACA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAkB,EAAA,aAAA,EAAA,EAChC,QACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,UAAU,MAAO,CAAA,WAAA;AAAA,MACf,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,wBAAA,CAAyB,GAAG,CAAC,CAAC,CAAA;AAAA,KACxD;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|
|
@@ -6,7 +6,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
6
6
|
|
|
7
7
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
8
8
|
|
|
9
|
-
const
|
|
9
|
+
const ARIA_COMPONENTS_VARIANTS = {
|
|
10
10
|
hovered: {
|
|
11
11
|
cssSelector: "[data-hovered]",
|
|
12
12
|
displayName: "Hovered"
|
|
@@ -47,33 +47,26 @@ const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
|
|
|
47
47
|
function ChangesObserver({
|
|
48
48
|
children,
|
|
49
49
|
changes,
|
|
50
|
-
|
|
50
|
+
updateVariant
|
|
51
51
|
}) {
|
|
52
52
|
React__default.default.useEffect(() => {
|
|
53
|
-
if (
|
|
54
|
-
|
|
53
|
+
if (updateVariant) {
|
|
54
|
+
updateVariant(changes);
|
|
55
55
|
}
|
|
56
|
-
}, [changes,
|
|
57
|
-
return
|
|
56
|
+
}, [changes, updateVariant]);
|
|
57
|
+
return children;
|
|
58
58
|
}
|
|
59
|
-
function realWithObservedValues(children, changes,
|
|
60
|
-
return /* @__PURE__ */ React__default.default.createElement(
|
|
61
|
-
ChangesObserver,
|
|
62
|
-
{
|
|
63
|
-
changes,
|
|
64
|
-
updateInteractionVariant
|
|
65
|
-
},
|
|
66
|
-
children
|
|
67
|
-
);
|
|
59
|
+
function realWithObservedValues(children, changes, updateVariant) {
|
|
60
|
+
return /* @__PURE__ */ React__default.default.createElement(ChangesObserver, { changes, updateVariant }, children);
|
|
68
61
|
}
|
|
69
62
|
function pickAriaComponentVariants(keys) {
|
|
70
63
|
return {
|
|
71
|
-
|
|
72
|
-
keys.map((key) => [key,
|
|
64
|
+
variants: Object.fromEntries(
|
|
65
|
+
keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])
|
|
73
66
|
),
|
|
74
67
|
withObservedValues: realWithObservedValues
|
|
75
68
|
};
|
|
76
69
|
}
|
|
77
70
|
|
|
78
71
|
exports.pickAriaComponentVariants = pickAriaComponentVariants;
|
|
79
|
-
//# sourceMappingURL=
|
|
72
|
+
//# sourceMappingURL=variant-utils-db5b9590.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variant-utils-db5b9590.cjs.js","sources":["../src/variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n};\n\ntype AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;\n\ntype CodeComponentVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"variants\"]\n>;\n\ntype VariantMeta = CodeComponentVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateVariant<T extends AriaVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\nexport interface WithVariants<T extends AriaVariant[]> {\n // Optional callback to update the CC variant state\n // as it's only provided if the component is the root of a Studio component\n updateVariant?: UpdateVariant<T>;\n}\n\ntype WithObservedValues<T extends AriaVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateVariant: UpdateVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaVariant[]>({\n children,\n changes,\n updateVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateVariant?: UpdateVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateVariant) {\n updateVariant(changes);\n }\n }, [changes, updateVariant]);\n return children;\n}\n\nfunction realWithObservedValues<T extends AriaVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateVariant?: UpdateVariant<T>\n) {\n return (\n <ChangesObserver changes={changes} updateVariant={updateVariant}>\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaVariant[]>(\n keys: T\n): {\n variants: Record<ArrayElement<T>, VariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n variants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_VARIANTS[key]])\n ) as Record<ArrayElement<T>, VariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":["React"],"mappings":";;;;;;;;AAGA,MAAM,wBAA2B,GAAA;AAAA,EAC/B,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AA4BA,SAAS,eAAyC,CAAA;AAAA,EAChD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAIG,EAAA;AACD,EAAAA,sBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,aAAa,CAAC,CAAA,CAAA;AAC3B,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,aACA,EAAA;AACA,EAAA,uBACGA,sBAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,OAAkB,EAAA,aAAA,EAAA,EAChC,QACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,UAAU,MAAO,CAAA,WAAA;AAAA,MACf,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,wBAAA,CAAyB,GAAG,CAAC,CAAC,CAAA;AAAA,KACxD;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CodeComponentMeta } from "@plasmicapp/host";
|
|
2
2
|
import React from "react";
|
|
3
|
-
declare const
|
|
3
|
+
declare const ARIA_COMPONENTS_VARIANTS: {
|
|
4
4
|
hovered: {
|
|
5
5
|
cssSelector: string;
|
|
6
6
|
displayName: string;
|
|
@@ -38,14 +38,17 @@ declare const ARIA_COMPONENTS_INTERACTION_VARIANTS: {
|
|
|
38
38
|
displayName: string;
|
|
39
39
|
};
|
|
40
40
|
};
|
|
41
|
-
type
|
|
42
|
-
type
|
|
43
|
-
type
|
|
41
|
+
type AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;
|
|
42
|
+
type CodeComponentVariantsMeta = NonNullable<CodeComponentMeta<unknown>["variants"]>;
|
|
43
|
+
type VariantMeta = CodeComponentVariantsMeta[string];
|
|
44
44
|
type ArrayElement<T> = T extends (infer U)[] ? U : never;
|
|
45
|
-
export type
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
export type UpdateVariant<T extends AriaVariant[]> = ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void) | undefined;
|
|
46
|
+
export interface WithVariants<T extends AriaVariant[]> {
|
|
47
|
+
updateVariant?: UpdateVariant<T>;
|
|
48
|
+
}
|
|
49
|
+
type WithObservedValues<T extends AriaVariant[]> = (children: React.ReactNode, state: Record<ArrayElement<T>, boolean>, updateVariant: UpdateVariant<T>) => React.ReactNode;
|
|
50
|
+
export declare function pickAriaComponentVariants<T extends AriaVariant[]>(keys: T): {
|
|
51
|
+
variants: Record<ArrayElement<T>, VariantMeta>;
|
|
49
52
|
withObservedValues: WithObservedValues<T>;
|
|
50
53
|
};
|
|
51
54
|
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"interaction-variant-utils-1d94d073.esm.js","sources":["../src/interaction-variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_INTERACTION_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n};\n\ntype AriaInteractionVariant = keyof typeof ARIA_COMPONENTS_INTERACTION_VARIANTS;\n\ntype CodeComponentInteractionVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"interactionVariants\"]\n>;\n\ntype InteractionVariantMeta = CodeComponentInteractionVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateInteractionVariant<T extends AriaInteractionVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\ntype WithObservedValues<T extends AriaInteractionVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateInteractionVariant: UpdateInteractionVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaInteractionVariant[]>({\n children,\n changes,\n updateInteractionVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateInteractionVariant?: UpdateInteractionVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateInteractionVariant) {\n updateInteractionVariant(changes);\n }\n }, [changes, updateInteractionVariant]);\n return <>{children}</>;\n}\n\nfunction realWithObservedValues<T extends AriaInteractionVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateInteractionVariant?: UpdateInteractionVariant<T>\n) {\n return (\n <ChangesObserver\n changes={changes}\n updateInteractionVariant={updateInteractionVariant}\n >\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaInteractionVariant[]>(\n keys: T\n): {\n interactionVariants: Record<ArrayElement<T>, InteractionVariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n interactionVariants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_INTERACTION_VARIANTS[key]])\n ) as Record<ArrayElement<T>, InteractionVariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":[],"mappings":";;AAGA,MAAM,oCAAuC,GAAA;AAAA,EAC3C,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AAsBA,SAAS,eAAoD,CAAA;AAAA,EAC3D,QAAA;AAAA,EACA,OAAA;AAAA,EACA,wBAAA;AACF,CAIG,EAAA;AACD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,wBAA0B,EAAA;AAC5B,MAAA,wBAAA,CAAyB,OAAO,CAAA,CAAA;AAAA,KAClC;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,wBAAwB,CAAC,CAAA,CAAA;AACtC,EAAA,iEAAU,QAAS,CAAA,CAAA;AACrB,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,wBACA,EAAA;AACA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,wBAAA;AAAA,KAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,qBAAqB,MAAO,CAAA,WAAA;AAAA,MAC1B,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,oCAAA,CAAqC,GAAG,CAAC,CAAC,CAAA;AAAA,KACpE;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"interaction-variant-utils-9a869063.cjs.js","sources":["../src/interaction-variant-utils.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_INTERACTION_VARIANTS = {\n hovered: {\n cssSelector: \"[data-hovered]\",\n displayName: \"Hovered\",\n },\n pressed: {\n cssSelector: \"[data-pressed]\",\n displayName: \"Pressed\",\n },\n focused: {\n cssSelector: \"[data-focused]\",\n displayName: \"Focused\",\n },\n focusVisible: {\n cssSelector: \"[data-focus-visible]\",\n displayName: \"Focus Visible\",\n },\n dragging: {\n cssSelector: \"[data-dragging]\",\n displayName: \"Dragging\",\n },\n selected: {\n cssSelector: \"[data-selected]\",\n displayName: \"Selected\",\n },\n readonly: {\n cssSelector: \"[data-readonly]\",\n displayName: \"Read Only\",\n },\n disabled: {\n cssSelector: \"[data-disabled]\",\n displayName: \"Disabled\",\n },\n indeterminate: {\n cssSelector: \"[data-indeterminate]\",\n displayName: \"Indeterminate\",\n },\n};\n\ntype AriaInteractionVariant = keyof typeof ARIA_COMPONENTS_INTERACTION_VARIANTS;\n\ntype CodeComponentInteractionVariantsMeta = NonNullable<\n CodeComponentMeta<unknown>[\"interactionVariants\"]\n>;\n\ntype InteractionVariantMeta = CodeComponentInteractionVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateInteractionVariant<T extends AriaInteractionVariant[]> =\n | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n | undefined;\n\ntype WithObservedValues<T extends AriaInteractionVariant[]> = (\n children: React.ReactNode,\n state: Record<ArrayElement<T>, boolean>,\n updateInteractionVariant: UpdateInteractionVariant<T>\n) => React.ReactNode;\n\nfunction ChangesObserver<T extends AriaInteractionVariant[]>({\n children,\n changes,\n updateInteractionVariant,\n}: {\n children: React.ReactNode;\n changes: Partial<Record<ArrayElement<T>, boolean>>;\n updateInteractionVariant?: UpdateInteractionVariant<T>;\n}) {\n React.useEffect(() => {\n if (updateInteractionVariant) {\n updateInteractionVariant(changes);\n }\n }, [changes, updateInteractionVariant]);\n return <>{children}</>;\n}\n\nfunction realWithObservedValues<T extends AriaInteractionVariant[]>(\n children: React.ReactNode,\n changes: Partial<Record<ArrayElement<T>, boolean>>,\n updateInteractionVariant?: UpdateInteractionVariant<T>\n) {\n return (\n <ChangesObserver\n changes={changes}\n updateInteractionVariant={updateInteractionVariant}\n >\n {children}\n </ChangesObserver>\n );\n}\n\nexport function pickAriaComponentVariants<T extends AriaInteractionVariant[]>(\n keys: T\n): {\n interactionVariants: Record<ArrayElement<T>, InteractionVariantMeta>;\n withObservedValues: WithObservedValues<T>;\n} {\n return {\n interactionVariants: Object.fromEntries(\n keys.map((key) => [key, ARIA_COMPONENTS_INTERACTION_VARIANTS[key]])\n ) as Record<ArrayElement<T>, InteractionVariantMeta>,\n withObservedValues: realWithObservedValues<T>,\n };\n}\n"],"names":["React"],"mappings":";;;;;;;;AAGA,MAAM,oCAAuC,GAAA;AAAA,EAC3C,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,WAAA;AAAA,GACf;AAAA,EACA,QAAU,EAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,WAAa,EAAA,UAAA;AAAA,GACf;AAAA,EACA,aAAe,EAAA;AAAA,IACb,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AAsBA,SAAS,eAAoD,CAAA;AAAA,EAC3D,QAAA;AAAA,EACA,OAAA;AAAA,EACA,wBAAA;AACF,CAIG,EAAA;AACD,EAAAA,sBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,wBAA0B,EAAA;AAC5B,MAAA,wBAAA,CAAyB,OAAO,CAAA,CAAA;AAAA,KAClC;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,wBAAwB,CAAC,CAAA,CAAA;AACtC,EAAA,mGAAU,QAAS,CAAA,CAAA;AACrB,CAAA;AAEA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,wBACA,EAAA;AACA,EACE,uBAAAA,sBAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,wBAAA;AAAA,KAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA;AAEJ,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,qBAAqB,MAAO,CAAA,WAAA;AAAA,MAC1B,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,oCAAA,CAAqC,GAAG,CAAC,CAAC,CAAA;AAAA,KACpE;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}
|