@elliemae/ds-slider-v2 3.80.0-next.6 → 3.80.0-next.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useSliderV2.js +8 -0
- package/dist/cjs/config/useSliderV2.js.map +2 -2
- package/dist/cjs/parts/Thumb.js +32 -7
- package/dist/cjs/parts/Thumb.js.map +2 -2
- package/dist/cjs/parts/TickMarksValues.js +3 -0
- package/dist/cjs/parts/TickMarksValues.js.map +2 -2
- package/dist/cjs/parts/Track.js +17 -3
- package/dist/cjs/parts/Track.js.map +2 -2
- package/dist/cjs/parts/styles.js +61 -34
- package/dist/cjs/parts/styles.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +5 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js +1 -0
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.js +2 -1
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-multiple.js +1 -0
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-multiple.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-single.js +2 -1
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid-single.js.map +2 -2
- package/dist/esm/config/useSliderV2.js +8 -0
- package/dist/esm/config/useSliderV2.js.map +2 -2
- package/dist/esm/parts/Thumb.js +32 -7
- package/dist/esm/parts/Thumb.js.map +2 -2
- package/dist/esm/parts/TickMarksValues.js +3 -0
- package/dist/esm/parts/TickMarksValues.js.map +2 -2
- package/dist/esm/parts/Track.js +17 -3
- package/dist/esm/parts/Track.js.map +2 -2
- package/dist/esm/parts/styles.js +61 -34
- package/dist/esm/parts/styles.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +5 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js +1 -0
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.js +2 -1
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-multiple.js +1 -0
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-multiple.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-single.js +2 -1
- package/dist/esm/typescript-testing/typescript-slider-v2-valid-single.js.map +2 -2
- package/dist/types/config/useSliderV2.d.ts +8 -0
- package/dist/types/parts/styles.d.ts +8 -2
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/package.json +11 -10
package/dist/cjs/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-auto-polymorph-multiple.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: true,\n applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: true,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n minRange: 10,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n multiple: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n multiple: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: [10, 50] as [number, number],\n minValue: 0,\n maxValue: 100,\n multiple: true,\n} as const;\n\nconst onValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onValueChange} />\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: true,\n applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: true,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n minRange: 10,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n multiple: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n multiple: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: [10, 50] as [number, number],\n minValue: 0,\n maxValue: 100,\n multiple: true,\n} as const;\n\nconst onValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onValueChange} />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACwFrB;AAvFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,gBAAgB,CAAC,UAA4B;AAAC;AAEpD,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAA8B;AAAA,GAClG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-auto-polymorph-single.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n minRange: undefined,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onValueChange = (value: number) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onValueChange} />\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n minRange: undefined,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onValueChange = (value: number) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onValueChange} />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyFrB;AAxFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AAIA,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,gBAAgB,CAAC,UAAkB;AAAC;AAE1C,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAA8B;AAAA,GAClF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-multiple.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.PropsMultiple;\ntype ComponentPropsInternals = DSSliderV2T.InternalPropsMultiple;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultPropsMultiple;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalPropsMultiple;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredPropsMultiple;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: true,\n applyAriaDisabled: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: true,\n onValueChange: (newVal: [number, number]) => {},\n disabled: false,\n step: 5,\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n minRange: 0,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: [10, 50],\n multiple: true,\n minValue: 0,\n maxValue: 100,\n minRange: 1,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: [10, 50],\n multiple: true,\n minValue: 0,\n maxValue: 100,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: [10, 50] as [number, number],\n multiple: true,\n minValue: 0,\n maxValue: 100,\n minRange: 1,\n} as const;\n\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* multiple auto inference works */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.PropsMultiple;\ntype ComponentPropsInternals = DSSliderV2T.InternalPropsMultiple;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultPropsMultiple;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalPropsMultiple;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredPropsMultiple;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: [10, 50],\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: true,\n applyAriaDisabled: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: true,\n onValueChange: (newVal: [number, number]) => {},\n disabled: false,\n step: 5,\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n minRange: 0,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: [10, 50],\n multiple: true,\n minValue: 0,\n maxValue: 100,\n minRange: 1,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: [10, 50],\n multiple: true,\n minValue: 0,\n maxValue: 100,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: [10, 50] as [number, number],\n multiple: true,\n minValue: 0,\n maxValue: 100,\n minRange: 1,\n} as const;\n\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* multiple auto inference works */}\n <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACuFrB;AAtFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,eAAe,CAAC,WAA6B;AAAA,EAAC;AAAA,EAC9C,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO,CAAC,IAAI,EAAE;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB,CAAC,UAA4B;AAAC;AAE5D,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid-single.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.PropsSingle;\ntype ComponentPropsInternals = DSSliderV2T.InternalPropsSingle;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultPropsSingle;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalPropsSingle;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredPropsSingle;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n </>\n);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.PropsSingle;\ntype ComponentPropsInternals = DSSliderV2T.InternalPropsSingle;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultPropsSingle;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalPropsSingle;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredPropsSingle;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n multiple: false,\n applyAriaDisabled: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n multiple: false,\n disabled: false,\n step: 5,\n onValueChange: () => {},\n withTickMarks: false,\n withTickMarksValues: false,\n customTickMarksValues: [],\n applyAriaDisabled: false,\n readOnly: false,\n hasError: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n value: 0,\n minValue: 0,\n maxValue: 100,\n multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSSliderV2 {...testExplicitDefinition} />\n <DSSliderV2 {...testInferedTypeCompatibility} />\n <DSSliderV2 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACuFrB;AAtFF,eAA2B;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAEhD,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC,4CAAC,uBAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,GACxF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,8 @@ const useSliderV2 = (propsFromUser) => {
|
|
|
18
18
|
useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });
|
|
19
19
|
const ownerPropConfig = useOwnerProps(propsWithDefault);
|
|
20
20
|
const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React2.useState(false);
|
|
21
|
+
const [isAnyThumbHovered, setIsAnyThumbHovered] = React2.useState(false);
|
|
22
|
+
const [isAnyThumbFocused, setIsAnyThumbFocused] = React2.useState(false);
|
|
21
23
|
return React2.useMemo(
|
|
22
24
|
() => ({
|
|
23
25
|
propsWithDefault,
|
|
@@ -27,6 +29,10 @@ const useSliderV2 = (propsFromUser) => {
|
|
|
27
29
|
tickMarkPositions,
|
|
28
30
|
hasUserInteractedAfterFocus,
|
|
29
31
|
setHasUserInteractedAfterFocus,
|
|
32
|
+
isAnyThumbHovered,
|
|
33
|
+
setIsAnyThumbHovered,
|
|
34
|
+
isAnyThumbFocused,
|
|
35
|
+
setIsAnyThumbFocused,
|
|
30
36
|
...ownerPropConfig
|
|
31
37
|
}),
|
|
32
38
|
[
|
|
@@ -36,6 +42,8 @@ const useSliderV2 = (propsFromUser) => {
|
|
|
36
42
|
rangeValues,
|
|
37
43
|
tickMarkPositions,
|
|
38
44
|
hasUserInteractedAfterFocus,
|
|
45
|
+
isAnyThumbHovered,
|
|
46
|
+
isAnyThumbFocused,
|
|
39
47
|
ownerPropConfig
|
|
40
48
|
]
|
|
41
49
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useSliderV2.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX {\n propsWithDefault: DSSliderV2T.InternalProps;\n xstyledProps: XstyledProps;\n instanceUid: string;\n rangeValues: [number, number] | [number];\n tickMarkPositions: number[];\n getOwnerProps: () => DSSliderV2T.InternalProps;\n getOwnerPropsArguments: () => Record<string, unknown>;\n hasUserInteractedAfterFocus: boolean;\n setHasUserInteractedAfterFocus: (value: boolean) => void;\n}\n\nexport const useSliderV2 = (propsFromUser: DSSliderV2T.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps>(propsFromUser, defaultProps);\n\n const { multiple, value } = propsWithDefault;\n\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n const rangeValues = React.useMemo(() => {\n if (multiple === true) return value;\n return [value] as [number];\n }, [multiple, value]);\n\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n // ===========================================================================\n // VALIDATE PROPS\n // ===========================================================================\n useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n const ownerPropConfig = useOwnerProps(propsWithDefault);\n const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n xstyledProps,\n instanceUid,\n rangeValues,\n tickMarkPositions,\n hasUserInteractedAfterFocus,\n setHasUserInteractedAfterFocus,\n ...ownerPropConfig,\n }),\n [\n propsWithDefault,\n xstyledProps,\n instanceUid,\n rangeValues,\n tickMarkPositions,\n hasUserInteractedAfterFocus,\n ownerPropConfig,\n ],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAChF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\n\nexport interface DSSliderV2CTX {\n propsWithDefault: DSSliderV2T.InternalProps;\n xstyledProps: XstyledProps;\n instanceUid: string;\n rangeValues: [number, number] | [number];\n tickMarkPositions: number[];\n getOwnerProps: () => DSSliderV2T.InternalProps;\n getOwnerPropsArguments: () => Record<string, unknown>;\n hasUserInteractedAfterFocus: boolean;\n setHasUserInteractedAfterFocus: (value: boolean) => void;\n // Spec v1.5.0 requires hover and focus on the handle to recolour the *active track segment* as\n // well. The track paints itself with a `getTrackBackground()` gradient computed at render, so a\n // CSS `:hover` on the thumb cannot reach it \u2014 the flags have to travel through this context for\n // Track to recompute. One flag pair for the whole slider, not per thumb: in range mode both\n // handles share a single active segment, so there is one surface to recolour.\n isAnyThumbHovered: boolean;\n setIsAnyThumbHovered: (value: boolean) => void;\n isAnyThumbFocused: boolean;\n setIsAnyThumbFocused: (value: boolean) => void;\n}\n\nexport const useSliderV2 = (propsFromUser: DSSliderV2T.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps>(propsFromUser, defaultProps);\n\n const { multiple, value } = propsWithDefault;\n\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n const rangeValues = React.useMemo(() => {\n if (multiple === true) return value;\n return [value] as [number];\n }, [multiple, value]);\n\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n // ===========================================================================\n // VALIDATE PROPS\n // ===========================================================================\n useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n const ownerPropConfig = useOwnerProps(propsWithDefault);\n const [hasUserInteractedAfterFocus, setHasUserInteractedAfterFocus] = React.useState(false);\n const [isAnyThumbHovered, setIsAnyThumbHovered] = React.useState(false);\n const [isAnyThumbFocused, setIsAnyThumbFocused] = React.useState(false);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n xstyledProps,\n instanceUid,\n rangeValues,\n tickMarkPositions,\n hasUserInteractedAfterFocus,\n setHasUserInteractedAfterFocus,\n isAnyThumbHovered,\n setIsAnyThumbHovered,\n isAnyThumbFocused,\n setIsAnyThumbFocused,\n ...ownerPropConfig,\n }),\n [\n propsWithDefault,\n xstyledProps,\n instanceUid,\n rangeValues,\n tickMarkPositions,\n hasUserInteractedAfterFocus,\n isAnyThumbHovered,\n isAnyThumbFocused,\n ownerPropConfig,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAChF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAuB5B,MAAM,cAAc,CAAC,kBAAqC;AAI/D,QAAM,mBAAmB,6BAAwD,eAAe,YAAY;AAE5G,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,QAAI,aAAa,KAAM,QAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,oBAAoB,mBAAmB,gBAAgB;AAK7D,mBAAiB,kBAAkB,qBAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,kBAAkB,cAAc,gBAAgB;AACtD,QAAM,CAAC,6BAA6B,8BAA8B,IAAIA,OAAM,SAAS,KAAK;AAC1F,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,OAAM,SAAS,KAAK;AACtE,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,OAAM,SAAS,KAAK;AAEtE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/parts/Thumb.js
CHANGED
|
@@ -15,14 +15,25 @@ const conformedThumbLabel = (config) => {
|
|
|
15
15
|
}
|
|
16
16
|
return msg;
|
|
17
17
|
};
|
|
18
|
-
const spanStyle = { height: 20, width:
|
|
18
|
+
const spanStyle = { height: 20, width: 12 };
|
|
19
19
|
const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
20
20
|
const {
|
|
21
|
-
propsWithDefault: {
|
|
21
|
+
propsWithDefault: {
|
|
22
|
+
disabled,
|
|
23
|
+
applyAriaDisabled,
|
|
24
|
+
readOnly,
|
|
25
|
+
hasError,
|
|
26
|
+
customTickMarksValues,
|
|
27
|
+
step,
|
|
28
|
+
minValue,
|
|
29
|
+
maxValue
|
|
30
|
+
},
|
|
22
31
|
rangeValues,
|
|
23
32
|
getOwnerProps,
|
|
24
33
|
hasUserInteractedAfterFocus,
|
|
25
|
-
setHasUserInteractedAfterFocus
|
|
34
|
+
setHasUserInteractedAfterFocus,
|
|
35
|
+
setIsAnyThumbHovered,
|
|
36
|
+
setIsAnyThumbFocused
|
|
26
37
|
} = useContext(DSSliderV2Context);
|
|
27
38
|
const [isHovered, setIsHovered] = useState(false);
|
|
28
39
|
const [isFocused, setIsFocused] = useState(false);
|
|
@@ -37,6 +48,7 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
37
48
|
} = reactRangeOpinionatedProps;
|
|
38
49
|
const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;
|
|
39
50
|
const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });
|
|
51
|
+
const isPinnedAtBoundary = rangeValues.length === 2 && (index === 1 && rangeValues.every((v) => v === maxValue) || index === 0 && rangeValues.every((v) => v === minValue));
|
|
40
52
|
const getOwnerPropsArguments = useCallback(
|
|
41
53
|
() => ({
|
|
42
54
|
index,
|
|
@@ -53,10 +65,12 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
53
65
|
setIsHovered(true);
|
|
54
66
|
setIsFocused(false);
|
|
55
67
|
setIsTooltipDismissed(false);
|
|
56
|
-
|
|
68
|
+
setIsAnyThumbHovered(true);
|
|
69
|
+
}, [setIsAnyThumbHovered]);
|
|
57
70
|
const handleMouseLeave = useCallback(() => {
|
|
58
71
|
setIsHovered(false);
|
|
59
|
-
|
|
72
|
+
setIsAnyThumbHovered(false);
|
|
73
|
+
}, [setIsAnyThumbHovered]);
|
|
60
74
|
const handleKeyDown = useCallback(
|
|
61
75
|
(e) => {
|
|
62
76
|
reactRangeOnKeyDownHandler?.(e);
|
|
@@ -76,14 +90,20 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
76
90
|
},
|
|
77
91
|
[reactRangeOnKeyUpHandler]
|
|
78
92
|
);
|
|
93
|
+
const focusThisThumb = useCallback(() => {
|
|
94
|
+
if (disabled) return;
|
|
95
|
+
ref?.current?.focus();
|
|
96
|
+
}, [disabled, ref]);
|
|
79
97
|
const handleFocus = useCallback(() => {
|
|
80
98
|
setIsFocused(true);
|
|
81
99
|
setIsTooltipDismissed(false);
|
|
82
|
-
|
|
100
|
+
setIsAnyThumbFocused(true);
|
|
101
|
+
}, [setIsAnyThumbFocused]);
|
|
83
102
|
const handleBlur = useCallback(() => {
|
|
84
103
|
setIsFocused(false);
|
|
85
104
|
setHasUserInteractedAfterFocus(false);
|
|
86
|
-
|
|
105
|
+
setIsAnyThumbFocused(false);
|
|
106
|
+
}, [setHasUserInteractedAfterFocus, setIsAnyThumbFocused]);
|
|
87
107
|
return /* @__PURE__ */ jsx(
|
|
88
108
|
StyledThumb,
|
|
89
109
|
{
|
|
@@ -93,9 +113,14 @@ const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }) => {
|
|
|
93
113
|
disabled,
|
|
94
114
|
$applyAriaDisabled: applyAriaDisabled,
|
|
95
115
|
$readOnly: readOnly,
|
|
116
|
+
$hasError: hasError,
|
|
117
|
+
$isRaised: isDragged,
|
|
118
|
+
$isPinnedAtBoundary: isPinnedAtBoundary,
|
|
96
119
|
"aria-disabled": applyAriaDisabled || readOnly,
|
|
97
120
|
onMouseEnter: handleMouseEnter,
|
|
98
121
|
onMouseLeave: handleMouseLeave,
|
|
122
|
+
onMouseDown: focusThisThumb,
|
|
123
|
+
onTouchStart: focusThisThumb,
|
|
99
124
|
onKeyDown: handleKeyDown,
|
|
100
125
|
onKeyUp: handleKeyUp,
|
|
101
126
|
onFocus: handleFocus,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Thumb.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n rangeValues: [number] | [number, number];\n customTickMarksValues: string[];\n index: number;\n step: number;\n minValue: number;\n}) => {\n const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n let msg = `Value: `;\n if (customTickMarksValues.length) {\n const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n } else {\n msg += `${rangeValues[index].toFixed(1)}`;\n }\n\n return msg;\n};\n\nconst spanStyle = { height: 20, width:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledThumb } from './styles.js';\n\nexport const conformedThumbLabel = (config: {\n rangeValues: [number] | [number, number];\n customTickMarksValues: string[];\n index: number;\n step: number;\n minValue: number;\n}) => {\n const { rangeValues, customTickMarksValues, index, step, minValue } = config;\n let msg = `Value: `;\n if (customTickMarksValues.length) {\n const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n } else {\n msg += `${rangeValues[index].toFixed(1)}`;\n }\n\n return msg;\n};\n\n// Matches the handle box from Spec v1.5.0 \u2014 this span is the tooltip's anchor and has to cover the\n// handle, not exceed it.\nconst spanStyle = { height: 20, width: 12 };\n\nexport const Thumb = ({ index, props: reactRangeOpinionatedProps, isDragged }: Omit<IRenderThumbParams, 'key'>) => {\n const {\n propsWithDefault: {\n disabled,\n applyAriaDisabled,\n readOnly,\n hasError,\n customTickMarksValues,\n step,\n minValue,\n maxValue,\n },\n rangeValues,\n getOwnerProps,\n hasUserInteractedAfterFocus,\n setHasUserInteractedAfterFocus,\n setIsAnyThumbHovered,\n setIsAnyThumbFocused,\n } = useContext(DSSliderV2Context);\n\n // Local state drives the tooltip, which is per handle. The context setters below mirror the same\n // transitions for the track, which is shared between handles in range mode.\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [isTooltipDismissed, setIsTooltipDismissed] = useState(false);\n\n const {\n ref,\n style: thumbStyle,\n key: unusedKeyDueToLibTypescriptIssues,\n onKeyDown: reactRangeOnKeyDownHandler,\n onKeyUp: reactRangeOnKeyUpHandler,\n ...propsFromReactRangeTookAsIs\n } = reactRangeOpinionatedProps;\n const showPopover = (isDragged || isHovered || isFocused) && !isTooltipDismissed;\n\n const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n // At a boundary the pointer lands on the thumb that cannot move; handing it to the other re-opens the range.\n const isPinnedAtBoundary =\n rangeValues.length === 2 &&\n ((index === 1 && rangeValues.every((v) => v === maxValue)) ||\n (index === 0 && rangeValues.every((v) => v === minValue)));\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n shouldUseExtendedAriaValueText: !hasUserInteractedAfterFocus,\n }),\n [index, hasUserInteractedAfterFocus],\n );\n\n const sanitizedStyle = useMemo(() => {\n // as per https://jira.elliemae.io/browse/PUI-14390 and https://github.com/intcx/PLATFORM-UI.dimsum/pull/7046\n // we also want z-index: ${(props) => props.theme.zIndex.tooltip}; from the theme\n // I keep the same, just refactoring so the styles concerns are part of the styled component as expected\n // my understanding is that libInherithedStyles main purposes are:\n // - to position the element on the track with a transform: translate\n // - to handle the cursor:grab/grabbing based on interaction state\n const { zIndex, ...libInherithedStyles } = thumbStyle;\n // we want to keep the cursor grab/grabbing thing, but we want our own \"disabled\" cursor...\n if (disabled || applyAriaDisabled || readOnly) return { ...libInherithedStyles, cursor: 'not-allowed' };\n return libInherithedStyles;\n }, [applyAriaDisabled, disabled, readOnly, thumbStyle]);\n\n const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n setIsHovered(true);\n setIsFocused(false);\n setIsTooltipDismissed(false);\n setIsAnyThumbHovered(true);\n }, [setIsAnyThumbHovered]);\n const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(() => {\n setIsHovered(false);\n setIsAnyThumbHovered(false);\n }, [setIsAnyThumbHovered]);\n\n const handleKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n reactRangeOnKeyDownHandler?.(e);\n if (e.key === 'Escape' && showPopover) {\n // stoping propagation here is load-bearing\n // we are checking \"showPopover\" because if \"the popover exist\" it means the tooltip exist\n // if it exist and we are in a dialog, the first esc needs to close the tooltip, not the dialog.\n e.stopPropagation();\n setIsTooltipDismissed(true);\n setIsFocused(true);\n } else {\n setIsTooltipDismissed(false);\n }\n },\n [showPopover, reactRangeOnKeyDownHandler],\n );\n const handleKeyUp = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n reactRangeOnKeyUpHandler?.(e);\n // if we need to do anything on keyup too, this is where we will do it.\n },\n [reactRangeOnKeyUpHandler],\n );\n // react-range skips focus() under `draggableTrack` and its preventDefault blocks the native one.\n const focusThisThumb = useCallback(() => {\n if (disabled) return;\n (ref?.current as HTMLDivElement | null)?.focus();\n }, [disabled, ref]);\n\n const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIsFocused(true);\n setIsTooltipDismissed(false);\n setIsAnyThumbFocused(true);\n }, [setIsAnyThumbFocused]);\n const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIsFocused(false);\n setHasUserInteractedAfterFocus(false);\n setIsAnyThumbFocused(false);\n }, [setHasUserInteractedAfterFocus, setIsAnyThumbFocused]);\n\n return (\n <StyledThumb\n {...propsFromReactRangeTookAsIs}\n style={sanitizedStyle}\n innerRef={ref}\n disabled={disabled}\n $applyAriaDisabled={applyAriaDisabled}\n $readOnly={readOnly}\n $hasError={hasError}\n $isRaised={isDragged}\n $isPinnedAtBoundary={isPinnedAtBoundary}\n // dicussed with SME on 13/jul/2026, even if role='slider' technically accepts aria-readonly\n // - SRs support for aria-readonly is loose\n // - having both aria-readonly and aria-disabled is a violation\n // - aria-disabled transmit the same interaction pattern\n // therefore, we will not set aria-readonly and will rely on aria-disabled to convey the interaction pattern\n // aria-readonly={readOnly}\n aria-disabled={applyAriaDisabled || readOnly} // || readOnly as per previous comment\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseDown={focusThisThumb}\n onTouchStart={focusThisThumb}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onFocus={handleFocus}\n onBlur={handleBlur}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3 key={label} text={label} showPopover={showPopover} withoutAnimation>\n <span style={spanStyle}></span>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+Kf;AA/KR,SAAS,mBAAmB;AAC5B,SAAS,aAAa,YAAY,SAAS,gBAAgB;AAE3D,OAAO,uBAAuB;AAC9B,SAAS,mBAAmB;AAErB,MAAM,sBAAsB,CAAC,WAM9B;AACJ,QAAM,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,IAAI;AACtE,MAAI,MAAM;AACV,MAAI,sBAAsB,QAAQ;AAChC,UAAM,aAAa,sBAAsB,KAAK,OAAO,YAAY,KAAK,IAAI,YAAY,IAAI,CAAC;AAC3F,WAAO,GAAG,cAAc,YAAY,KAAK,EAAE,QAAQ,CAAC,CAAC;AAAA,EACvD,OAAO;AACL,WAAO,GAAG,YAAY,KAAK,EAAE,QAAQ,CAAC,CAAC;AAAA,EACzC;AAEA,SAAO;AACT;AAIA,MAAM,YAAY,EAAE,QAAQ,IAAI,OAAO,GAAG;AAEnC,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,4BAA4B,UAAU,MAAuC;AACjH,QAAM;AAAA,IACJ,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAIhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,KAAK;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,eAAe,aAAa,aAAa,cAAc,CAAC;AAE9D,QAAM,QAAQ,oBAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAG/F,QAAM,qBACJ,YAAY,WAAW,MACrB,UAAU,KAAK,YAAY,MAAM,CAAC,MAAM,MAAM,QAAQ,KACrD,UAAU,KAAK,YAAY,MAAM,CAAC,MAAM,MAAM,QAAQ;AAE3D,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA,gCAAgC,CAAC;AAAA,IACnC;AAAA,IACA,CAAC,OAAO,2BAA2B;AAAA,EACrC;AAEA,QAAM,iBAAiB,QAAQ,MAAM;AAOnC,UAAM,EAAE,QAAQ,GAAG,oBAAoB,IAAI;AAE3C,QAAI,YAAY,qBAAqB,SAAU,QAAO,EAAE,GAAG,qBAAqB,QAAQ,cAAc;AACtG,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,UAAU,UAAU,UAAU,CAAC;AAEtD,QAAM,mBAAmB,YAAqD,MAAM;AAClF,iBAAa,IAAI;AACjB,iBAAa,KAAK;AAClB,0BAAsB,KAAK;AAC3B,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AACzB,QAAM,mBAAmB,YAAqD,MAAM;AAClF,iBAAa,KAAK;AAClB,yBAAqB,KAAK;AAAA,EAC5B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAM;AACL,mCAA6B,CAAC;AAC9B,UAAI,EAAE,QAAQ,YAAY,aAAa;AAIrC,UAAE,gBAAgB;AAClB,8BAAsB,IAAI;AAC1B,qBAAa,IAAI;AAAA,MACnB,OAAO;AACL,8BAAsB,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,0BAA0B;AAAA,EAC1C;AACA,QAAM,cAAc;AAAA,IAClB,CAAC,MAAM;AACL,iCAA2B,CAAC;AAAA,IAE9B;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,SAAU;AACd,IAAC,KAAK,SAAmC,MAAM;AAAA,EACjD,GAAG,CAAC,UAAU,GAAG,CAAC;AAElB,QAAM,cAAc,YAAqD,MAAM;AAC7E,iBAAa,IAAI;AACjB,0BAAsB,KAAK;AAC3B,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AACzB,QAAM,aAAa,YAAqD,MAAM;AAC5E,iBAAa,KAAK;AAClB,mCAA+B,KAAK;AACpC,yBAAqB,KAAK;AAAA,EAC5B,GAAG,CAAC,gCAAgC,oBAAoB,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,qBAAqB;AAAA,MAOrB,iBAAe,qBAAqB;AAAA,MACpC,cAAc;AAAA,MACd,cAAc;AAAA,MACd,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEA,8BAAC,eAAwB,MAAM,OAAO,aAA0B,kBAAgB,MAC9E,8BAAC,UAAK,OAAO,WAAW,KADR,KAElB;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useContext, useMemo } from "react";
|
|
4
|
+
import { TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
|
|
4
5
|
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
|
5
6
|
import { inRange } from "../utils/inRange.js";
|
|
6
7
|
import { StyledTickMarkValue, StyledTickMarksContainer } from "./styles.js";
|
|
@@ -30,6 +31,8 @@ const TickMarksValues = () => {
|
|
|
30
31
|
return /* @__PURE__ */ jsx(
|
|
31
32
|
StyledTickMarkValue,
|
|
32
33
|
{
|
|
34
|
+
component: "div",
|
|
35
|
+
variant: TYPOGRAPHY_VARIANTS.B2,
|
|
33
36
|
isSelected,
|
|
34
37
|
getOwnerProps,
|
|
35
38
|
getOwnerPropsArguments,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TickMarksValues.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { inRange } from '../utils/inRange.js';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from './styles.js';\n\nexport const TickMarksValues = () => {\n const {\n propsWithDefault: { customTickMarksValues, maxValue, minValue },\n rangeValues,\n tickMarkPositions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const { columnWidth } = useMemo(() => {\n const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n return { columnWidth: calculatedColumnWidthPercentage };\n }, [maxValue, minValue, tickMarkPositions.length]);\n\n return (\n <StyledTickMarksContainer\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n columnCount={tickMarkPositions.length}\n columnWidth={columnWidth}\n >\n {tickMarkPositions.map((value, index) => {\n const isSelected = inRange(value, rangeValues);\n\n return (\n <StyledTickMarkValue\n key={`${instanceUid}-${value}`}\n isSelected={isSelected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customTickMarksValues[index] ?? value}\n </StyledTickMarkValue>\n );\n })}\n </StyledTickMarksContainer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { inRange } from '../utils/inRange.js';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from './styles.js';\n\nexport const TickMarksValues = () => {\n const {\n propsWithDefault: { customTickMarksValues, maxValue, minValue },\n rangeValues,\n tickMarkPositions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const { columnWidth } = useMemo(() => {\n const distanceBetweenDots = (maxValue - minValue) / (tickMarkPositions.length - 1);\n const calculatedColumnWidthPercentage = `${(distanceBetweenDots / (maxValue - minValue)) * 100}%`;\n return { columnWidth: calculatedColumnWidthPercentage };\n }, [maxValue, minValue, tickMarkPositions.length]);\n\n return (\n <StyledTickMarksContainer\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n columnCount={tickMarkPositions.length}\n columnWidth={columnWidth}\n >\n {tickMarkPositions.map((value, index) => {\n const isSelected = inRange(value, rangeValues);\n\n return (\n <StyledTickMarkValue\n key={`${instanceUid}-${value}`}\n // Keeps the element this slot has always rendered. `VariantToAsMap` maps every `b*`\n // variant to `p`, so adopting `b2` would silently turn the step value into a paragraph\n // \u2014 a change nobody asked for, with paragraph margins and the wrong semantics for a\n // number. Spec v1.5.0 says nothing about HTML elements, so the existing one stands.\n component=\"div\"\n variant={TYPOGRAPHY_VARIANTS.B2}\n isSelected={isSelected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customTickMarksValues[index] ?? value}\n </StyledTickMarkValue>\n );\n })}\n </StyledTickMarksContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiCb;AAjCV,SAAS,YAAY,eAAe;AACpC,SAAS,2BAA2B;AACpC,OAAO,uBAAuB;AAC9B,SAAS,eAAe;AACxB,SAAS,qBAAqB,gCAAgC;AAEvD,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,uBAAuB,UAAU,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,EAAE,YAAY,IAAI,QAAQ,MAAM;AACpC,UAAM,uBAAuB,WAAW,aAAa,kBAAkB,SAAS;AAChF,UAAM,kCAAkC,GAAI,uBAAuB,WAAW,YAAa,GAAG;AAC9F,WAAO,EAAE,aAAa,gCAAgC;AAAA,EACxD,GAAG,CAAC,UAAU,UAAU,kBAAkB,MAAM,CAAC;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAa,kBAAkB;AAAA,MAC/B;AAAA,MAEC,4BAAkB,IAAI,CAAC,OAAO,UAAU;AACvC,cAAM,aAAa,QAAQ,OAAO,WAAW;AAE7C,eACE;AAAA,UAAC;AAAA;AAAA,YAMC,WAAU;AAAA,YACV,SAAS,oBAAoB;AAAA,YAC7B;AAAA,YACA;AAAA,YACA;AAAA,YAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,UAX5B,GAAG,WAAW,IAAI,KAAK;AAAA,QAY9B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Track.js
CHANGED
|
@@ -7,10 +7,21 @@ import { TickMarksValues } from "./TickMarksValues.js";
|
|
|
7
7
|
import { StyledTrack } from "./styles.js";
|
|
8
8
|
const Track = ({ children, props: reactRangeOpinionatedProps, disabled }) => {
|
|
9
9
|
const {
|
|
10
|
-
propsWithDefault: {
|
|
10
|
+
propsWithDefault: {
|
|
11
|
+
minValue,
|
|
12
|
+
maxValue,
|
|
13
|
+
applyAriaDisabled,
|
|
14
|
+
readOnly,
|
|
15
|
+
hasError,
|
|
16
|
+
withTickMarksValues,
|
|
17
|
+
withTickMarks,
|
|
18
|
+
multiple
|
|
19
|
+
},
|
|
11
20
|
rangeValues,
|
|
12
21
|
getOwnerProps,
|
|
13
|
-
getOwnerPropsArguments
|
|
22
|
+
getOwnerPropsArguments,
|
|
23
|
+
isAnyThumbHovered,
|
|
24
|
+
isAnyThumbFocused
|
|
14
25
|
} = useContext(DSSliderV2Context);
|
|
15
26
|
const { ref, style: trackStyle, ...propsFromReactRangeTookAsIsForTheTrack } = reactRangeOpinionatedProps;
|
|
16
27
|
const sanitizedStyle = useMemo(() => {
|
|
@@ -27,6 +38,9 @@ const Track = ({ children, props: reactRangeOpinionatedProps, disabled }) => {
|
|
|
27
38
|
disabled,
|
|
28
39
|
$readOnly: readOnly,
|
|
29
40
|
$applyAriaDisabled: applyAriaDisabled,
|
|
41
|
+
$hasError: hasError,
|
|
42
|
+
$isAnyThumbHovered: isAnyThumbHovered,
|
|
43
|
+
$isAnyThumbFocused: isAnyThumbFocused,
|
|
30
44
|
minValue,
|
|
31
45
|
maxValue,
|
|
32
46
|
rangeValues,
|
|
@@ -35,7 +49,7 @@ const Track = ({ children, props: reactRangeOpinionatedProps, disabled }) => {
|
|
|
35
49
|
getOwnerPropsArguments,
|
|
36
50
|
children: [
|
|
37
51
|
children,
|
|
38
|
-
withTickMarks &&
|
|
52
|
+
withTickMarks && /* @__PURE__ */ jsx(TickMarks, {})
|
|
39
53
|
]
|
|
40
54
|
}
|
|
41
55
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Track.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from './styles.js';\n\nexport const Track = ({ children, props: reactRangeOpinionatedProps, disabled }: IRenderTrackParams) => {\n const {\n propsWithDefault: {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from './styles.js';\n\nexport const Track = ({ children, props: reactRangeOpinionatedProps, disabled }: IRenderTrackParams) => {\n const {\n propsWithDefault: {\n minValue,\n maxValue,\n applyAriaDisabled,\n readOnly,\n hasError,\n withTickMarksValues,\n withTickMarks,\n multiple,\n },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n isAnyThumbHovered,\n isAnyThumbFocused,\n } = useContext(DSSliderV2Context);\n\n const { ref, style: trackStyle, ...propsFromReactRangeTookAsIsForTheTrack } = reactRangeOpinionatedProps;\n\n const sanitizedStyle = useMemo(() => {\n // we want to keep the cursor but when disabled, we want it to show as 'not-allowed'\n if (disabled || applyAriaDisabled || readOnly) return { ...trackStyle, cursor: 'not-allowed' };\n return trackStyle;\n }, [applyAriaDisabled, disabled, readOnly, trackStyle]);\n\n return (\n <>\n <StyledTrack\n style={sanitizedStyle}\n {...propsFromReactRangeTookAsIsForTheTrack} // This is needed because it's received from the library\n innerRef={ref}\n disabled={disabled}\n $readOnly={readOnly}\n $applyAriaDisabled={applyAriaDisabled}\n $hasError={hasError}\n $isAnyThumbHovered={isAnyThumbHovered}\n $isAnyThumbFocused={isAnyThumbFocused}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n multiple={multiple}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n {/*\n * Step marks are not gated on any interaction state. Spec v1.5.0's Design Notes require them\n * to stay visible across both track segments and every interactive state, and neither the\n * Disabled nor the Aria-Disabled row hides them. A previous `(!disabled || !applyAriaDisabled)`\n * guard sat here; it only evaluated false when both flags were true at once, so it never hid\n * anything \u2014 and \"fixing\" it to `&&` would have introduced a spec violation.\n */}\n {withTickMarks && <TickMarks />}\n </StyledTrack>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmCnB,mBA0BsB,KAzBpB,YADF;AAnCJ,SAAS,YAAY,eAAe;AAEpC,OAAO,uBAAuB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,4BAA4B,SAAS,MAA0B;AACtG,QAAM;AAAA,IACJ,kBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,EAAE,KAAK,OAAO,YAAY,GAAG,uCAAuC,IAAI;AAE9E,QAAM,iBAAiB,QAAQ,MAAM;AAEnC,QAAI,YAAY,qBAAqB,SAAU,QAAO,EAAE,GAAG,YAAY,QAAQ,cAAc;AAC7F,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,UAAU,UAAU,UAAU,CAAC;AAEtD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,QACX,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,oBAAoB;AAAA,QACpB,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAQA,iBAAiB,oBAAC,aAAU;AAAA;AAAA;AAAA,IAC/B;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/styles.js
CHANGED
|
@@ -1,18 +1,38 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Grid } from "@elliemae/ds-grid";
|
|
3
3
|
import { css, styled } from "@elliemae/ds-system";
|
|
4
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
4
5
|
import { getTrackBackground } from "react-range";
|
|
5
6
|
import { DSSliderV2Name, SLIDER_V2_SLOTS } from "../constants/index.js";
|
|
6
7
|
const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;
|
|
7
8
|
const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;
|
|
9
|
+
const SPEC_ERROR_ACTIVE = 900;
|
|
10
|
+
const SPEC_ERROR_INACTIVE = 200;
|
|
8
11
|
const TrackStates = css`
|
|
9
|
-
${({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
${({
|
|
13
|
+
theme,
|
|
14
|
+
disabled,
|
|
15
|
+
$applyAriaDisabled,
|
|
16
|
+
$readOnly,
|
|
17
|
+
$hasError,
|
|
18
|
+
$isAnyThumbHovered,
|
|
19
|
+
$isAnyThumbFocused,
|
|
20
|
+
rangeValues,
|
|
21
|
+
multiple,
|
|
22
|
+
minValue,
|
|
23
|
+
maxValue
|
|
24
|
+
}) => {
|
|
25
|
+
const { neutral, brand, danger } = theme.colors;
|
|
26
|
+
const pickColors = () => {
|
|
27
|
+
if (disabled) return { active: neutral[400], inactive: neutral[300] };
|
|
28
|
+
if ($applyAriaDisabled || $readOnly) return { active: neutral[500], inactive: neutral[300] };
|
|
29
|
+
if ($hasError) return { active: danger[SPEC_ERROR_ACTIVE], inactive: danger[SPEC_ERROR_INACTIVE] };
|
|
30
|
+
if ($isAnyThumbFocused) return { active: brand[800], inactive: neutral[400] };
|
|
31
|
+
if ($isAnyThumbHovered) return { active: brand[700], inactive: neutral[400] };
|
|
32
|
+
return { active: brand[600], inactive: neutral[400] };
|
|
33
|
+
};
|
|
34
|
+
const { active, inactive } = pickColors();
|
|
35
|
+
const reactRangeColors = multiple ? [inactive, active, inactive] : [active, inactive];
|
|
16
36
|
return `background: ${getTrackBackground({
|
|
17
37
|
values: rangeValues,
|
|
18
38
|
colors: reactRangeColors,
|
|
@@ -37,7 +57,7 @@ const StyledDot = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DO
|
|
|
37
57
|
display: block;
|
|
38
58
|
position: relative;
|
|
39
59
|
width: 2px;
|
|
40
|
-
height:
|
|
60
|
+
height: 4px;
|
|
41
61
|
}
|
|
42
62
|
`;
|
|
43
63
|
const StyledDotsContainer = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`
|
|
@@ -53,7 +73,10 @@ const StyledDotsContainer = styled("div", { name: DSSliderV2Name, slot: SLIDER_V
|
|
|
53
73
|
bottom: 0;
|
|
54
74
|
z-index: ${(props) => props.theme.zIndex.tooltip - 1};
|
|
55
75
|
`;
|
|
56
|
-
const StyledTickMarkValue = styled(
|
|
76
|
+
const StyledTickMarkValue = styled(DSTypography, {
|
|
77
|
+
name: DSSliderV2Name,
|
|
78
|
+
slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE
|
|
79
|
+
})`
|
|
57
80
|
display: flex;
|
|
58
81
|
justify-content: center;
|
|
59
82
|
text-align: center;
|
|
@@ -78,43 +101,47 @@ const StyledTickMarksContainer = styled("div", {
|
|
|
78
101
|
overflow-wrap: normal;
|
|
79
102
|
`;
|
|
80
103
|
const ThumbStates = css`
|
|
81
|
-
${({ theme, disabled, $applyAriaDisabled, $readOnly }) => {
|
|
104
|
+
${({ theme, disabled, $applyAriaDisabled, $readOnly, $hasError }) => {
|
|
105
|
+
const { neutral, brand, danger } = theme.colors;
|
|
106
|
+
const background = `background-color: ${neutral["000"]};`;
|
|
107
|
+
const focusRing = `:focus {
|
|
108
|
+
border: 2px solid ${brand[800]};
|
|
109
|
+
outline: unset;
|
|
110
|
+
}`;
|
|
82
111
|
if (disabled)
|
|
83
112
|
return `
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
const standardBgColorAndBorder = `
|
|
87
|
-
background-color: ${theme.colors.neutral["000"]};
|
|
88
|
-
border: 1px solid ${theme.colors.neutral[400]};
|
|
113
|
+
${background}
|
|
114
|
+
border: 2px solid ${neutral[400]};
|
|
89
115
|
`;
|
|
90
|
-
const standardFocusRing = `:focus {
|
|
91
|
-
border: 2px solid ${theme.colors.brand[700]};
|
|
92
|
-
outline: unset;
|
|
93
|
-
}`;
|
|
94
116
|
if ($applyAriaDisabled || $readOnly)
|
|
95
117
|
return `
|
|
96
|
-
${
|
|
97
|
-
:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
118
|
+
${background}
|
|
119
|
+
border: 2px solid ${neutral[500]};
|
|
120
|
+
${focusRing}`;
|
|
121
|
+
if ($hasError)
|
|
122
|
+
return `
|
|
123
|
+
${background}
|
|
124
|
+
border: 2px solid ${danger[SPEC_ERROR_ACTIVE]};
|
|
125
|
+
${focusRing}`;
|
|
101
126
|
return `
|
|
102
|
-
${
|
|
103
|
-
:
|
|
104
|
-
|
|
127
|
+
${background}
|
|
128
|
+
border: 2px solid ${brand[600]};
|
|
129
|
+
:hover {
|
|
130
|
+
border: 2px solid ${brand[700]};
|
|
105
131
|
}
|
|
106
|
-
|
|
107
|
-
border: 1px solid ${theme.colors.brand[600]};
|
|
108
|
-
}
|
|
109
|
-
${standardFocusRing}`;
|
|
132
|
+
${focusRing}`;
|
|
110
133
|
}}
|
|
111
134
|
`;
|
|
112
135
|
const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })`
|
|
113
136
|
height: 20px;
|
|
114
|
-
width:
|
|
115
|
-
border-radius:
|
|
137
|
+
width: 12px;
|
|
138
|
+
border-radius: 2px;
|
|
116
139
|
top: 0;
|
|
117
|
-
z-index: ${(props) => props.theme.zIndex.tooltip};
|
|
140
|
+
z-index: ${(props) => props.theme.zIndex.tooltip + (props.$isRaised ? 1 : 0)};
|
|
141
|
+
&:focus {
|
|
142
|
+
z-index: ${(props) => props.theme.zIndex.tooltip + 1};
|
|
143
|
+
}
|
|
144
|
+
pointer-events: ${(props) => props.$isPinnedAtBoundary ? "none" : "auto"};
|
|
118
145
|
${ThumbStates}
|
|
119
146
|
`;
|
|
120
147
|
export {
|