@fremtind/jkl-core
Advanced tools
Comparing version 10.0.2 to 10.0.3
@@ -1,222 +0,34 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var cn = require('classnames'); | ||
var React = require('react'); | ||
var _extends = require('@babel/runtime/helpers/extends'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn); | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends); | ||
let mousenavigation = false; | ||
let touchnavigation = false; | ||
let touchEventFired = false; | ||
const listeners = { | ||
mousedown: handleMouseDown, | ||
keydown: handleKeydown, | ||
touchstart: handleTouchStart | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
var __export = (target, all) => { | ||
for (var name in all) | ||
__defProp(target, name, { get: all[name], enumerable: true }); | ||
}; | ||
function removeAllListeners() { | ||
Object.keys(listeners).forEach(listenerType => { | ||
document.removeEventListener(listenerType, listeners[listenerType]); | ||
}); | ||
} | ||
function addListener(listenerType) { | ||
document.addEventListener(listenerType, listeners[listenerType]); | ||
} | ||
function handleMouseDown() { | ||
if (!mousenavigation && !touchEventFired) { | ||
mousenavigation = true; | ||
touchnavigation = false; | ||
const htmlElement = document.querySelector("html"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.setAttribute("data-mousenavigation", "true"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-touchnavigation"); // Reset listeners | ||
removeAllListeners(); | ||
addListener("touchstart"); | ||
addListener("keydown"); | ||
var __copyProps = (to, from, except, desc) => { | ||
if (from && typeof from === "object" || typeof from === "function") { | ||
for (let key of __getOwnPropNames(from)) | ||
if (!__hasOwnProp.call(to, key) && key !== except) | ||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
} | ||
} | ||
function handleKeydown(event) { | ||
if (event.key === "Tab") { | ||
const htmlElement = document.querySelector("html"); | ||
removeAllListeners(); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-mousenavigation"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-touchnavigation"); | ||
mousenavigation = false; | ||
touchnavigation = false; // Reset listeners | ||
addListener("touchstart"); | ||
addListener("mousedown"); | ||
} | ||
} | ||
function handleTouchStart() { | ||
if (!touchnavigation) { | ||
mousenavigation = false; | ||
touchnavigation = true; | ||
const htmlElement = document.querySelector("html"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.setAttribute("data-touchnavigation", "true"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-mousenavigation"); // Reset listeners | ||
removeAllListeners(); | ||
addListener("touchstart"); | ||
addListener("keydown"); | ||
addListener("mousedown"); | ||
} // Most touch devices fire both touch and mouse events on touch (in that order) | ||
// see https://w3c.github.io/touch-events/#mouse-events | ||
// Set a check variable to avoid resetting the data-attribute: | ||
touchEventFired = true; | ||
setTimeout(() => { | ||
touchEventFired = false; | ||
}, 150); // Yes, it can take this long between the events | ||
} | ||
function initTabListener() { | ||
if (typeof document !== "undefined") { | ||
addListener("touchstart"); | ||
addListener("mousedown"); | ||
} | ||
} | ||
function getValuePair(item) { | ||
return typeof item === "string" ? { | ||
value: item, | ||
label: item | ||
} : item; | ||
} | ||
const breakpoints = { | ||
medium: 680, | ||
large: 1200, | ||
xl: 1600 | ||
return to; | ||
}; | ||
const easings = Object.freeze({ | ||
standard: "ease", | ||
entrance: "ease-out", | ||
exit: "ease-in", | ||
easeInBounceOut: "cubic-bezier(0, 0, 0.375, 1.17)" | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
var src_exports = {}; | ||
__export(src_exports, { | ||
Label: () => import_components.Label, | ||
Link: () => import_components.Link, | ||
NavLink: () => import_components.NavLink, | ||
ScreenReaderOnly: () => import_components.ScreenReaderOnly, | ||
SupportLabel: () => import_components.SupportLabel, | ||
breakpoints: () => import_utils.breakpoints, | ||
easings: () => import_utils.easings, | ||
getValuePair: () => import_utils.getValuePair, | ||
initTabListener: () => import_utils.initTabListener, | ||
timings: () => import_utils.timings | ||
}); | ||
const timings = Object.freeze({ | ||
energetic: "75ms", | ||
productive: "150ms", | ||
expressive: "250ms", | ||
lazy: "400ms" | ||
}); | ||
const Label = ({ | ||
variant = "small", | ||
forceCompact, | ||
srOnly, | ||
children, | ||
standAlone, | ||
htmlFor, | ||
className = "" | ||
}) => { | ||
const labelClassNames = cn__default["default"]("jkl-label", className, { | ||
[`jkl-label--${variant}`]: variant, | ||
"jkl-label--compact": forceCompact, | ||
"jkl-label--sr-only": srOnly | ||
}); | ||
const C = standAlone ? "label" : "span"; | ||
if (!standAlone && htmlFor) { | ||
htmlFor = undefined; | ||
if (process.env.NODE_ENV !== "production") { | ||
console.warn("WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components."); | ||
} | ||
} | ||
return /*#__PURE__*/React__default["default"].createElement(C, { | ||
className: labelClassNames, | ||
htmlFor: htmlFor | ||
}, children); | ||
}; | ||
const Link = ({ | ||
external = false, | ||
className = "", | ||
children, | ||
...rest | ||
}) => /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({ | ||
className: cn__default["default"]("jkl-link", className, { | ||
"jkl-link--external": external | ||
}) | ||
}, rest), children); | ||
const NavLink = ({ | ||
active = false, | ||
back = false, | ||
className, | ||
children, | ||
...rest | ||
}) => /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({ | ||
className: cn__default["default"]("jkl-nav-link", { | ||
"jkl-nav-link--active": active, | ||
"jkl-nav-link--back": back | ||
}, className) | ||
}, rest), children); | ||
const ScreenReaderOnly = ({ | ||
children, | ||
showOnFocus | ||
}) => /*#__PURE__*/React__default["default"].createElement("span", { | ||
className: `jkl-sr-only ${showOnFocus ? "jkl-sr-only--focusable" : ""}` | ||
}, children); | ||
const SupportLabel = ({ | ||
id, | ||
helpLabel, | ||
errorLabel, | ||
forceCompact, | ||
className, | ||
srOnly, | ||
...rest | ||
}) => { | ||
const hasLabel = errorLabel || helpLabel; | ||
const componentClassName = hasLabel ? cn__default["default"]("jkl-form-support-label", className, { | ||
"jkl-form-support-label--compact": forceCompact, | ||
"jkl-form-support-label--error": errorLabel, | ||
"jkl-form-support-label--help": !errorLabel, | ||
"jkl-form-support-label--sr-only": srOnly | ||
}) : "jkl-dormant-form-support-label"; | ||
const restProps = hasLabel ? rest : {}; | ||
return /*#__PURE__*/React__default["default"].createElement("span", _extends__default["default"]({ | ||
id: id, | ||
className: componentClassName | ||
}, restProps), /*#__PURE__*/React__default["default"].createElement("svg", { | ||
className: "jkl-form-support-label__icon", | ||
"aria-hidden": true, | ||
viewBox: "0 0 24 24", | ||
fill: "none", | ||
xmlns: "http://www.w3.org/2000/svg" | ||
}, /*#__PURE__*/React__default["default"].createElement("path", { | ||
fillRule: "evenodd", | ||
clipRule: "evenodd", | ||
d: "M18.3588 20.5107L5.64157 20.5107C3.33259 20.5107 1.88917 18.0116 3.04301 16.0116L9.40163 4.98996C10.5561 2.98885 13.4443 2.98885 14.5987 4.98996L20.9574 16.0116C22.1112 18.0116 20.6678 20.5107 18.3588 20.5107ZM12.7515 13.6525L12.7515 7.63131L11.9988 7.63131L11.2462 7.63131L11.2462 13.6525L12.7515 13.6525ZM12.0012 15.0458C11.441 15.0458 10.9868 15.5 10.9868 16.0602C10.9868 16.6205 11.441 17.0747 12.0012 17.0747C12.5615 17.0747 13.0157 16.6205 13.0157 16.0602C13.0157 15.5 12.5615 15.0458 12.0012 15.0458Z", | ||
fill: "currentColor" | ||
})), errorLabel || helpLabel); | ||
}; | ||
exports.Label = Label; | ||
exports.Link = Link; | ||
exports.NavLink = NavLink; | ||
exports.ScreenReaderOnly = ScreenReaderOnly; | ||
exports.SupportLabel = SupportLabel; | ||
exports.breakpoints = breakpoints; | ||
exports.easings = easings; | ||
exports.getValuePair = getValuePair; | ||
exports.initTabListener = initTabListener; | ||
exports.timings = timings; | ||
module.exports = __toCommonJS(src_exports); | ||
var import_utils = require("./utils"); | ||
var import_components = require("./components"); | ||
//# sourceMappingURL=index.js.map |
@@ -1,203 +0,15 @@ | ||
import cn from 'classnames'; | ||
import React from 'react'; | ||
import _extends from '@babel/runtime/helpers/extends'; | ||
let mousenavigation = false; | ||
let touchnavigation = false; | ||
let touchEventFired = false; | ||
const listeners = { | ||
mousedown: handleMouseDown, | ||
keydown: handleKeydown, | ||
touchstart: handleTouchStart | ||
import { initTabListener, getValuePair, breakpoints, timings, easings } from "./utils"; | ||
import { Label, Link, NavLink, ScreenReaderOnly, SupportLabel } from "./components"; | ||
export { | ||
Label, | ||
Link, | ||
NavLink, | ||
ScreenReaderOnly, | ||
SupportLabel, | ||
breakpoints, | ||
easings, | ||
getValuePair, | ||
initTabListener, | ||
timings | ||
}; | ||
function removeAllListeners() { | ||
Object.keys(listeners).forEach(listenerType => { | ||
document.removeEventListener(listenerType, listeners[listenerType]); | ||
}); | ||
} | ||
function addListener(listenerType) { | ||
document.addEventListener(listenerType, listeners[listenerType]); | ||
} | ||
function handleMouseDown() { | ||
if (!mousenavigation && !touchEventFired) { | ||
mousenavigation = true; | ||
touchnavigation = false; | ||
const htmlElement = document.querySelector("html"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.setAttribute("data-mousenavigation", "true"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-touchnavigation"); // Reset listeners | ||
removeAllListeners(); | ||
addListener("touchstart"); | ||
addListener("keydown"); | ||
} | ||
} | ||
function handleKeydown(event) { | ||
if (event.key === "Tab") { | ||
const htmlElement = document.querySelector("html"); | ||
removeAllListeners(); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-mousenavigation"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-touchnavigation"); | ||
mousenavigation = false; | ||
touchnavigation = false; // Reset listeners | ||
addListener("touchstart"); | ||
addListener("mousedown"); | ||
} | ||
} | ||
function handleTouchStart() { | ||
if (!touchnavigation) { | ||
mousenavigation = false; | ||
touchnavigation = true; | ||
const htmlElement = document.querySelector("html"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.setAttribute("data-touchnavigation", "true"); | ||
htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.removeAttribute("data-mousenavigation"); // Reset listeners | ||
removeAllListeners(); | ||
addListener("touchstart"); | ||
addListener("keydown"); | ||
addListener("mousedown"); | ||
} // Most touch devices fire both touch and mouse events on touch (in that order) | ||
// see https://w3c.github.io/touch-events/#mouse-events | ||
// Set a check variable to avoid resetting the data-attribute: | ||
touchEventFired = true; | ||
setTimeout(() => { | ||
touchEventFired = false; | ||
}, 150); // Yes, it can take this long between the events | ||
} | ||
function initTabListener() { | ||
if (typeof document !== "undefined") { | ||
addListener("touchstart"); | ||
addListener("mousedown"); | ||
} | ||
} | ||
function getValuePair(item) { | ||
return typeof item === "string" ? { | ||
value: item, | ||
label: item | ||
} : item; | ||
} | ||
const breakpoints = { | ||
medium: 680, | ||
large: 1200, | ||
xl: 1600 | ||
}; | ||
const easings = Object.freeze({ | ||
standard: "ease", | ||
entrance: "ease-out", | ||
exit: "ease-in", | ||
easeInBounceOut: "cubic-bezier(0, 0, 0.375, 1.17)" | ||
}); | ||
const timings = Object.freeze({ | ||
energetic: "75ms", | ||
productive: "150ms", | ||
expressive: "250ms", | ||
lazy: "400ms" | ||
}); | ||
const Label = ({ | ||
variant = "small", | ||
forceCompact, | ||
srOnly, | ||
children, | ||
standAlone, | ||
htmlFor, | ||
className = "" | ||
}) => { | ||
const labelClassNames = cn("jkl-label", className, { | ||
[`jkl-label--${variant}`]: variant, | ||
"jkl-label--compact": forceCompact, | ||
"jkl-label--sr-only": srOnly | ||
}); | ||
const C = standAlone ? "label" : "span"; | ||
if (!standAlone && htmlFor) { | ||
htmlFor = undefined; | ||
if (process.env.NODE_ENV !== "production") { | ||
console.warn("WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components."); | ||
} | ||
} | ||
return /*#__PURE__*/React.createElement(C, { | ||
className: labelClassNames, | ||
htmlFor: htmlFor | ||
}, children); | ||
}; | ||
const Link = ({ | ||
external = false, | ||
className = "", | ||
children, | ||
...rest | ||
}) => /*#__PURE__*/React.createElement("a", _extends({ | ||
className: cn("jkl-link", className, { | ||
"jkl-link--external": external | ||
}) | ||
}, rest), children); | ||
const NavLink = ({ | ||
active = false, | ||
back = false, | ||
className, | ||
children, | ||
...rest | ||
}) => /*#__PURE__*/React.createElement("a", _extends({ | ||
className: cn("jkl-nav-link", { | ||
"jkl-nav-link--active": active, | ||
"jkl-nav-link--back": back | ||
}, className) | ||
}, rest), children); | ||
const ScreenReaderOnly = ({ | ||
children, | ||
showOnFocus | ||
}) => /*#__PURE__*/React.createElement("span", { | ||
className: `jkl-sr-only ${showOnFocus ? "jkl-sr-only--focusable" : ""}` | ||
}, children); | ||
const SupportLabel = ({ | ||
id, | ||
helpLabel, | ||
errorLabel, | ||
forceCompact, | ||
className, | ||
srOnly, | ||
...rest | ||
}) => { | ||
const hasLabel = errorLabel || helpLabel; | ||
const componentClassName = hasLabel ? cn("jkl-form-support-label", className, { | ||
"jkl-form-support-label--compact": forceCompact, | ||
"jkl-form-support-label--error": errorLabel, | ||
"jkl-form-support-label--help": !errorLabel, | ||
"jkl-form-support-label--sr-only": srOnly | ||
}) : "jkl-dormant-form-support-label"; | ||
const restProps = hasLabel ? rest : {}; | ||
return /*#__PURE__*/React.createElement("span", _extends({ | ||
id: id, | ||
className: componentClassName | ||
}, restProps), /*#__PURE__*/React.createElement("svg", { | ||
className: "jkl-form-support-label__icon", | ||
"aria-hidden": true, | ||
viewBox: "0 0 24 24", | ||
fill: "none", | ||
xmlns: "http://www.w3.org/2000/svg" | ||
}, /*#__PURE__*/React.createElement("path", { | ||
fillRule: "evenodd", | ||
clipRule: "evenodd", | ||
d: "M18.3588 20.5107L5.64157 20.5107C3.33259 20.5107 1.88917 18.0116 3.04301 16.0116L9.40163 4.98996C10.5561 2.98885 13.4443 2.98885 14.5987 4.98996L20.9574 16.0116C22.1112 18.0116 20.6678 20.5107 18.3588 20.5107ZM12.7515 13.6525L12.7515 7.63131L11.9988 7.63131L11.2462 7.63131L11.2462 13.6525L12.7515 13.6525ZM12.0012 15.0458C11.441 15.0458 10.9868 15.5 10.9868 16.0602C10.9868 16.6205 11.441 17.0747 12.0012 17.0747C12.5615 17.0747 13.0157 16.6205 13.0157 16.0602C13.0157 15.5 12.5615 15.0458 12.0012 15.0458Z", | ||
fill: "currentColor" | ||
})), errorLabel || helpLabel); | ||
}; | ||
export { Label, Link, NavLink, ScreenReaderOnly, SupportLabel, breakpoints, easings, getValuePair, initTabListener, timings }; | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@fremtind/jkl-core", | ||
"version": "10.0.2", | ||
"version": "10.0.3", | ||
"publishConfig": { | ||
@@ -21,3 +21,7 @@ "access": "public" | ||
"module": "./build/esm/index.js", | ||
"browser": "./build/browser/index.js", | ||
"browser": "./build/esm/index.js", | ||
"sideEffects": [ | ||
"*.css", | ||
"*.scss" | ||
], | ||
"directories": { | ||
@@ -40,7 +44,7 @@ "lib": "build" | ||
"build:types": "tsc -p tsconfig-for-declarations.json", | ||
"build:scripts": "rollup --config ../../rollup.config.js", | ||
"build:scripts": "node ./esbuild.prod.mjs", | ||
"test": "echo \"Error: run tests from root\" && exit 1", | ||
"dev:js": "ESBUILD_WATCH=true node ./esbuild.mjs", | ||
"dev:js": "ESBUILD_WATCH=true node ./esbuild.dev.mjs", | ||
"dev:server": "node ./dist/server.js", | ||
"predev": "node ./esbuild.mjs", | ||
"predev": "node ./esbuild.dev.mjs", | ||
"dev": "run-p dev:*" | ||
@@ -56,3 +60,2 @@ }, | ||
"dependencies": { | ||
"@babel/runtime": "^7.17.8", | ||
"classnames": "^2.2.6" | ||
@@ -66,3 +69,3 @@ }, | ||
}, | ||
"gitHead": "d471a0c0caacdb01d183d59ed2e7bdc190646f61" | ||
"gitHead": "41c541ee1ca9b890f50d931d7541d69e1ccd61ac" | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
176891
5
110
2315
0
1
- Removed@babel/runtime@^7.17.8
- Removed@babel/runtime@7.25.9(transitive)
- Removedregenerator-runtime@0.14.1(transitive)