@salutejs/plasma-new-hope 0.337.0-canary.2184.17907394393.0 → 0.337.0-canary.2184.17942080334.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 (62) hide show
  1. package/cjs/components/Modal/Modal.js +4 -2
  2. package/cjs/components/Modal/Modal.js.map +1 -1
  3. package/cjs/components/TimePicker/TimePicker.css +5 -5
  4. package/cjs/components/TimePicker/TimePicker.styles.js +1 -1
  5. package/cjs/components/TimePicker/TimePicker.styles.js.map +1 -1
  6. package/cjs/components/TimePicker/{TimePicker.styles_1ie9d7j.css → TimePicker.styles_thn2wn.css} +1 -1
  7. package/cjs/components/TimePicker/TimePicker.tokens.js +2 -1
  8. package/cjs/components/TimePicker/TimePicker.tokens.js.map +1 -1
  9. package/cjs/hooks/useFocusTrap.js +11 -5
  10. package/cjs/hooks/useFocusTrap.js.map +1 -1
  11. package/cjs/index.css +5 -5
  12. package/cjs/utils/scopeTab.js +2 -2
  13. package/cjs/utils/scopeTab.js.map +1 -1
  14. package/emotion/cjs/components/Modal/Modal.js +3 -2
  15. package/emotion/cjs/components/TimePicker/TimePicker.styles.js +11 -11
  16. package/emotion/cjs/components/TimePicker/TimePicker.tokens.js +2 -1
  17. package/emotion/cjs/examples/components/TimePicker/TimePicker.config.js +7 -7
  18. package/emotion/cjs/hooks/useFocusTrap.js +12 -5
  19. package/emotion/cjs/utils/scopeTab.js +2 -2
  20. package/emotion/es/components/Modal/Modal.js +3 -2
  21. package/emotion/es/components/TimePicker/TimePicker.styles.js +11 -11
  22. package/emotion/es/components/TimePicker/TimePicker.tokens.js +2 -1
  23. package/emotion/es/examples/components/TimePicker/TimePicker.config.js +7 -7
  24. package/emotion/es/hooks/useFocusTrap.js +12 -5
  25. package/emotion/es/utils/scopeTab.js +2 -2
  26. package/es/components/Modal/Modal.js +4 -2
  27. package/es/components/Modal/Modal.js.map +1 -1
  28. package/es/components/TimePicker/TimePicker.css +5 -5
  29. package/es/components/TimePicker/TimePicker.styles.js +1 -1
  30. package/es/components/TimePicker/TimePicker.styles.js.map +1 -1
  31. package/es/components/TimePicker/{TimePicker.styles_1ie9d7j.css → TimePicker.styles_thn2wn.css} +1 -1
  32. package/es/components/TimePicker/TimePicker.tokens.js +2 -1
  33. package/es/components/TimePicker/TimePicker.tokens.js.map +1 -1
  34. package/es/hooks/useFocusTrap.js +11 -5
  35. package/es/hooks/useFocusTrap.js.map +1 -1
  36. package/es/index.css +5 -5
  37. package/es/utils/scopeTab.js +2 -2
  38. package/es/utils/scopeTab.js.map +1 -1
  39. package/package.json +2 -2
  40. package/styled-components/cjs/components/Modal/Modal.js +3 -2
  41. package/styled-components/cjs/components/TimePicker/TimePicker.styles.js +9 -7
  42. package/styled-components/cjs/components/TimePicker/TimePicker.tokens.js +2 -1
  43. package/styled-components/cjs/examples/components/TimePicker/TimePicker.config.js +16 -12
  44. package/styled-components/cjs/hooks/useFocusTrap.js +12 -5
  45. package/styled-components/cjs/utils/scopeTab.js +2 -2
  46. package/styled-components/es/components/Modal/Modal.js +3 -2
  47. package/styled-components/es/components/TimePicker/TimePicker.styles.js +9 -7
  48. package/styled-components/es/components/TimePicker/TimePicker.tokens.js +2 -1
  49. package/styled-components/es/examples/components/TimePicker/TimePicker.config.js +16 -12
  50. package/styled-components/es/hooks/useFocusTrap.js +12 -5
  51. package/styled-components/es/utils/scopeTab.js +2 -2
  52. package/types/components/Modal/Modal.d.ts.map +1 -1
  53. package/types/components/Modal/Modal.types.d.ts +5 -0
  54. package/types/components/Modal/Modal.types.d.ts.map +1 -1
  55. package/types/components/TimePicker/TimePicker.styles.d.ts.map +1 -1
  56. package/types/components/TimePicker/TimePicker.tokens.d.ts +1 -0
  57. package/types/components/TimePicker/TimePicker.tokens.d.ts.map +1 -1
  58. package/types/examples/components/TimePicker/TimePicker.config.d.ts.map +1 -1
  59. package/types/hooks/useFocusTrap.d.ts +1 -1
  60. package/types/hooks/useFocusTrap.d.ts.map +1 -1
  61. package/types/utils/scopeTab.d.ts +1 -1
  62. package/types/utils/scopeTab.d.ts.map +1 -1
package/es/utils/scopeTab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scopeTab.js","sources":["../../src/utils/scopeTab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\n/**\n * Управлление фокусом лишь внутри ноды через tab\n * @param node\n * @param event\n */\nexport const scopeTab = (node: HTMLElement, event: KeyboardEvent) => {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n\n // смотрим, является ли элемент крайним - первый или последним\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;\n\n // если не является, то передаем обработку таба самому браузеру\n if (!leavingFinalTabbable) {\n return;\n }\n\n // иначе зацкливаемся\n event.preventDefault();\n const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];\n if (target) {\n target.focus();\n }\n};\n"],"names":["scopeTab","node","event","tabbable","findTabbableDescendants","length","preventDefault","finalTabbable","shiftKey","leavingFinalTabbable","document","activeElement","target","focus"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,IAAiB,EAAEC,KAAoB,EAAK;AACjE,EAAA,IAAMC,QAAQ,GAAGC,uBAAuB,CAACH,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,CAACE,QAAQ,CAACE,MAAM,EAAE;IAClBH,KAAK,CAACI,cAAc,EAAE,CAAA;AACtB,IAAA,OAAA;AACJ,GAAA;;AAEA;AACA,EAAA,IAAMC,aAAa,GAAGJ,QAAQ,CAACD,KAAK,CAACM,QAAQ,GAAG,CAAC,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,CAAC,CAAA;AACxE,EAAA,IAAMI,oBAAoB,GAAGF,aAAa,KAAKG,QAAQ,CAACC,aAAa,IAAIV,IAAI,KAAKS,QAAQ,CAACC,aAAa,CAAA;;AAExG;EACA,IAAI,CAACF,oBAAoB,EAAE;AACvB,IAAA,OAAA;AACJ,GAAA;;AAEA;EACAP,KAAK,CAACI,cAAc,EAAE,CAAA;AACtB,EAAA,IAAMM,MAAM,GAAGT,QAAQ,CAACD,KAAK,CAACM,QAAQ,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AACjE,EAAA,IAAIO,MAAM,EAAE;IACRA,MAAM,CAACC,KAAK,EAAE,CAAA;AAClB,GAAA;AACJ;;;;"}
1
+ {"version":3,"file":"scopeTab.js","sources":["../../src/utils/scopeTab.ts"],"sourcesContent":["import { findTabbableDescendants } from './tabbable';\n\n/**\n * Управлление фокусом лишь внутри ноды через tab\n * @param node\n * @param event\n */\nexport const scopeTab = (node: HTMLElement, event: KeyboardEvent, activeFocusTrap?: boolean) => {\n const tabbable = findTabbableDescendants(node);\n if (!tabbable.length) {\n event.preventDefault();\n return;\n }\n\n // смотрим, является ли элемент крайним - первый или последним\n const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];\n const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;\n\n // если не является, то передаем обработку таба самому браузеру\n if (!leavingFinalTabbable || !activeFocusTrap) {\n return;\n }\n\n // иначе зацкливаемся\n event.preventDefault();\n const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];\n if (target) {\n target.focus();\n }\n};\n"],"names":["scopeTab","node","event","activeFocusTrap","tabbable","findTabbableDescendants","length","preventDefault","finalTabbable","shiftKey","leavingFinalTabbable","document","activeElement","target","focus"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,IAAiB,EAAEC,KAAoB,EAAEC,eAAyB,EAAK;AAC5F,EAAA,IAAMC,QAAQ,GAAGC,uBAAuB,CAACJ,IAAI,CAAC,CAAA;AAC9C,EAAA,IAAI,CAACG,QAAQ,CAACE,MAAM,EAAE;IAClBJ,KAAK,CAACK,cAAc,EAAE,CAAA;AACtB,IAAA,OAAA;AACJ,GAAA;;AAEA;AACA,EAAA,IAAMC,aAAa,GAAGJ,QAAQ,CAACF,KAAK,CAACO,QAAQ,GAAG,CAAC,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,CAAC,CAAA;AACxE,EAAA,IAAMI,oBAAoB,GAAGF,aAAa,KAAKG,QAAQ,CAACC,aAAa,IAAIX,IAAI,KAAKU,QAAQ,CAACC,aAAa,CAAA;;AAExG;AACA,EAAA,IAAI,CAACF,oBAAoB,IAAI,CAACP,eAAe,EAAE;AAC3C,IAAA,OAAA;AACJ,GAAA;;AAEA;EACAD,KAAK,CAACK,cAAc,EAAE,CAAA;AACtB,EAAA,IAAMM,MAAM,GAAGT,QAAQ,CAACF,KAAK,CAACO,QAAQ,GAAGL,QAAQ,CAACE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AACjE,EAAA,IAAIO,MAAM,EAAE;IACRA,MAAM,CAACC,KAAK,EAAE,CAAA;AAClB,GAAA;AACJ;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.337.0-canary.2184.17907394393.0",
3
+ "version": "0.337.0-canary.2184.17942080334.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -137,5 +137,5 @@
137
137
  "sideEffects": [
138
138
  "*.css"
139
139
  ],
140
- "gitHead": "7e6b2936c5f27154878cfe83db0d88d838b58906"
140
+ "gitHead": "cf83d9922ecf673d9c6718c27a31b7d236ca084a"
141
141
  }
package/styled-components/cjs/components/Modal/Modal.js CHANGED
@@ -130,7 +130,7 @@ function _object_without_properties_loose(source, excluded) {
130
130
  var Popup = (0, _engines.component)(_Popup.popupConfig);
131
131
  var modalRoot = function(Root) {
132
132
  return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, outerRootRef) {
133
- var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
133
+ var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, _param_isFocusTrapped = _param.isFocusTrapped, isFocusTrapped = _param_isFocusTrapped === void 0 ? true : _param_isFocusTrapped, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
134
134
  "id",
135
135
  "withAnimation",
136
136
  "onClose",
@@ -139,6 +139,7 @@ var modalRoot = function(Root) {
139
139
  "closeOnEsc",
140
140
  "closeOnOverlayClick",
141
141
  "withBlur",
142
+ "isFocusTrapped",
142
143
  "initialFocusRef",
143
144
  "focusAfterRef",
144
145
  "zIndex",
@@ -154,7 +155,7 @@ var modalRoot = function(Root) {
154
155
  ]);
155
156
  var innerIsOpen = Boolean(isOpen || opened);
156
157
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
157
- var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef, true);
158
+ var trapRef = (0, _hooks.useFocusTrap)(isFocusTrapped, initialFocusRef, focusAfterRef, true, !isFocusTrapped);
158
159
  var popupController = (0, _Popup.usePopupContext)();
159
160
  var innerRef = (0, _plasmacore.useForkRef)(trapRef, outerRootRef);
160
161
  var uniqId = (0, _utils.safeUseId)();
package/styled-components/cjs/components/TimePicker/TimePicker.styles.js CHANGED
@@ -80,13 +80,13 @@ var mergedPopoverConfig = (0, _engines.mergeConfig)(_Popover.popoverConfig);
80
80
  var Popover = (0, _engines.component)(mergedPopoverConfig);
81
81
  var StyledPopover = (0, _styledcomponents.default)(Popover).withConfig({
82
82
  displayName: "TimePicker.styles__StyledPopover",
83
- componentId: "sc-ed479252-0"
83
+ componentId: "sc-45298523-0"
84
84
  })([
85
85
  ""
86
86
  ]);
87
87
  var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
88
88
  displayName: "TimePicker.styles__StyledInput",
89
- componentId: "sc-ed479252-1"
89
+ componentId: "sc-45298523-1"
90
90
  })([
91
91
  "width:100%;",
92
92
  ":var(",
@@ -246,7 +246,7 @@ var base = (0, _styledcomponents.css)([
246
246
  ], _TimePickertokens.tokens.width, _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _TimePickertokens.classes.timePickerstretched, _Popover.popoverClasses.root, _TimePickertokens.classes.timePickerFullWidth);
247
247
  var StyledTimePicker = _styledcomponents.default.div.withConfig({
248
248
  displayName: "TimePicker.styles__StyledTimePicker",
249
- componentId: "sc-ed479252-2"
249
+ componentId: "sc-45298523-2"
250
250
  })([
251
251
  "background:var(",
252
252
  ");border-radius:var(",
@@ -259,7 +259,7 @@ var StyledTimePicker = _styledcomponents.default.div.withConfig({
259
259
  }, _TimePickertokens.tokens.timePickerPadding);
260
260
  var StyledTimeItem = _styledcomponents.default.div.withConfig({
261
261
  displayName: "TimePicker.styles__StyledTimeItem",
262
- componentId: "sc-ed479252-3"
262
+ componentId: "sc-45298523-3"
263
263
  })([
264
264
  "height:var(",
265
265
  ");padding:var(",
@@ -277,10 +277,10 @@ var StyledTimeItem = _styledcomponents.default.div.withConfig({
277
277
  ], _TimePickertokens.tokens.itemHeight, _TimePickertokens.tokens.itemPadding, _TimePickertokens.tokens.itemBorderRadius, _TimePickertokens.tokens.itemFontFamily, _TimePickertokens.tokens.itemFontSize, _TimePickertokens.tokens.itemFontStyle, _TimePickertokens.tokens.itemFontWeight, _TimePickertokens.tokens.itemLetterSpacing, _TimePickertokens.tokens.itemLineHeight, _TimePickertokens.tokens.itemHoverBackground, _TimePickertokens.classes.timeItemActive, _TimePickertokens.tokens.itemActiveBackground);
278
278
  var StyledTimeColumn = _styledcomponents.default.div.withConfig({
279
279
  displayName: "TimePicker.styles__StyledTimeColumn",
280
- componentId: "sc-ed479252-4"
280
+ componentId: "sc-45298523-4"
281
281
  })([
282
282
  "max-height:",
283
- ";overflow-y:scroll;flex:1;z-index:3;padding:calc(var(",
283
+ ";overflow-y:scroll;flex:1;z-index:3;margin:calc(var(",
284
284
  ") / 2);box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
285
285
  ");width:100%;&.",
286
286
  "{border:0.125rem solid var(",
@@ -289,10 +289,12 @@ var StyledTimeColumn = _styledcomponents.default.div.withConfig({
289
289
  ");height:var(",
290
290
  ");}&::-webkit-scrollbar-track{background:var(",
291
291
  ");border-radius:var(",
292
+ ");margin-top:var(",
293
+ ");margin-bottom:var(",
292
294
  ");}&::-webkit-scrollbar-thumb{background:var(",
293
295
  ");border-radius:var(",
294
296
  ");}"
295
297
  ], function(param) {
296
298
  var height = param.height;
297
299
  return height || "var(".concat(_TimePickertokens.tokens.columnHeight, ")");
298
- }, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.classes.timeColumnActive, _TimePickertokens.tokens.itemHoverBackground, _TimePickertokens.tokens.itemBorderRadius, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarTrackColor, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarColor, _TimePickertokens.tokens.scrollbarWidth);
300
+ }, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.classes.timeColumnActive, _TimePickertokens.tokens.itemHoverBackground, _TimePickertokens.tokens.itemBorderRadius, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarTrackColor, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarColor, _TimePickertokens.tokens.scrollbarWidth);
package/styled-components/cjs/components/TimePicker/TimePicker.tokens.js CHANGED
@@ -131,5 +131,6 @@ var tokens = {
131
131
  itemLineHeight: '--plasma-time-picker-item-line-height',
132
132
  scrollbarWidth: '--plasma-time-picker-scrollbar-width',
133
133
  scrollbarColor: '--plasma-time-picker-scrollbar-color',
134
- scrollbarTrackColor: '--plasma-time-picker-scrollbar-track-color'
134
+ scrollbarTrackColor: '--plasma-time-picker-scrollbar-track-color',
135
+ scrollbarMargin: '--plasma-time-picker-scrollbar-margin'
135
136
  };
package/styled-components/cjs/examples/components/TimePicker/TimePicker.config.js CHANGED
@@ -87,7 +87,7 @@ var config = {
87
87
  ":0.875rem;",
88
88
  ":15rem;",
89
89
  ":0.125rem;",
90
- ":35.25rem;",
90
+ ":36.25rem;",
91
91
  ":var(--plasma-typo-body-l-font-family);",
92
92
  ":var(--plasma-typo-body-l-font-size);",
93
93
  ":var(--plasma-typo-body-l-font-style);",
@@ -97,8 +97,9 @@ var config = {
97
97
  ":3.5rem;",
98
98
  ":0.75rem;",
99
99
  ":0rem;",
100
- ":0.125rem;"
101
- ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth),
100
+ ":0.125rem;",
101
+ ":0.5rem;"
102
+ ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
102
103
  m: (0, _styledcomponents.css)([
103
104
  "",
104
105
  ":20rem;",
@@ -136,7 +137,7 @@ var config = {
136
137
  ":0.75rem;",
137
138
  ":13.75rem;",
138
139
  ":0.125rem;",
139
- ":30.125rem;",
140
+ ":31.25rem;",
140
141
  ":var(--plasma-typo-body-m-font-family);",
141
142
  ":var(--plasma-typo-body-m-font-size);",
142
143
  ":var(--plasma-typo-body-m-font-style);",
@@ -146,8 +147,9 @@ var config = {
146
147
  ":3rem;",
147
148
  ":0.625rem;",
148
149
  ":0rem;",
149
- ":0.125rem;"
150
- ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth),
150
+ ":0.125rem;",
151
+ ":0.375rem;"
152
+ ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
151
153
  s: (0, _styledcomponents.css)([
152
154
  "",
153
155
  ":20rem;",
@@ -185,7 +187,7 @@ var config = {
185
187
  ":0.625rem;",
186
188
  ":12rem;",
187
189
  ":0.125rem;",
188
- ":25.125rem;",
190
+ ":26.25rem;",
189
191
  ":var(--plasma-typo-body-s-font-family);",
190
192
  ":var(--plasma-typo-body-s-font-size);",
191
193
  ":var(--plasma-typo-body-s-font-style);",
@@ -195,8 +197,9 @@ var config = {
195
197
  ":2.5rem;",
196
198
  ":0.5rem;",
197
199
  ":0rem;",
198
- ":0.125rem;"
199
- ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth),
200
+ ":0.125rem;",
201
+ ":0.25rem;"
202
+ ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
200
203
  xs: (0, _styledcomponents.css)([
201
204
  "",
202
205
  ":20rem;",
@@ -234,7 +237,7 @@ var config = {
234
237
  ":0.5rem;",
235
238
  ":10rem;",
236
239
  ":0.125rem;",
237
- ":30rem;",
240
+ ":21.25rem;",
238
241
  ":var(--plasma-typo-body-xs-font-family);",
239
242
  ":var(--plasma-typo-body-xs-font-size);",
240
243
  ":var(--plasma-typo-body-xs-font-style);",
@@ -244,8 +247,9 @@ var config = {
244
247
  ":2rem;",
245
248
  ":0.375rem;",
246
249
  ":0rem;",
247
- ":0.125rem;"
248
- ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth)
250
+ ":0.125rem;",
251
+ ":0.25rem;"
252
+ ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin)
249
253
  },
250
254
  disabled: {
251
255
  true: (0, _styledcomponents.css)([
package/styled-components/cjs/hooks/useFocusTrap.js CHANGED
@@ -47,14 +47,14 @@ var processNode = function(node, firstFocusSelector, ref) {
47
47
  };
48
48
  var focusManager = new _focusManager.FocusManager();
49
49
  var useFocusTrap = function() {
50
- var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0;
50
+ var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0, enableOnFirstMount = arguments.length > 4 ? arguments[4] : void 0;
51
51
  var ref = (0, _react.useRef)();
52
52
  var setRef = (0, _react.useCallback)(function(node) {
53
53
  if (ref.current) {
54
54
  focusManager.teardownScopedFocus();
55
55
  focusManager.returnFocus();
56
56
  }
57
- if (active && node) {
57
+ if ((active || enableOnFirstMount) && node) {
58
58
  focusManager.setupScopedFocus(node);
59
59
  focusManager.markForFocusAfter(focusAfterNode);
60
60
  // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
@@ -73,15 +73,21 @@ var useFocusTrap = function() {
73
73
  ref.current = null;
74
74
  }, [
75
75
  active,
76
+ enableOnFirstMount,
76
77
  firstFocusSelector
77
78
  ]);
78
79
  (0, _react.useEffect)(function() {
79
- if (!active) {
80
+ if (!active && !enableOnFirstMount) {
80
81
  return;
81
82
  }
82
83
  var handleKeyDown = function(event) {
83
84
  if (event.key === 'Tab' && ref.current) {
84
- (0, _scopeTab.scopeTab)(ref.current, event);
85
+ (0, _scopeTab.scopeTab)(ref.current, event, active);
86
+ if (enableOnFirstMount) {
87
+ setTimeout(function() {
88
+ focusManager.teardownScopedFocus();
89
+ });
90
+ }
85
91
  }
86
92
  };
87
93
  document.addEventListener('keydown', handleKeyDown);
@@ -89,7 +95,8 @@ var useFocusTrap = function() {
89
95
  document.removeEventListener('keydown', handleKeyDown);
90
96
  };
91
97
  }, [
92
- active
98
+ active,
99
+ enableOnFirstMount
93
100
  ]);
94
101
  return setRef;
95
102
  };
package/styled-components/cjs/utils/scopeTab.js CHANGED
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "scopeTab", {
9
9
  }
10
10
  });
11
11
  var _tabbable = require("./tabbable");
12
- var scopeTab = function(node, event) {
12
+ var scopeTab = function(node, event, activeFocusTrap) {
13
13
  var tabbable = (0, _tabbable.findTabbableDescendants)(node);
14
14
  if (!tabbable.length) {
15
15
  event.preventDefault();
@@ -19,7 +19,7 @@ var scopeTab = function(node, event) {
19
19
  var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
20
20
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
21
21
  // если не является, то передаем обработку таба самому браузеру
22
- if (!leavingFinalTabbable) {
22
+ if (!leavingFinalTabbable || !activeFocusTrap) {
23
23
  return;
24
24
  }
25
25
  // иначе зацкливаемся
package/styled-components/es/components/Modal/Modal.js CHANGED
@@ -74,7 +74,7 @@ var Popup = component(popupConfig);
74
74
  * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.
75
75
  */ export var modalRoot = function(Root) {
76
76
  return /*#__PURE__*/ forwardRef(function(_param, outerRootRef) {
77
- var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
77
+ var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, _param_isFocusTrapped = _param.isFocusTrapped, isFocusTrapped = _param_isFocusTrapped === void 0 ? true : _param_isFocusTrapped, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
78
78
  "id",
79
79
  "withAnimation",
80
80
  "onClose",
@@ -83,6 +83,7 @@ var Popup = component(popupConfig);
83
83
  "closeOnEsc",
84
84
  "closeOnOverlayClick",
85
85
  "withBlur",
86
+ "isFocusTrapped",
86
87
  "initialFocusRef",
87
88
  "focusAfterRef",
88
89
  "zIndex",
@@ -98,7 +99,7 @@ var Popup = component(popupConfig);
98
99
  ]);
99
100
  var innerIsOpen = Boolean(isOpen || opened);
100
101
  var innerHasClose = hasClose === undefined && hasBody || hasClose;
101
- var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
102
+ var trapRef = useFocusTrap(isFocusTrapped, initialFocusRef, focusAfterRef, true, !isFocusTrapped);
102
103
  var popupController = usePopupContext();
103
104
  var innerRef = useForkRef(trapRef, outerRootRef);
104
105
  var uniqId = safeUseId();
package/styled-components/es/components/TimePicker/TimePicker.styles.js CHANGED
@@ -10,14 +10,14 @@ var mergedPopoverConfig = mergeConfig(popoverConfig);
10
10
  var Popover = component(mergedPopoverConfig);
11
11
  export var StyledPopover = styled(Popover).withConfig({
12
12
  displayName: "TimePicker.styles__StyledPopover",
13
- componentId: "sc-ed479252-0"
13
+ componentId: "sc-45298523-0"
14
14
  })([
15
15
  ""
16
16
  ]);
17
17
  // NOTE: переопределение токенов TextField
18
18
  export var StyledInput = styled(TextField).withConfig({
19
19
  displayName: "TimePicker.styles__StyledInput",
20
- componentId: "sc-ed479252-1"
20
+ componentId: "sc-45298523-1"
21
21
  })([
22
22
  "width:100%;",
23
23
  ":var(",
@@ -177,7 +177,7 @@ export var base = css([
177
177
  ], tokens.width, popoverClasses.wrapper, popoverClasses.target, classes.timePickerstretched, popoverClasses.root, classes.timePickerFullWidth);
178
178
  export var StyledTimePicker = styled.div.withConfig({
179
179
  displayName: "TimePicker.styles__StyledTimePicker",
180
- componentId: "sc-ed479252-2"
180
+ componentId: "sc-45298523-2"
181
181
  })([
182
182
  "background:var(",
183
183
  ");border-radius:var(",
@@ -190,7 +190,7 @@ export var StyledTimePicker = styled.div.withConfig({
190
190
  }, tokens.timePickerPadding);
191
191
  export var StyledTimeItem = styled.div.withConfig({
192
192
  displayName: "TimePicker.styles__StyledTimeItem",
193
- componentId: "sc-ed479252-3"
193
+ componentId: "sc-45298523-3"
194
194
  })([
195
195
  "height:var(",
196
196
  ");padding:var(",
@@ -208,10 +208,10 @@ export var StyledTimeItem = styled.div.withConfig({
208
208
  ], tokens.itemHeight, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHoverBackground, classes.timeItemActive, tokens.itemActiveBackground);
209
209
  export var StyledTimeColumn = styled.div.withConfig({
210
210
  displayName: "TimePicker.styles__StyledTimeColumn",
211
- componentId: "sc-ed479252-4"
211
+ componentId: "sc-45298523-4"
212
212
  })([
213
213
  "max-height:",
214
- ";overflow-y:scroll;flex:1;z-index:3;padding:calc(var(",
214
+ ";overflow-y:scroll;flex:1;z-index:3;margin:calc(var(",
215
215
  ") / 2);box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
216
216
  ");width:100%;&.",
217
217
  "{border:0.125rem solid var(",
@@ -220,10 +220,12 @@ export var StyledTimeColumn = styled.div.withConfig({
220
220
  ");height:var(",
221
221
  ");}&::-webkit-scrollbar-track{background:var(",
222
222
  ");border-radius:var(",
223
+ ");margin-top:var(",
224
+ ");margin-bottom:var(",
223
225
  ");}&::-webkit-scrollbar-thumb{background:var(",
224
226
  ");border-radius:var(",
225
227
  ");}"
226
228
  ], function(param) {
227
229
  var height = param.height;
228
230
  return height || "var(".concat(tokens.columnHeight, ")");
229
- }, tokens.scrollbarWidth, tokens.scrollbarWidth, classes.timeColumnActive, tokens.itemHoverBackground, tokens.itemBorderRadius, tokens.scrollbarWidth, tokens.scrollbarWidth, tokens.scrollbarTrackColor, tokens.scrollbarWidth, tokens.scrollbarColor, tokens.scrollbarWidth);
231
+ }, tokens.scrollbarWidth, tokens.scrollbarWidth, classes.timeColumnActive, tokens.itemHoverBackground, tokens.itemBorderRadius, tokens.scrollbarWidth, tokens.scrollbarWidth, tokens.scrollbarTrackColor, tokens.scrollbarWidth, tokens.scrollbarMargin, tokens.scrollbarMargin, tokens.scrollbarColor, tokens.scrollbarWidth);
package/styled-components/es/components/TimePicker/TimePicker.tokens.js CHANGED
@@ -113,5 +113,6 @@ export var tokens = {
113
113
  itemLineHeight: '--plasma-time-picker-item-line-height',
114
114
  scrollbarWidth: '--plasma-time-picker-scrollbar-width',
115
115
  scrollbarColor: '--plasma-time-picker-scrollbar-color',
116
- scrollbarTrackColor: '--plasma-time-picker-scrollbar-track-color'
116
+ scrollbarTrackColor: '--plasma-time-picker-scrollbar-track-color',
117
+ scrollbarMargin: '--plasma-time-picker-scrollbar-margin'
117
118
  };
package/styled-components/es/examples/components/TimePicker/TimePicker.config.js CHANGED
@@ -77,7 +77,7 @@ export var config = {
77
77
  ":0.875rem;",
78
78
  ":15rem;",
79
79
  ":0.125rem;",
80
- ":35.25rem;",
80
+ ":36.25rem;",
81
81
  ":var(--plasma-typo-body-l-font-family);",
82
82
  ":var(--plasma-typo-body-l-font-size);",
83
83
  ":var(--plasma-typo-body-l-font-style);",
@@ -87,8 +87,9 @@ export var config = {
87
87
  ":3.5rem;",
88
88
  ":0.75rem;",
89
89
  ":0rem;",
90
- ":0.125rem;"
91
- ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth),
90
+ ":0.125rem;",
91
+ ":0.5rem;"
92
+ ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin),
92
93
  m: css([
93
94
  "",
94
95
  ":20rem;",
@@ -126,7 +127,7 @@ export var config = {
126
127
  ":0.75rem;",
127
128
  ":13.75rem;",
128
129
  ":0.125rem;",
129
- ":30.125rem;",
130
+ ":31.25rem;",
130
131
  ":var(--plasma-typo-body-m-font-family);",
131
132
  ":var(--plasma-typo-body-m-font-size);",
132
133
  ":var(--plasma-typo-body-m-font-style);",
@@ -136,8 +137,9 @@ export var config = {
136
137
  ":3rem;",
137
138
  ":0.625rem;",
138
139
  ":0rem;",
139
- ":0.125rem;"
140
- ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth),
140
+ ":0.125rem;",
141
+ ":0.375rem;"
142
+ ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin),
141
143
  s: css([
142
144
  "",
143
145
  ":20rem;",
@@ -175,7 +177,7 @@ export var config = {
175
177
  ":0.625rem;",
176
178
  ":12rem;",
177
179
  ":0.125rem;",
178
- ":25.125rem;",
180
+ ":26.25rem;",
179
181
  ":var(--plasma-typo-body-s-font-family);",
180
182
  ":var(--plasma-typo-body-s-font-size);",
181
183
  ":var(--plasma-typo-body-s-font-style);",
@@ -185,8 +187,9 @@ export var config = {
185
187
  ":2.5rem;",
186
188
  ":0.5rem;",
187
189
  ":0rem;",
188
- ":0.125rem;"
189
- ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth),
190
+ ":0.125rem;",
191
+ ":0.25rem;"
192
+ ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin),
190
193
  xs: css([
191
194
  "",
192
195
  ":20rem;",
@@ -224,7 +227,7 @@ export var config = {
224
227
  ":0.5rem;",
225
228
  ":10rem;",
226
229
  ":0.125rem;",
227
- ":30rem;",
230
+ ":21.25rem;",
228
231
  ":var(--plasma-typo-body-xs-font-family);",
229
232
  ":var(--plasma-typo-body-xs-font-size);",
230
233
  ":var(--plasma-typo-body-xs-font-style);",
@@ -234,8 +237,9 @@ export var config = {
234
237
  ":2rem;",
235
238
  ":0.375rem;",
236
239
  ":0rem;",
237
- ":0.125rem;"
238
- ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth)
240
+ ":0.125rem;",
241
+ ":0.25rem;"
242
+ ], tokens.width, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.indicatorSize, tokens.indicatorSizeOuter, tokens.indicatorPlacement, tokens.indicatorOuterPlacement, tokens.indicatorPlacementRight, tokens.indicatorOuterPlacementRight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.timePickerBorderRadius, tokens.timePickerWidth, tokens.timePickerPadding, tokens.columnHeight, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHeight, tokens.itemBorderRadius, tokens.itemPadding, tokens.scrollbarWidth, tokens.scrollbarMargin)
239
243
  },
240
244
  disabled: {
241
245
  true: css([
package/styled-components/es/hooks/useFocusTrap.js CHANGED
@@ -39,14 +39,14 @@ var focusManager = new FocusManager();
39
39
  /**
40
40
  * Захватывает фокус внутри DOM node.
41
41
  * */ export var useFocusTrap = function() {
42
- var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0;
42
+ var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0, enableOnFirstMount = arguments.length > 4 ? arguments[4] : void 0;
43
43
  var ref = useRef();
44
44
  var setRef = useCallback(function(node) {
45
45
  if (ref.current) {
46
46
  focusManager.teardownScopedFocus();
47
47
  focusManager.returnFocus();
48
48
  }
49
- if (active && node) {
49
+ if ((active || enableOnFirstMount) && node) {
50
50
  focusManager.setupScopedFocus(node);
51
51
  focusManager.markForFocusAfter(focusAfterNode);
52
52
  // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
@@ -65,15 +65,21 @@ var focusManager = new FocusManager();
65
65
  ref.current = null;
66
66
  }, [
67
67
  active,
68
+ enableOnFirstMount,
68
69
  firstFocusSelector
69
70
  ]);
70
71
  useEffect(function() {
71
- if (!active) {
72
+ if (!active && !enableOnFirstMount) {
72
73
  return;
73
74
  }
74
75
  var handleKeyDown = function(event) {
75
76
  if (event.key === 'Tab' && ref.current) {
76
- scopeTab(ref.current, event);
77
+ scopeTab(ref.current, event, active);
78
+ if (enableOnFirstMount) {
79
+ setTimeout(function() {
80
+ focusManager.teardownScopedFocus();
81
+ });
82
+ }
77
83
  }
78
84
  };
79
85
  document.addEventListener('keydown', handleKeyDown);
@@ -81,7 +87,8 @@ var focusManager = new FocusManager();
81
87
  document.removeEventListener('keydown', handleKeyDown);
82
88
  };
83
89
  }, [
84
- active
90
+ active,
91
+ enableOnFirstMount
85
92
  ]);
86
93
  return setRef;
87
94
  };
package/styled-components/es/utils/scopeTab.js CHANGED
@@ -3,7 +3,7 @@ import { findTabbableDescendants } from "./tabbable";
3
3
  * Управлление фокусом лишь внутри ноды через tab
4
4
  * @param node
5
5
  * @param event
6
- */ export var scopeTab = function(node, event) {
6
+ */ export var scopeTab = function(node, event, activeFocusTrap) {
7
7
  var tabbable = findTabbableDescendants(node);
8
8
  if (!tabbable.length) {
9
9
  event.preventDefault();
@@ -13,7 +13,7 @@ import { findTabbableDescendants } from "./tabbable";
13
13
  var finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
14
14
  var leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
15
15
  // если не является, то передаем обработку таба самому браузеру
16
- if (!leavingFinalTabbable) {
16
+ if (!leavingFinalTabbable || !activeFocusTrap) {
17
17
  return;
18
18
  }
19
19
  // иначе зацкливаемся
package/types/components/Modal/Modal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAa,MAAM,aAAa,CAAC;AASnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAU,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,sFAiHhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAnHQ,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAgIpE,CAAC"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAa,MAAM,aAAa,CAAC;AASnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C;;;GAGG;AACH,eAAO,MAAM,SAAS,SAAU,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,sFAkHhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBApHQ,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAiIpE,CAAC"}
package/types/components/Modal/Modal.types.d.ts CHANGED
@@ -33,6 +33,11 @@ export interface CommonModalProps extends PopupProps {
33
33
  * Обработчик клика при нажатии вне области модального окна(если не передан, то при нажатии используется onClose).
34
34
  */
35
35
  onOverlayClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
36
+ /**
37
+ * Фокус элементов будет происходить только внутри модального окна
38
+ * @default true
39
+ */
40
+ isFocusTrapped?: boolean;
36
41
  /**
37
42
  * Первый элемент для фокуса внутри модального окна.
38
43
  */
package/types/components/Modal/Modal.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,cAAc,GACpB;IACI;;OAEG;IACH,OAAO,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GACD;IACI,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAER,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACnE;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE3D,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC,CAAC;AAEpH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,QAAQ,CAAC,GACjE,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,qBAAqB,GAAG,gBAAgB,GAAG,SAAS,CAAC,CAAC;AAExF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,GAAG,QAAQ,CAAC,GAC1E,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,cAAc,GAAG,SAAS,CAAC,CAAC"}
1
+ {"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEjF,MAAM,MAAM,cAAc,GACpB;IACI;;OAEG;IACH,OAAO,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GACD;IACI,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAER,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACnE;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE3D,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC,CAAC;AAEpH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,QAAQ,CAAC,GACjE,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,qBAAqB,GAAG,gBAAgB,GAAG,SAAS,CAAC,CAAC;AAExF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,GAAG,QAAQ,CAAC,GAC1E,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,cAAc,GAAG,SAAS,CAAC,CAAC"}
package/types/components/TimePicker/TimePicker.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TimePicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.styles.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa;YAA6B,MAAM,GAAG,OAAO;YAAU,MAAM,GAAG,MAAM;6OAAK,CAAC;AAGtG,eAAO,MAAM,WAAW;;;;;;;;kBAgFmD,MACnE,YAAI;mBAAqE,MAAO,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBANpC,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBANpC,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBANpC,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;yIAO3C,CAAC;AAEF,eAAO,MAAM,IAAI,0CAmBhB,CAAC;AAEF,eAAO,MAAM,gBAAgB;YAAwB,MAAM,GAAG,MAAM;EAUnE,CAAC;AAEF,eAAO,MAAM,cAAc,qKAyB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB;aAAyB,MAAM,GAAG,MAAM;EA+BpE,CAAC"}
1
+ {"version":3,"file":"TimePicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.styles.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,aAAa;YAA6B,MAAM,GAAG,OAAO;YAAU,MAAM,GAAG,MAAM;6OAAK,CAAC;AAGtG,eAAO,MAAM,WAAW;;;;;;;;kBAgFmD,MACnE,YAAI;mBAAqE,MAAO,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBANpC,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBANpC,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBANpC,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;oCAhFxC,CAAH;;;;;;;;;;;;wBA0EO,YAAI;yBAA4E,YAChF;;;oCAKmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;yIAO3C,CAAC;AAEF,eAAO,MAAM,IAAI,0CAmBhB,CAAC;AAEF,eAAO,MAAM,gBAAgB;YAAwB,MAAM,GAAG,MAAM;EAUnE,CAAC;AAEF,eAAO,MAAM,cAAc,qKAyB1B,CAAC;AAEF,eAAO,MAAM,gBAAgB;aAAyB,MAAM,GAAG,MAAM;EAiCpE,CAAC"}