npm - @chayns-components/core - Versions diffs - 5.3.12-alpha.0 → 5.4.5-alpha.0 - Mend

@chayns-components/core 5.3.12-alpha.0 → 5.4.5-alpha.0

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.

Files changed (146) hide show

package/lib/cjs/components/file-list/file-item/FileItem.styles.js CHANGED Viewed

@@ -16,6 +16,12 @@ const StyledFileItemIcon = exports.StyledFileItemIcon = _styledComponents.defaul
     border-radius: 3px;
     padding: 6px;
     transition: background-color 0.3s ease;
+    &:focus-visible {
+        outline: none;
+        color: inherit;
+        ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss};
+    }
 `;
 const StyledFileItemKeyboardWrapper = exports.StyledFileItemKeyboardWrapper = _styledComponents.default.div`
     &:focus-visible {

package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","_keyboardFocusHighlighting","e","__esModule","default","StyledFileItem","exports","styled","div","StyledFileItemIcon","StyledFileItemKeyboardWrapper","keyboardFocusHighlightingRingCss","StyledFileItemActions","span","StyledFileItemRemoveButton"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n align-items: center;\n cursor: pointer;\n display: flex;\n background-color: transparent;\n border-radius: 3px;\n padding: 6px;\n transition: background-color 0.3s ease;\n`;\n\nexport const StyledFileItemKeyboardWrapper = styled.div`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n`;\n\nexport const StyledFileItemActions = styled.span`\n display: flex;\n gap: 8px;\n align-items: center;\n`;\n\nexport const StyledFileItemRemoveButton = styled.span`\n display: inline-flex;\n\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,0BAAA,GAAAD,OAAA;~~AAAmG~~,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;~~AAE5F~~,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACnC,MAAMC,kBAAkB,GAAAH,OAAA,CAAAG,kBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,~~MAAME~~,6BAA6B,~~GAAAJ~~,OAAA,~~CAAAI~~,6BAAA,~~GAAGH~~,yBAAM,CAACC,GAAG;AACvD;AACA,~~UAAUG~~,2DAAgC;AAC1C;AACA,CAAC;AAEM,MAAMC,qBAAqB,~~GAAAN~~,OAAA,~~CAAAM~~,qBAAA,~~GAAGL~~,yBAAM,~~CAACM~~,IAAI;AAChD;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,~~GAAAR~~,OAAA,~~CAAAQ~~,0BAAA,~~GAAGP~~,yBAAM,~~CAACM~~,IAAI;AACrD;AACA;AACA;AACA,UAAUF,2DAAgC;AAC1C;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"FileItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","_keyboardFocusHighlighting","e","__esModule","default","StyledFileItem","exports","styled","div","StyledFileItemIcon","keyboardFocusHighlightingCircleRingCss","StyledFileItemKeyboardWrapper","keyboardFocusHighlightingRingCss","StyledFileItemActions","span","StyledFileItemRemoveButton"],"sources":["../../../../../src/components/file-list/file-item/FileItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport {\n keyboardFocusHighlightingCircleRingCss,\n keyboardFocusHighlightingRingCss,\n} from '../../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledFileItem = styled.div``;\nexport const StyledFileItemIcon = styled.div`\n align-items: center;\n cursor: pointer;\n display: flex;\n background-color: transparent;\n border-radius: 3px;\n padding: 6px;\n transition: background-color 0.3s ease;\n\n &:focus-visible {\n outline: none;\n color: inherit;\n ${keyboardFocusHighlightingCircleRingCss};\n }\n`;\n\nexport const StyledFileItemKeyboardWrapper = styled.div`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n`;\n\nexport const StyledFileItemActions = styled.span`\n display: flex;\n gap: 8px;\n align-items: center;\n`;\n\nexport const StyledFileItemRemoveButton = styled.span`\n display: inline-flex;\n\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,0BAAA,GAAAD,OAAA;AAGyD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElD,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AACnC,MAAMC,kBAAkB,GAAAH,OAAA,CAAAG,kBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUE,iEAAsC;AAChD;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAL,OAAA,CAAAK,6BAAA,GAAGJ,yBAAM,CAACC,GAAG;AACvD;AACA,UAAUI,2DAAgC;AAC1C;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAP,OAAA,CAAAO,qBAAA,GAAGN,yBAAM,CAACO,IAAI;AAChD;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAT,OAAA,CAAAS,0BAAA,GAAGR,yBAAM,CAACO,IAAI;AACrD;AACA;AACA;AACA,UAAUF,2DAAgC;AAC1C;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/highlight-slider/HighlightSlider.js CHANGED Viewed

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _HighlightSlider = require("./HighlightSlider.styles");
 var _HighlightSliderItem = _interopRequireDefault(require("./highlight-slider-item/HighlightSliderItem"));
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
+var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const DEFAULT_HIGHLIGHT_SLIDER_COLORS = {
@@ -22,8 +23,10 @@ const HighlightSlider = ({
   duration = 10,
   shouldEnableKeyboardHighlighting
 }) => {
+  const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
   const isInteractive = typeof onIndexChange === 'function';
-  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && isInteractive);
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlightingEffective && isInteractive);
   const handleFinish = (0, _react.useCallback)(index => {
     if (typeof onIndexChange === 'function') {
       onIndexChange(index >= count - 1 ? 0 : index + 1);
@@ -45,10 +48,10 @@ const HighlightSlider = ({
     isFinished: currentIndex > index,
     onClick: handleClick,
     onFinish: handleFinish,
-    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
     shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     isInteractive: isInteractive
-  })), [colors, count, currentIndex, duration, handleClick, handleFinish, shouldEnableKeyboardHighlighting, shouldShowKeyboardHighlighting, isInteractive]);
+  })), [colors, count, currentIndex, duration, handleClick, handleFinish, shouldEnableKeyboardHighlightingEffective, shouldShowKeyboardHighlighting, isInteractive]);
   return /*#__PURE__*/_react.default.createElement(_HighlightSlider.StyledHighlightSlider, null, content);
 };
 HighlightSlider.displayName = 'HighlightSlider';

package/lib/cjs/components/highlight-slider/HighlightSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HighlightSlider.js","names":["_react","_interopRequireWildcard","require","_HighlightSlider","_HighlightSliderItem","_interopRequireDefault","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","shouldEnableKeyboardHighlighting","isInteractive","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleFinish","useCallback","index","handleClick","content","useMemo","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","StyledHighlightSlider","displayName","_default","exports"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n backgroundColor: '#E0E0E0',\n fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n /*\n The Colors of the slider.\n /\n colors?: HighlightSliderItemColors;\n /\n The total number of sections, that should be displayed.\n /\n count: number;\n /\n The current index.\n /\n currentIndex: number;\n /\n The duration of the animation of a single item in seconds.\n /\n duration?: number;\n /\n Function to be executed if the index has changed.\n /\n onIndexChange?: (index: number) => void;\n /\n Enables keyboard-only focus highlighting for interactive slider items.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n count,\n colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n onIndexChange,\n currentIndex,\n duration = 10,\n shouldEnableKeyboardHighlighting,\n}) => {\n const isInteractive = typeof onIndexChange === 'function';\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n ~~shouldEnableKeyboardHighlighting~~ && isInteractive,\n );\n\n const handleFinish = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index >= count - 1 ? 0 : index + 1);\n }\n },\n [count, onIndexChange],\n );\n\n const handleClick = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index);\n }\n },\n [onIndexChange],\n );\n\n const content = useMemo(\n () =>\n Array.from({ length: count }).map((value, index) => (\n <HighlightSliderItem\n key={`highlight-slider-item--${value as number}`}\n index={index}\n duration={duration}\n colors={colors}\n isActive={currentIndex === index}\n isFinished={currentIndex > index}\n onClick={handleClick}\n onFinish={handleFinish}\n shouldEnableKeyboardHighlighting={~~shouldEnableKeyboardHighlighting~~}\n shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n isInteractive={isInteractive}\n />\n )),\n [\n colors,\n count,\n currentIndex,\n duration,\n handleClick,\n handleFinish,\n ~~shouldEnableKeyboardHighlighting~~,\n shouldShowKeyboardHighlighting,\n isInteractive,\n ],\n );\n\n return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAGA,IAAAI,6BAAA,GAAAJ,OAAA;~~AAAwF~~,SAAAG,~~uBAAAE~~,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,~~SAAAN~~,~~wBAAAM~~,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAV~~,uBAAA,YAAAA,~~CAAAM~~,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;~~AAExF~~,MAAMgB,+BAA0D,GAAG;EAC/DC,eAAe,EAAE,SAAS;EAC1BC,SAAS,EAAE;AACf,CAAC;AA6BD,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,MAAM,GAAGL,+BAA+B;EACxCM,aAAa;EACbC,YAAY;EACZC,QAAQ,GAAG,EAAE;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,aAAa,GAAG,~~OAAOJ~~,aAAa,KAAK,UAAU;EACzD,MAAMK,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DH,~~gCAAgC~~,~~IAAIC~~,~~aACxC~~,CAAC;EAED,~~MAAMG~~,YAAY,GAAG,IAAAC,kBAAW,EAC3BC,KAAa,IAAK;IACf,IAAI,~~OAAOT~~,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,~~CAACS~~,KAAK,~~IAAIX~~,KAAK,GAAG,CAAC,GAAG,CAAC,~~GAAGW~~,KAAK,GAAG,CAAC,CAAC;IACrD;EACJ,CAAC,EACD,~~CAACX~~,KAAK,EAAEE,aAAa,CACzB,CAAC;EAED,~~MAAMU~~,WAAW,GAAG,IAAAF,kBAAW,EAC1BC,KAAa,IAAK;IACf,IAAI,~~OAAOT~~,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,~~CAACS~~,KAAK,CAAC;IACxB;EACJ,CAAC,EACD,~~CAACT~~,aAAa,CAClB,CAAC;EAED,~~MAAMW~~,OAAO,GAAG,IAAAC,cAAO,EACnB,MACIC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,~~EAAEjB~~;EAAM,CAAC,CAAC,~~CAACkB~~,GAAG,CAAC,CAACC,KAAK,EAAER,KAAK,~~kBAC3CzC~~,MAAA,~~CAAAS~~,OAAA,~~CAAAyC~~,aAAA,~~CAAC9C~~,oBAAA,~~CAAAK~~,OAAmB;~~IAChB0C~~,GAAG,EAAE,0BAA0BF,KAAK,EAAa;IACjDR,KAAK,EAAEA,KAAM;~~IACbP~~,QAAQ,EAAEA,QAAS;IACnBH,MAAM,EAAEA,MAAO;~~IACfqB~~,QAAQ,~~EAAEnB~~,YAAY,~~KAAKQ~~,KAAM;IACjCY,UAAU,~~EAAEpB~~,YAAY,~~GAAGQ~~,KAAM;IACjCa,OAAO,EAAEZ,WAAY;IACrBa,QAAQ,EAAEhB,YAAa;~~IACvBJ~~,gCAAgC,~~EAAEA~~,~~gCAAiC~~;~~IACnEE~~,8BAA8B,EAAEA,8BAA+B;IAC/DD,aAAa,EAAEA;EAAc,CAChC,CACJ,CAAC,EACN,~~CACIL~~,MAAM,EACND,KAAK,EACLG,YAAY,EACZC,QAAQ,~~EACRQ~~,WAAW,EACXH,YAAY,~~EACZJ~~,~~gCAAgC~~,~~EAChCE~~,8BAA8B,~~EAC9BD~~,aAAa,CAErB,CAAC;EAED,~~oBAAOpC~~,MAAA,~~CAAAS~~,OAAA,~~CAAAyC~~,aAAA,~~CAAC/C~~,gBAAA,~~CAAAqD~~,qBAAqB,QAAEb,OAA+B,CAAC;AACnE,CAAC;~~AAEDd~~,eAAe,~~CAAC4B~~,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAAlD~~,OAAA,GAEjCoB,eAAe","ignoreList":[]}
1	+ {"version":3,"file":"HighlightSlider.js","names":["_react","_interopRequireWildcard","require","_HighlightSlider","_HighlightSliderItem","_interopRequireDefault","_useKeyboardFocusHighlighting","_ColorSchemeProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_HIGHLIGHT_SLIDER_COLORS","backgroundColor","fillColor","HighlightSlider","count","colors","onIndexChange","currentIndex","duration","shouldEnableKeyboardHighlighting","colorScheme","useColorScheme","isInteractive","shouldEnableKeyboardHighlightingEffective","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleFinish","useCallback","index","handleClick","content","useMemo","Array","from","length","map","value","createElement","key","isActive","isFinished","onClick","onFinish","StyledHighlightSlider","displayName","_default","exports"],"sources":["../../../../src/components/highlight-slider/HighlightSlider.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { StyledHighlightSlider } from './HighlightSlider.styles';\nimport HighlightSliderItem, {\n HighlightSliderItemColors,\n} from './highlight-slider-item/HighlightSliderItem';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nconst DEFAULT_HIGHLIGHT_SLIDER_COLORS: HighlightSliderItemColors = {\n backgroundColor: '#E0E0E0',\n fillColor: '#808080',\n};\n\nexport type HighlightSliderProps = {\n /*\n The Colors of the slider.\n /\n colors?: HighlightSliderItemColors;\n /\n The total number of sections, that should be displayed.\n /\n count: number;\n /\n The current index.\n /\n currentIndex: number;\n /\n The duration of the animation of a single item in seconds.\n /\n duration?: number;\n /\n Function to be executed if the index has changed.\n /\n onIndexChange?: (index: number) => void;\n /\n Enables keyboard-only focus highlighting for interactive slider items.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst HighlightSlider: FC<HighlightSliderProps> = ({\n count,\n colors = DEFAULT_HIGHLIGHT_SLIDER_COLORS,\n onIndexChange,\n currentIndex,\n duration = 10,\n shouldEnableKeyboardHighlighting,\n}) => {\n const colorScheme = useColorScheme();\n const isInteractive = typeof onIndexChange === 'function';\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective && isInteractive,\n );\n\n const handleFinish = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index >= count - 1 ? 0 : index + 1);\n }\n },\n [count, onIndexChange],\n );\n\n const handleClick = useCallback(\n (index: number) => {\n if (typeof onIndexChange === 'function') {\n onIndexChange(index);\n }\n },\n [onIndexChange],\n );\n\n const content = useMemo(\n () =>\n Array.from({ length: count }).map((value, index) => (\n <HighlightSliderItem\n key={`highlight-slider-item--${value as number}`}\n index={index}\n duration={duration}\n colors={colors}\n isActive={currentIndex === index}\n isFinished={currentIndex > index}\n onClick={handleClick}\n onFinish={handleFinish}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n isInteractive={isInteractive}\n />\n )),\n [\n colors,\n count,\n currentIndex,\n duration,\n handleClick,\n handleFinish,\n shouldEnableKeyboardHighlightingEffective,\n shouldShowKeyboardHighlighting,\n isInteractive,\n ],\n );\n\n return <StyledHighlightSlider>{content}</StyledHighlightSlider>;\n};\n\nHighlightSlider.displayName = 'HighlightSlider';\n\nexport default HighlightSlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.js CHANGED Viewed

@@ -199,8 +199,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     initial: false,
     onClick: handleClearIconClick,
     onKeyDown: handleClearIconKeyDown,
-    tabIndex: shouldEnableKeyboardHighlighting && hasValue && !isDisabled ? 0 : -1,
-    role: shouldEnableKeyboardHighlighting ? 'button' : undefined,
+    tabIndex: shouldShowKeyboardHighlighting && hasValue && !isDisabled ? 0 : -1,
+    role: shouldShowKeyboardHighlighting ? 'button' : undefined,
     "aria-hidden": !hasValue,
     transition: {
       type: 'tween'

package/lib/cjs/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","shouldEnableKeyboardHighlighting","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","handleClearIconKeyDown","event","key","_inputRef$current","preventDefault","focus","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","internalColor","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","borderColor","border","placeholderColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","$shouldShowKeyboardHighlighting","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","tabIndex","role","icons","wrong","StyledInputRightElement","$isInline","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\ninterface Color {\n placeholder?: CSSProperties['color'];\n border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Colors for different parts of the input. You can set the color of the placeholder and the border color.\n /\n color?: Color;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n /\n value?: string;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n color,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n const handleClearIconKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleClearIconClick();\n inputRef.current?.focus();\n }\n },\n [handleClearIconClick],\n );\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let internalColor: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n internalColor = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const borderColor = color?.border;\n const placeholderColor = color?.placeholder;\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $borderColor={borderColor}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={internalColor}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $color={placeholderColor} $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n onKeyDown={handleClearIconKeyDown}\n tabIndex={\n shouldEnableKeyboardHighlighting && hasValue && !isDisabled\n ? 0\n : -1\n }\n role={shouldEnableKeyboardHighlighting ? 'button' : undefined}\n aria-hidden={!hasValue}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && (\n <StyledInputRightElement $isInline>\n {rightElement}\n </StyledInputRightElement>\n )}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n isDisabled,\n shouldShowTransparentBackground,\n backgroundColor,\n isInvalid,\n shouldShowBorder,\n shouldShowOnlyBottomBorder,\n size,\n leftElement,\n internalColor,\n placeholderWidth,\n id,\n onBlur,\n handleInputFieldChange,\n onFocus,\n onKeyDown,\n onPaste,\n type,\n value,\n shouldUseAutoFocus,\n inputMode,\n autoComplete,\n shouldShowCenteredContent,\n shouldPreventPlaceholderAnimation,\n hasValue,\n shouldRemainPlaceholder,\n theme.fontSize,\n theme.wrong,\n labelPosition,\n borderColor,\n placeholderColor,\n placeholder,\n shouldShowClearIcon,\n handleClearIconClick,\n handleClearIconKeyDown,\n rightElement,\n shouldEnableKeyboardHighlighting,\n shouldShowKeyboardHighlighting,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","shouldEnableKeyboardHighlighting","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","handleClearIconKeyDown","event","key","_inputRef$current","preventDefault","focus","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","internalColor","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","borderColor","border","placeholderColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","$shouldShowKeyboardHighlighting","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","tabIndex","role","icons","wrong","StyledInputRightElement","$isInline","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\ninterface Color {\n placeholder?: CSSProperties['color'];\n border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Colors for different parts of the input. You can set the color of the placeholder and the border color.\n /\n color?: Color;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n /\n value?: string;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n color,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n const handleClearIconKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleClearIconClick();\n inputRef.current?.focus();\n }\n },\n [handleClearIconClick],\n );\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let internalColor: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n internalColor = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const borderColor = color?.border;\n const placeholderColor = color?.placeholder;\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $borderColor={borderColor}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={internalColor}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $color={placeholderColor} $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n onKeyDown={handleClearIconKeyDown}\n tabIndex={\n shouldShowKeyboardHighlighting && hasValue && !isDisabled\n ? 0\n : -1\n }\n role={shouldShowKeyboardHighlighting ? 'button' : undefined}\n aria-hidden={!hasValue}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && (\n <StyledInputRightElement $isInline>\n {rightElement}\n </StyledInputRightElement>\n )}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n isDisabled,\n shouldShowTransparentBackground,\n backgroundColor,\n isInvalid,\n shouldShowBorder,\n shouldShowOnlyBottomBorder,\n size,\n leftElement,\n internalColor,\n placeholderWidth,\n id,\n onBlur,\n handleInputFieldChange,\n onFocus,\n onKeyDown,\n onPaste,\n type,\n value,\n shouldUseAutoFocus,\n inputMode,\n autoComplete,\n shouldShowCenteredContent,\n shouldPreventPlaceholderAnimation,\n hasValue,\n shouldRemainPlaceholder,\n theme.fontSize,\n theme.wrong,\n labelPosition,\n borderColor,\n placeholderColor,\n placeholder,\n shouldShowClearIcon,\n handleClearIconClick,\n handleClearIconKeyDown,\n rightElement,\n shouldEnableKeyboardHighlighting,\n shouldShowKeyboardHighlighting,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.styles.js CHANGED Viewed

@@ -101,7 +101,8 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
     ${({
   $shouldShowKeyboardHighlighting
 }) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-within {
+            /* Show highlighting when the input field is focused */
+            &:has(input:focus-visible) {
                 transition: none;
                 ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
             }
@@ -208,6 +209,10 @@ const StyledInputRightElement = exports.StyledInputRightElement = _styledCompone
             border-top-right-radius: 3px;
         `}
+    &:has(*:focus-visible) {
+        overflow: visible;
+    }
     .beta-chayns-icon:focus-visible::after {
         transform: translate(-50%, -50%) scale(0.78);
     }

package/lib/cjs/components/input/Input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement","$isInline"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n $borderColor?: CSSProperties['borderColor'];\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground, $borderColor }) => {\n if ($borderColor)\n return css`\n border-color: ${$borderColor};\n `;\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\ntype StyledInputRightElementProps = {\n $isInline?: boolean;\n};\n\nexport const StyledInputRightElement = styled.div<StyledInputRightElementProps>`\n flex: 0 0 auto;\n overflow: hidden;\n min-width: 28px;\n text-align: center;\n\n ${({ $isInline }) =>\n !$isInline &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n\n .beta-chayns-icon:focus-visible::after {\n transform: translate(-50%, -50%) scale(0.78);\n }\n`;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement","$isInline"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n $borderColor?: CSSProperties['borderColor'];\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground, $borderColor }) => {\n if ($borderColor)\n return css`\n border-color: ${$borderColor};\n `;\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n /* Show highlighting when the input field is focused /\n &:has(input:focus-visible) {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\ntype StyledInputRightElementProps = {\n $isInline?: boolean;\n};\n\nexport const StyledInputRightElement = styled.div<StyledInputRightElementProps>`\n flex: 0 0 auto;\n overflow: hidden;\n min-width: 28px;\n text-align: center;\n\n ${({ $isInline }) =>\n !$isInline &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n\n &:has(:focus-visible) {\n overflow: visible;\n }\n\n .beta-chayns-icon:focus-visible::after {\n transform: translate(-50%, -50%) scale(0.78);\n }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/List.utils.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldShowExpandIndicator = exports.isMarkedListItemElement = exports.isDirectListItemElement = exports.handleVerticalListGroupNavigation = exports.handleHorizontalArrowNavigation = void 0;
+exports.shouldShowExpandIndicator = exports.isMarkedListItemElement = exports.isDirectListItemElement = exports.handleVerticalListGroupNavigation = exports.handleListItemToggleKey = exports.handleListItemTabNavigation = exports.handleHorizontalArrowNavigation = void 0;
 var _react = require("react");
 var _ListItem = require("./list-item/ListItem.utils");
 const isDirectListItemElement = node => /*#__PURE__*/(0, _react.isValidElement)(node) && node.type.displayName === 'ListItem';
@@ -32,6 +32,36 @@ const getFocusedElementIndex = (elements, targetElement) => {
   }
   return elements.findIndex(element => element === targetElement || element.contains(targetElement));
 };
+const getListItemElementByIndex = ({
+  index,
+  listItemUuids,
+  listGroupUuid
+}) => {
+  const listItemUuid = listItemUuids[index];
+  if (!listItemUuid || typeof listGroupUuid !== 'string') {
+    return undefined;
+  }
+  return document.querySelector(`[data-uuid="${listGroupUuid}---${listItemUuid}"]`);
+};
+const focusListItemByIndex = ({
+  index,
+  listItemUuids,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  const listItemUuid = listItemUuids[index];
+  const listItemElement = getListItemElementByIndex({
+    index,
+    listItemUuids,
+    listGroupUuid
+  });
+  if (!listItemUuid || !listItemElement || typeof updateActiveListItemUuid !== 'function') {
+    return false;
+  }
+  updateActiveListItemUuid(listItemUuid);
+  listItemElement.focus();
+  return true;
+};
 const handleHorizontalArrowNavigation = ({
   event,
   currentListItemElement,
@@ -100,8 +130,10 @@ const handleHorizontalArrowNavigation = ({
   return false;
 };
 exports.handleHorizontalArrowNavigation = handleHorizontalArrowNavigation;
-const handleVerticalListGroupNavigation = ({
+const handleListItemTabNavigation = ({
   event,
+  currentListItemElement,
+  targetElement,
   isCurrentListItemTarget,
   isInKeyboardNavigationGroup,
   listItemUuids,
@@ -109,25 +141,65 @@ const handleVerticalListGroupNavigation = ({
   listGroupUuid,
   updateActiveListItemUuid
 }) => {
-  const isTab = event.key === 'Tab';
-  const isShiftTab = isTab && event.shiftKey;
-  if (!isCurrentListItemTarget || !isInKeyboardNavigationGroup || !(listItemUuids !== null && listItemUuids !== void 0 && listItemUuids.length) || event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && !isTab) {
+  if (event.key !== 'Tab' || !isInKeyboardNavigationGroup || !(listItemUuids !== null && listItemUuids !== void 0 && listItemUuids.length)) {
     return false;
   }
   const currentIndex = listItemUuids.indexOf(currentUuid);
   if (currentIndex === -1) {
-    return true;
+    return false;
   }
-  const isBackward = event.key === 'ArrowUp' || isShiftTab;
-  // For Tab at the boundaries, let the browser handle natural tab order
-  if (isTab) {
-    const isAtStart = currentIndex === 0;
-    const isAtEnd = currentIndex === listItemUuids.length - 1;
-    if (isShiftTab && isAtStart || !isShiftTab && isAtEnd) {
-      return false;
+  const focusableRightElements = getFocusableElements(currentListItemElement, RIGHT_ELEMENT_FOCUSABLE_SELECTOR);
+  const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);
+  if (event.shiftKey) {
+    return false;
+  }
+  if (isCurrentListItemTarget) {
+    if (focusableRightElements.length > 0) {
+      var _focusableRightElemen4;
+      event.preventDefault();
+      (_focusableRightElemen4 = focusableRightElements[0]) === null || _focusableRightElemen4 === void 0 || _focusableRightElemen4.focus();
+      return true;
     }
+    return false;
+  }
+  if (focusedRightElementIndex === -1) {
+    return false;
+  }
+  const nextRightElement = focusableRightElements[focusedRightElementIndex + 1];
+  if (nextRightElement) {
+    event.preventDefault();
+    nextRightElement.focus();
+    return true;
+  }
+  if (currentIndex < listItemUuids.length - 1) {
+    event.preventDefault();
+    return focusListItemByIndex({
+      index: currentIndex + 1,
+      listItemUuids,
+      listGroupUuid,
+      updateActiveListItemUuid
+    });
+  }
+  return false;
+};
+exports.handleListItemTabNavigation = handleListItemTabNavigation;
+const handleVerticalListGroupNavigation = ({
+  event,
+  isCurrentListItemTarget,
+  isInKeyboardNavigationGroup,
+  listItemUuids,
+  currentUuid,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  if (!isCurrentListItemTarget || !isInKeyboardNavigationGroup || !(listItemUuids !== null && listItemUuids !== void 0 && listItemUuids.length) || event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return false;
+  }
+  const currentIndex = listItemUuids.indexOf(currentUuid);
+  if (currentIndex === -1) {
+    return true;
   }
+  const isBackward = event.key === 'ArrowUp';
   event.preventDefault();
   const nextIndex = isBackward ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length : (currentIndex + 1) % listItemUuids.length;
   const nextListItemUuid = listItemUuids[nextIndex];
@@ -141,4 +213,26 @@ const handleVerticalListGroupNavigation = ({
   return true;
 };
 exports.handleVerticalListGroupNavigation = handleVerticalListGroupNavigation;
+const handleListItemToggleKey = ({
+  event,
+  isCurrentListItemTarget,
+  isExpandable,
+  isItemOpen,
+  shouldEnableKeyboardHighlighting,
+  toggleItem
+}) => {
+  if (!isCurrentListItemTarget || !shouldEnableKeyboardHighlighting) {
+    return false;
+  }
+  const shouldOpen = isExpandable && event.key === 'ArrowRight' && !isItemOpen;
+  const shouldClose = isExpandable && event.key === 'ArrowLeft' && isItemOpen;
+  const shouldToggle = event.key === 'Enter' || event.key === ' ';
+  if (!shouldOpen && !shouldClose && !shouldToggle) {
+    return false;
+  }
+  event.preventDefault();
+  toggleItem();
+  return true;
+};
+exports.handleListItemToggleKey = handleListItemToggleKey;
 //# sourceMappingURL=List.utils.js.map

package/lib/cjs/components/list/List.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.utils.js","names":["_react","require","_ListItem","isDirectListItemElement","node","isValidElement","type","displayName","exports","isMarkedListItemElement","$$listItem","LIST_ITEM_MARKER","shouldShowExpandIndicator","Children","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable","LEFT_ELEMENT_FOCUSABLE_SELECTOR","RIGHT_ELEMENT_FOCUSABLE_SELECTOR","getFocusableElements","root","selector","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","getFocusedElementIndex","elements","targetElement","length","findIndex","contains","handleHorizontalArrowNavigation","event","currentListItemElement","isCurrentListItemTarget","key","focusableLeftElements","focusableRightElements","focusedLeftElementIndex","preventDefault","previousLeftElement","focus","nextLeftElement","_focusableRightElemen","focusedRightElementIndex","_focusableRightElemen2","previousRightElement","_focusableLeftElement","_focusableLeftElement2","_focusableRightElemen3","handleVerticalListGroupNavigation","isInKeyboardNavigationGroup","listItemUuids","currentUuid","listGroupUuid","updateActiveListItemUuid","isTab","isShiftTab","shiftKey","currentIndex","indexOf","isBackward","isAtStart","isAtEnd","nextIndex","nextListItemUuid","nextListItemElement","document","querySelector"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import {\n Children,\n isValidElement,\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n isExpandable?: boolean;\n shouldHideIndicator?: boolean;\n children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) &&\n typeof node.type !== 'string' &&\n (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n Children.toArray(node).some((child) => {\n if (isDirectListItemElement(child)) {\n return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n }\n\n if (isMarkedListItemElement(child)) {\n return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n }\n\n if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n return shouldShowExpandIndicator(child.props.children);\n }\n\n return false;\n });\n\nconst LEFT_ELEMENT_FOCUSABLE_SELECTOR =\n '[data-left-element=\"true\"] a[href], [data-left-element=\"true\"] button, [data-left-element=\"true\"] input, [data-left-element=\"true\"] select, [data-left-element=\"true\"] textarea, [data-left-element=\"true\"] [tabindex], [data-left-element=\"true\"] [contenteditable=\"true\"]';\n\nconst RIGHT_ELEMENT_FOCUSABLE_SELECTOR =\n '[data-right-element=\"true\"] a[href], [data-right-element=\"true\"] button, [data-right-element=\"true\"] input, [data-right-element=\"true\"] select, [data-right-element=\"true\"] textarea, [data-right-element=\"true\"] [tabindex], [data-right-element=\"true\"] [contenteditable=\"true\"]';\n\nconst getFocusableElements = (root: HTMLElement, selector: string) =>\n Array.from(root.querySelectorAll<HTMLElement>(selector)).filter(\n (element) => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1',\n );\n\nconst getFocusedElementIndex = (elements: HTMLElement[], targetElement: HTMLElement \| null) => {\n if (!targetElement \|\| elements.length === 0) {\n return -1;\n }\n\n return elements.findIndex(\n (element) => element === targetElement \|\| element.contains(targetElement),\n );\n};\n\nexport const handleHorizontalArrowNavigation = ({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n}: {\n event: KeyboardEvent<HTMLDivElement>;\n currentListItemElement: HTMLDivElement;\n targetElement: HTMLElement \| null;\n isCurrentListItemTarget: boolean;\n}) => {\n if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {\n return false;\n }\n\n const focusableLeftElements = getFocusableElements(\n currentListItemElement,\n LEFT_ELEMENT_FOCUSABLE_SELECTOR,\n );\n\n const focusableRightElements = getFocusableElements(\n currentListItemElement,\n RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n );\n\n const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);\n\n if (focusedLeftElementIndex !== -1) {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];\n\n if (previousLeftElement) {\n previousLeftElement.focus();\n } else {\n currentListItemElement.focus();\n }\n\n return true;\n }\n\n const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];\n\n if (nextLeftElement) {\n nextLeftElement.focus();\n } else if (focusableRightElements.length > 0) {\n focusableRightElements[0]?.focus();\n }\n\n return true;\n }\n\n const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n if (focusedRightElementIndex !== -1) {\n event.preventDefault();\n\n if (event.key === 'ArrowRight') {\n focusableRightElements[focusedRightElementIndex + 1]?.focus();\n return true;\n }\n\n const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];\n\n if (previousRightElement) {\n previousRightElement.focus();\n } else if (focusableLeftElements.length > 0) {\n focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n } else {\n currentListItemElement.focus();\n }\n\n return true;\n }\n\n if (isCurrentListItemTarget) {\n if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {\n event.preventDefault();\n focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n return true;\n }\n\n if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {\n event.preventDefault();\n focusableRightElements[0]?.focus();\n return true;\n }\n }\n\n return false;\n};\n\nexport const handleVerticalListGroupNavigation = ({\n event,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid,\n listGroupUuid,\n updateActiveListItemUuid,\n}: {\n event: KeyboardEvent<HTMLDivElement>;\n isCurrentListItemTarget: boolean;\n isInKeyboardNavigationGroup: boolean;\n listItemUuids?: string[];\n currentUuid: string;\n listGroupUuid?: string;\n updateActiveListItemUuid?: (uuid?: string) => void;\n}) => {\n const isTab = event.key === 'Tab';\n const isShiftTab = isTab && event.shiftKey;\n\n if (\n !isCurrentListItemTarget \|\|\n !isInKeyboardNavigationGroup \|\|\n !listItemUuids?.length \|\|\n (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && !isTab)\n ) {\n return false;\n }\n\n const currentIndex = listItemUuids.indexOf(currentUuid);\n\n if (currentIndex === -1) {\n return true;\n }\n\n const isBackward = event.key === 'ArrowUp' \|\| isShiftTab;\n\n // For Tab at the boundaries, let the browser handle natural tab order\n if (isTab) {\n const isAtStart = currentIndex === 0;\n const isAtEnd = currentIndex === listItemUuids.length - 1;\n\n if ((isShiftTab && isAtStart) \|\| (!isShiftTab && isAtEnd)) {\n return false;\n }\n }\n\n event.preventDefault();\n\n const nextIndex = isBackward\n ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length\n : (currentIndex + 1) % listItemUuids.length;\n\n const nextListItemUuid = listItemUuids[nextIndex];\n\n if (\n nextListItemUuid &&\n nextListItemUuid !== currentUuid &&\n typeof listGroupUuid === 'string' &&\n typeof updateActiveListItemUuid === 'function'\n ) {\n const nextListItemElement = document.querySelector<HTMLDivElement>(\n `[data-uuid=\"${listGroupUuid}---${nextListItemUuid}\"]`,\n );\n\n if (nextListItemElement) {\n updateActiveListItemUuid(nextListItemUuid);\n nextListItemElement.focus();\n }\n }\n\n return true;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"List.utils.js","names":["_react","require","_ListItem","isDirectListItemElement","node","isValidElement","type","displayName","exports","isMarkedListItemElement","$$listItem","LIST_ITEM_MARKER","shouldShowExpandIndicator","Children","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable","LEFT_ELEMENT_FOCUSABLE_SELECTOR","RIGHT_ELEMENT_FOCUSABLE_SELECTOR","getFocusableElements","root","selector","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","getFocusedElementIndex","elements","targetElement","length","findIndex","contains","getListItemElementByIndex","index","listItemUuids","listGroupUuid","listItemUuid","document","querySelector","focusListItemByIndex","updateActiveListItemUuid","listItemElement","focus","handleHorizontalArrowNavigation","event","currentListItemElement","isCurrentListItemTarget","key","focusableLeftElements","focusableRightElements","focusedLeftElementIndex","preventDefault","previousLeftElement","nextLeftElement","_focusableRightElemen","focusedRightElementIndex","_focusableRightElemen2","previousRightElement","_focusableLeftElement","_focusableLeftElement2","_focusableRightElemen3","handleListItemTabNavigation","isInKeyboardNavigationGroup","currentUuid","currentIndex","indexOf","shiftKey","_focusableRightElemen4","nextRightElement","handleVerticalListGroupNavigation","isBackward","nextIndex","nextListItemUuid","nextListItemElement","handleListItemToggleKey","isItemOpen","shouldEnableKeyboardHighlighting","toggleItem","shouldOpen","shouldClose","shouldToggle"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import {\n Children,\n isValidElement,\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n isExpandable?: boolean;\n shouldHideIndicator?: boolean;\n children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n isValidElement(node) &&\n typeof node.type !== 'string' &&\n (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n Children.toArray(node).some((child) => {\n if (isDirectListItemElement(child)) {\n return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n }\n\n if (isMarkedListItemElement(child)) {\n return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n }\n\n if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n return shouldShowExpandIndicator(child.props.children);\n }\n\n return false;\n });\n\nconst LEFT_ELEMENT_FOCUSABLE_SELECTOR =\n '[data-left-element=\"true\"] a[href], [data-left-element=\"true\"] button, [data-left-element=\"true\"] input, [data-left-element=\"true\"] select, [data-left-element=\"true\"] textarea, [data-left-element=\"true\"] [tabindex], [data-left-element=\"true\"] [contenteditable=\"true\"]';\n\nconst RIGHT_ELEMENT_FOCUSABLE_SELECTOR =\n '[data-right-element=\"true\"] a[href], [data-right-element=\"true\"] button, [data-right-element=\"true\"] input, [data-right-element=\"true\"] select, [data-right-element=\"true\"] textarea, [data-right-element=\"true\"] [tabindex], [data-right-element=\"true\"] [contenteditable=\"true\"]';\n\nconst getFocusableElements = (root: HTMLElement, selector: string) =>\n Array.from(root.querySelectorAll<HTMLElement>(selector)).filter(\n (element) => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1',\n );\n\nconst getFocusedElementIndex = (elements: HTMLElement[], targetElement: HTMLElement \| null) => {\n if (!targetElement \|\| elements.length === 0) {\n return -1;\n }\n\n return elements.findIndex(\n (element) => element === targetElement \|\| element.contains(targetElement),\n );\n};\n\ntype ListGroupNavigationParams = {\n event: KeyboardEvent<HTMLDivElement>;\n isCurrentListItemTarget: boolean;\n isInKeyboardNavigationGroup: boolean;\n listItemUuids?: string[];\n currentUuid: string;\n listGroupUuid?: string;\n updateActiveListItemUuid?: (uuid?: string) => void;\n};\n\ntype ListItemTabNavigationParams = ListGroupNavigationParams & {\n currentListItemElement: HTMLDivElement;\n targetElement: HTMLElement \| null;\n};\n\ntype ListItemToggleKeyParams = {\n event: KeyboardEvent<HTMLDivElement>;\n isCurrentListItemTarget: boolean;\n isExpandable: boolean;\n isItemOpen: boolean;\n shouldEnableKeyboardHighlighting: boolean;\n toggleItem: VoidFunction;\n};\n\nconst getListItemElementByIndex = ({\n index,\n listItemUuids,\n listGroupUuid,\n}: {\n index: number;\n listItemUuids: string[];\n listGroupUuid?: string;\n}) => {\n const listItemUuid = listItemUuids[index];\n\n if (!listItemUuid \|\| typeof listGroupUuid !== 'string') {\n return undefined;\n }\n\n return document.querySelector<HTMLDivElement>(\n `[data-uuid=\"${listGroupUuid}---${listItemUuid}\"]`,\n );\n};\n\nconst focusListItemByIndex = ({\n index,\n listItemUuids,\n listGroupUuid,\n updateActiveListItemUuid,\n}: {\n index: number;\n listItemUuids: string[];\n listGroupUuid?: string;\n updateActiveListItemUuid?: (uuid?: string) => void;\n}) => {\n const listItemUuid = listItemUuids[index];\n const listItemElement = getListItemElementByIndex({ index, listItemUuids, listGroupUuid });\n\n if (!listItemUuid \|\| !listItemElement \|\| typeof updateActiveListItemUuid !== 'function') {\n return false;\n }\n\n updateActiveListItemUuid(listItemUuid);\n listItemElement.focus();\n return true;\n};\n\nexport const handleHorizontalArrowNavigation = ({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n}: {\n event: KeyboardEvent<HTMLDivElement>;\n currentListItemElement: HTMLDivElement;\n targetElement: HTMLElement \| null;\n isCurrentListItemTarget: boolean;\n}) => {\n if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {\n return false;\n }\n\n const focusableLeftElements = getFocusableElements(\n currentListItemElement,\n LEFT_ELEMENT_FOCUSABLE_SELECTOR,\n );\n\n const focusableRightElements = getFocusableElements(\n currentListItemElement,\n RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n );\n\n const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);\n\n if (focusedLeftElementIndex !== -1) {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];\n\n if (previousLeftElement) {\n previousLeftElement.focus();\n } else {\n currentListItemElement.focus();\n }\n\n return true;\n }\n\n const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];\n\n if (nextLeftElement) {\n nextLeftElement.focus();\n } else if (focusableRightElements.length > 0) {\n focusableRightElements[0]?.focus();\n }\n\n return true;\n }\n\n const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n if (focusedRightElementIndex !== -1) {\n event.preventDefault();\n\n if (event.key === 'ArrowRight') {\n focusableRightElements[focusedRightElementIndex + 1]?.focus();\n return true;\n }\n\n const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];\n\n if (previousRightElement) {\n previousRightElement.focus();\n } else if (focusableLeftElements.length > 0) {\n focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n } else {\n currentListItemElement.focus();\n }\n\n return true;\n }\n\n if (isCurrentListItemTarget) {\n if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {\n event.preventDefault();\n focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n return true;\n }\n\n if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {\n event.preventDefault();\n focusableRightElements[0]?.focus();\n return true;\n }\n }\n\n return false;\n};\n\nexport const handleListItemTabNavigation = ({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid,\n listGroupUuid,\n updateActiveListItemUuid,\n}: ListItemTabNavigationParams) => {\n if (event.key !== 'Tab' \|\| !isInKeyboardNavigationGroup \|\| !listItemUuids?.length) {\n return false;\n }\n\n const currentIndex = listItemUuids.indexOf(currentUuid);\n\n if (currentIndex === -1) {\n return false;\n }\n\n const focusableRightElements = getFocusableElements(\n currentListItemElement,\n RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n );\n const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n if (event.shiftKey) {\n return false;\n }\n\n if (isCurrentListItemTarget) {\n if (focusableRightElements.length > 0) {\n event.preventDefault();\n focusableRightElements[0]?.focus();\n return true;\n }\n\n return false;\n }\n\n if (focusedRightElementIndex === -1) {\n return false;\n }\n\n const nextRightElement = focusableRightElements[focusedRightElementIndex + 1];\n\n if (nextRightElement) {\n event.preventDefault();\n nextRightElement.focus();\n return true;\n }\n\n if (currentIndex < listItemUuids.length - 1) {\n event.preventDefault();\n return focusListItemByIndex({\n index: currentIndex + 1,\n listItemUuids,\n listGroupUuid,\n updateActiveListItemUuid,\n });\n }\n\n return false;\n};\n\nexport const handleVerticalListGroupNavigation = ({\n event,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid,\n listGroupUuid,\n updateActiveListItemUuid,\n}: ListGroupNavigationParams) => {\n if (\n !isCurrentListItemTarget \|\|\n !isInKeyboardNavigationGroup \|\|\n !listItemUuids?.length \|\|\n (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')\n ) {\n return false;\n }\n\n const currentIndex = listItemUuids.indexOf(currentUuid);\n\n if (currentIndex === -1) {\n return true;\n }\n\n const isBackward = event.key === 'ArrowUp';\n\n event.preventDefault();\n\n const nextIndex = isBackward\n ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length\n : (currentIndex + 1) % listItemUuids.length;\n\n const nextListItemUuid = listItemUuids[nextIndex];\n\n if (\n nextListItemUuid &&\n nextListItemUuid !== currentUuid &&\n typeof listGroupUuid === 'string' &&\n typeof updateActiveListItemUuid === 'function'\n ) {\n const nextListItemElement = document.querySelector<HTMLDivElement>(\n `[data-uuid=\"${listGroupUuid}---${nextListItemUuid}\"]`,\n );\n\n if (nextListItemElement) {\n updateActiveListItemUuid(nextListItemUuid);\n nextListItemElement.focus();\n }\n }\n\n return true;\n};\n\nexport const handleListItemToggleKey = ({\n event,\n isCurrentListItemTarget,\n isExpandable,\n isItemOpen,\n shouldEnableKeyboardHighlighting,\n toggleItem,\n}: ListItemToggleKeyParams) => {\n if (!isCurrentListItemTarget \|\| !shouldEnableKeyboardHighlighting) {\n return false;\n }\n\n const shouldOpen = isExpandable && event.key === 'ArrowRight' && !isItemOpen;\n const shouldClose = isExpandable && event.key === 'ArrowLeft' && isItemOpen;\n const shouldToggle = event.key === 'Enter' \|\| event.key === ' ';\n\n if (!shouldOpen && !shouldClose && !shouldToggle) {\n return false;\n }\n\n event.preventDefault();\n toggleItem();\n return true;\n};\n"],"mappings":"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","ignoreList":[]}