reshaped 2.11.9 → 2.11.10

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 (10) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/bundle.css +1 -1
  3. package/bundle.js +9 -9
  4. package/components/Badge/Badge.types.d.ts +1 -1
  5. package/components/Modal/Modal.module.css +1 -1
  6. package/components/Modal/Modal.types.d.ts +1 -1
  7. package/components/Modal/tests/Modal.stories.js +7 -4
  8. package/hooks/_private/useSingletonHotkeys.d.ts +8 -11
  9. package/hooks/_private/useSingletonHotkeys.js +23 -56
  10. package/package.json +1 -1
package/components/Badge/Badge.types.d.ts CHANGED
@@ -26,7 +26,7 @@ type WithDismissible = {
26
26
  };
27
27
  type WithoutDismissible = {
28
28
  onDismiss?: never;
29
- dismissAriaLabel?: never;
29
+ dismissAriaLabel?: string;
30
30
  };
31
31
  export type Props = (WithChildren | WithEmpty) & (WithDismissible | WithoutDismissible);
32
32
  export type ContainerProps = {
package/components/Modal/Modal.module.css CHANGED
@@ -1 +1 @@
1
- .root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}.--dragging{transition:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}}
1
+ .root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}.--dragging{transition:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
package/components/Modal/Modal.types.d.ts CHANGED
@@ -15,7 +15,7 @@ export type SubtitleProps = {
15
15
  };
16
16
  export type Props = {
17
17
  children?: React.ReactNode;
18
- position?: G.Responsive<"center" | "end" | "bottom" | "start">;
18
+ position?: G.Responsive<"center" | "end" | "bottom" | "start" | "full-screen">;
19
19
  size?: G.Responsive<string>;
20
20
  padding?: G.Responsive<number>;
21
21
  active?: boolean;
package/components/Modal/tests/Modal.stories.js CHANGED
@@ -41,15 +41,18 @@ const Demo = (props) => {
41
41
  </Dismissible>)}
42
42
  {children ||
43
43
  "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."}
44
- <Button onClick={() => { }}>Hey</Button>
44
+ <Button onClick={deactivate}>Close</Button>
45
45
  <TextField name="hey"/>
46
46
  </View>
47
47
  </Modal>
48
48
  </>);
49
49
  };
50
50
  export const position = () => (<Example>
51
+ <Example.Item title={["responsive position", "[s] full-screen", "[m] center", "[l] end"]}>
52
+ <Demo position={{ s: "full-screen", m: "center", l: "end" }}/>
53
+ </Example.Item>
51
54
  <Example.Item title="position: center">
52
- <Demo position="center" active/>
55
+ <Demo position="center"/>
53
56
  </Example.Item>
54
57
  <Example.Item title="position: bottom">
55
58
  <Demo position="bottom"/>
@@ -60,8 +63,8 @@ export const position = () => (<Example>
60
63
  <Example.Item title="position: end">
61
64
  <Demo position="end"/>
62
65
  </Example.Item>
63
- <Example.Item title={["responsive position", "[s] bottom", "[m] center", "[l] end"]}>
64
- <Demo position={{ s: "bottom", m: "center", l: "end" }}/>
66
+ <Example.Item title="position: full-screen">
67
+ <Demo position="full-screen"/>
65
68
  </Example.Item>
66
69
  </Example>);
67
70
  export const size = () => {
package/hooks/_private/useSingletonHotkeys.d.ts CHANGED
@@ -3,7 +3,7 @@ import React from "react";
3
3
  * Types
4
4
  */
5
5
  type Callback = (e: KeyboardEvent) => void;
6
- type PressedKeys = Record<string, KeyboardEvent>;
6
+ type PressedMap = Record<string, KeyboardEvent>;
7
7
  type Hotkeys = Record<string, Callback | null>;
8
8
  type HotkeyOptions = {
9
9
  preventDefault?: boolean;
@@ -12,20 +12,17 @@ type Context = {
12
12
  isPressed: (key: string) => boolean;
13
13
  addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
14
14
  };
15
+ type HotkeyData = {
16
+ callback: Callback;
17
+ ref: React.RefObject<HTMLElement | null>;
18
+ options: HotkeyOptions;
19
+ };
15
20
  export declare class HotkeyStore {
16
- hotkeyMap: Record<string, {
17
- data: Set<{
18
- callback: Callback;
19
- ref: React.RefObject<HTMLElement | null>;
20
- options: HotkeyOptions;
21
- }>;
22
- used: boolean;
23
- }>;
21
+ hotkeyMap: Record<string, Set<HotkeyData>>;
24
22
  getSize: () => number;
25
23
  bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
26
24
  unbindHotkeys: (hotkeys: Hotkeys) => void;
27
- handleKeyDown: (pressedMap: PressedKeys, e: KeyboardEvent) => void;
28
- handleKeyUp: (e: KeyboardEvent) => void;
25
+ handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
29
26
  }
30
27
  /**
31
28
  * Components / Hooks
package/hooks/_private/useSingletonHotkeys.js CHANGED
@@ -24,29 +24,6 @@ const getEventKey = (e) => {
24
24
  }
25
25
  return e.key.toLowerCase();
26
26
  };
27
- const getCombinations = (pressedKeys) => {
28
- const result = [];
29
- const hotkey = pressedKeys.join(COMBINATION_DELIMETER);
30
- const id = getHotkeyId(hotkey);
31
- const sortedKeys = id.split(COMBINATION_DELIMETER);
32
- const f = (prefix, items) => {
33
- items.forEach((item, i) => {
34
- const nextId = prefix ? `${prefix}+${item}` : item;
35
- result.push(nextId);
36
- f(nextId, items.slice(i + 1));
37
- });
38
- };
39
- f("", sortedKeys);
40
- return result;
41
- };
42
- const walkPressedCombinations = (pressed, cb) => {
43
- const pressedKeys = Object.keys(pressed);
44
- if (!pressedKeys.length)
45
- return;
46
- getCombinations(pressedKeys).forEach((pressedId) => {
47
- cb(pressedId);
48
- });
49
- };
50
27
  const walkHotkeys = (hotkeys, cb) => {
51
28
  Object.keys(hotkeys).forEach((key) => {
52
29
  key.split(",").forEach((hotkey) => {
@@ -66,9 +43,9 @@ export class HotkeyStore {
66
43
  if (!hotkeyData)
67
44
  return;
68
45
  if (!this.hotkeyMap[id]) {
69
- this.hotkeyMap[id] = { data: new Set(), used: false };
46
+ this.hotkeyMap[id] = new Set();
70
47
  }
71
- this.hotkeyMap[id].data.add({ callback: hotkeyData, ref, options });
48
+ this.hotkeyMap[id].add({ callback: hotkeyData, ref, options });
72
49
  });
73
50
  };
74
51
  this.unbindHotkeys = (hotkeys) => {
@@ -76,23 +53,34 @@ export class HotkeyStore {
76
53
  var _a, _b;
77
54
  if (!hotkeyCallback)
78
55
  return;
79
- (_a = this.hotkeyMap[id]) === null || _a === void 0 ? void 0 : _a.data.forEach((data) => {
56
+ (_a = this.hotkeyMap[id]) === null || _a === void 0 ? void 0 : _a.forEach((data) => {
80
57
  if (data.callback === hotkeyCallback) {
81
- this.hotkeyMap[id].data.delete(data);
58
+ this.hotkeyMap[id].delete(data);
82
59
  }
83
60
  });
84
- if (!((_b = this.hotkeyMap[id]) === null || _b === void 0 ? void 0 : _b.data.size)) {
61
+ if (!((_b = this.hotkeyMap[id]) === null || _b === void 0 ? void 0 : _b.size)) {
85
62
  delete this.hotkeyMap[id];
86
63
  }
87
64
  });
88
65
  };
89
66
  this.handleKeyDown = (pressedMap, e) => {
90
- walkPressedCombinations(pressedMap, (pressedId) => {
91
- const hotkeyData = this.hotkeyMap[pressedId];
92
- if (!hotkeyData || hotkeyData.used)
67
+ const pressedKeys = Object.keys(pressedMap);
68
+ if (!pressedKeys.length)
69
+ return;
70
+ const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
71
+ const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
72
+ const hotkeyData = this.hotkeyMap[pressedId];
73
+ /**
74
+ * Support for `mod` that represents both Mac and Win keyboards
75
+ */
76
+ const hotkeyControlModData = pressedFormattedKeys.includes("control") &&
77
+ this.hotkeyMap[pressedId.replace("control", "mod")];
78
+ const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[pressedId.replace("meta", "mod")];
79
+ [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
80
+ if (!hotkeyData)
93
81
  return;
94
- if (hotkeyData === null || hotkeyData === void 0 ? void 0 : hotkeyData.data.size) {
95
- hotkeyData.data.forEach((data) => {
82
+ if (hotkeyData === null || hotkeyData === void 0 ? void 0 : hotkeyData.size) {
83
+ hotkeyData.forEach((data) => {
96
84
  var _a;
97
85
  if (((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) &&
98
86
  !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
@@ -103,24 +91,10 @@ export class HotkeyStore {
103
91
  resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.preventDefault();
104
92
  }
105
93
  data.callback(resolvedEvent);
106
- /**
107
- * While meta is pressed - other keys keyup won't trigger and
108
- * we want to allow calling the same shortcut multiple times while meta was pressed
109
- */
110
- if (!(resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.metaKey))
111
- this.hotkeyMap[pressedId].used = true;
112
94
  });
113
95
  }
114
96
  });
115
97
  };
116
- this.handleKeyUp = (e) => {
117
- const id = getHotkeyId(e.key);
118
- walkHotkeys(this.hotkeyMap, (hotkeyId, data) => {
119
- const hotkeyIds = hotkeyId.split(COMBINATION_DELIMETER);
120
- if (hotkeyIds.includes(id))
121
- data.used = false;
122
- });
123
- };
124
98
  }
125
99
  }
126
100
  const globalHotkeyStore = new HotkeyStore();
@@ -141,18 +115,13 @@ export const SingletonHotkeysProvider = (props) => {
141
115
  if (!eventKey)
142
116
  return;
143
117
  pressedMap[eventKey] = e;
144
- if (eventKey === "meta" || eventKey === "control") {
145
- pressedMap.mod = e;
146
- }
147
118
  setTriggerCount(Object.keys(pressedMap).length);
148
119
  // Key up won't trigger for other keys while Meta is pressed so we need to cache them
149
120
  // and remove on Meta keyup
150
- if (eventKey === "meta" || e.metaKey) {
121
+ if (e.metaKey)
151
122
  modifiedKeys.push(...Object.keys(pressedMap));
152
- }
153
- if (pressedMap.Meta) {
123
+ if (pressedMap.Meta)
154
124
  modifiedKeys.push(eventKey);
155
- }
156
125
  }, [hooksCount]);
157
126
  const removePressedKey = React.useCallback((e) => {
158
127
  if (hooksCount === 0)
@@ -168,7 +137,6 @@ export const SingletonHotkeysProvider = (props) => {
168
137
  modifiedKeys.forEach((key) => {
169
138
  if (!pressedMap[key])
170
139
  return;
171
- globalHotkeyStore.handleKeyUp(pressedMap[key]);
172
140
  delete pressedMap[key];
173
141
  });
174
142
  modifiedKeys = [];
@@ -200,7 +168,6 @@ export const SingletonHotkeysProvider = (props) => {
200
168
  if (!e.key)
201
169
  return;
202
170
  removePressedKey(e);
203
- globalHotkeyStore.handleKeyUp(e);
204
171
  }, [removePressedKey]);
205
172
  React.useEffect(() => {
206
173
  window.addEventListener("keydown", handleWindowKeyDown);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reshaped",
3
3
  "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
4
- "version": "2.11.9",
4
+ "version": "2.11.10",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",