react-led-digit - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

lib/Digit/components/AmpmSegments.js

@@ -23,4 +23,4 @@ "use strict";
     var { className, off, shape = 'default', AM, PM } = _a, rest = __rest(_a, ["className", "off", "shape", "AM", "PM"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
 };
 exports.AmpmSegments = AmpmSegments;

lib/Digit/components/ColonSegments.js

@@ -23,4 +23,4 @@ "use strict";
     var { className, off, shape = 'default', D1, D2 } = _a, rest = __rest(_a, ["className", "off", "shape", "D1", "D2"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
 };
 exports.ColonSegments = ColonSegments;

lib/Digit/components/DigitSegments.js

@@ -23,4 +23,4 @@ "use strict";
     var { className, off, shape = 'default', A, B, C, D, E, F, G } = _a, rest = __rest(_a, ["className", "off", "shape", "A", "B", "C", "D", "E", "F", "G"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
 };
 exports.DigitSegments = DigitSegments;

lib/Digit/components/DotSegments.js

@@ -23,4 +23,4 @@ "use strict";
     var { className, off, shape = 'default', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
 };
 exports.DotSegments = DotSegments;

lib/Digit/Digit.js

@@ -20,9 +20,13 @@ "use strict";
 const UnstyledDigit_1 = require("./UnstyledDigit");
-const useStyleInjection_1 = __importDefault(require("./useStyleInjection"));
-const digit_css_js_1 = __importDefault(require("./digit.css.js"));
+const useStyleInjector_1 = __importDefault(require("./useStyleInjector"));
+const digit_css_generated_js_1 = __importDefault(require("./digit.css.generated.js"));
 const Digit = (_a) => {
     var rest = __rest(_a, []);
-    const scopeAttribute = (0, useStyleInjection_1.default)(digit_css_js_1.default.content, digit_css_js_1.default.hash, []);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, scopeAttribute, { style: { display: 'contents' }, children: (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest)) })));
+    const scopeAttribute = (0, useStyleInjector_1.default)(digit_css_generated_js_1.default.content, [], {
+        scopeID: digit_css_generated_js_1.default.hash,
+    });
+    if (Object.entries(scopeAttribute)[0].includes(true))
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, scopeAttribute, { style: { display: 'contents' }, children: (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest)) })));
+    return (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest));
 };
 exports.Digit = Digit;

lib/Digit/Digit.stories.d.ts

@@ -1,2 +0,1 @@
-import React from 'react';
 import type { StoryObj } from '@storybook/react';
@@ -3,0 +2,0 @@ import { Digit } from '../';

lib/Digit/Digit.stories.js

@@ -101,5 +101,5 @@ "use strict";
           button, input, p { font-size: 100%; font-family: sans-serif; margin: .25rem;}
-        ` }), (0, jsx_runtime_1.jsxs)("p", { children: ["charset: ", Array.from(charset).join(', ')] }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "digit", ref: input, onChange: handleChange, maxLength: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: addDigit, children: "Add digit" }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "8", segmentStyle: { thickness: '.35rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", blinkOptions: {
+        ` }), (0, jsx_runtime_1.jsx)("p", { children: "asynchronous blinking example (blinkOptions.sync = false)" }), (0, jsx_runtime_1.jsxs)("p", { children: ["charset: ", Array.from(charset).join(', ')] }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "digit", ref: input, onChange: handleChange, maxLength: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: addDigit, children: "Add digit" }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "8", segmentStyle: { thickness: '.35rem' } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", blinkOptions: {
                             period: 2000,
-                            ratio: 3,
+                            ratio: 1 / 3,
                         } }), dgts.split('').map((char, idx) => ((0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: char, onClick: () => removeDigit(idx), segmentStyle: {
@@ -106,0 +106,0 @@ transitionDuration: '0.5s',

lib/Digit/UnstyledDigit.js

@@ -24,2 +24,3 @@ "use strict";
     var { segmentStyle, value } = _a, rest = __rest(_a, ["segmentStyle", "value"]);
+    const v = value.toString();
     const type = valueToType(value);
@@ -29,11 +30,11 @@ const segments = type && valueToSegments(value); // {A: true, ...}
     if (type === 'digit')
-        return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({}, rest, segments, { style: sx }));
+        return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'colon')
-        return (0, jsx_runtime_1.jsx)(components_1.ColonSegments, Object.assign({}, rest, segments, { style: sx }));
+        return (0, jsx_runtime_1.jsx)(components_1.ColonSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'ampm')
-        return (0, jsx_runtime_1.jsx)(components_1.AmpmSegments, Object.assign({}, rest, segments, { style: sx }));
+        return (0, jsx_runtime_1.jsx)(components_1.AmpmSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     if (type === 'dot')
-        return (0, jsx_runtime_1.jsx)(components_1.DotSegments, Object.assign({}, rest, segments, { style: sx }));
+        return (0, jsx_runtime_1.jsx)(components_1.DotSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
     console.warn(`(at Digit.tsx) incompatible value: ${value.toString()}`);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, clsx_1.default)('digit unknown', rest.className) }));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": v }, rest, { className: (0, clsx_1.default)('digit unknown', rest.className) })));
 };
@@ -40,0 +41,0 @@ exports.Digit = Digit;

package.json

 {
   "name": "react-led-digit",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

83068

increased by9.47%

Number of package files

41

increased by5.13%

Lines of code

1751

increased by7.09%

No dependency changes