@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/es/a11y/FocusScope/docs/FocusScope__default.docs.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FocusScope, { useFocusManager } from '../FocusScope';
+import style from '../../../beta/FocusRing/FocusRing.module.css';
+export default class FocusScope__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      isSub: false
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(e, issub) {
+    this.setState({
+      isSub: issub,
+      isOpen: e
+    });
+  }
+
+  render() {
+    const {
+      isOpen,
+      isSub
+    } = this.state;
+    console.log(this.state);
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+      className: style.primary,
+      type: "button",
+      onClick: this.handleSubmit.bind(this, true, false)
+    }, "Focusscope"), isOpen ? /*#__PURE__*/React.createElement("div", {
+      className: style.freezeLayer
+    }, /*#__PURE__*/React.createElement(FocusScope, {
+      contain: true,
+      autoFocus: true,
+      restoreFocus: true
+    }, /*#__PURE__*/React.createElement(FormContainer, {
+      onSubmit: this.handleSubmit.bind(this, true, true),
+      onCancel: this.handleSubmit.bind(this, false, false)
+    }), isSub ? /*#__PURE__*/React.createElement(FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `${style.container} ${isSub && style.box1} ${isSub && style.manage}`
+    }, /*#__PURE__*/React.createElement(ToolbarButton, null, "Cut"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Copy"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Paste"), /*#__PURE__*/React.createElement(ToolbarButton, {
+      onClick: this.handleSubmit.bind(this, true, false)
+    }, "Close"))) : null)) : null);
+  }
+
+}
+
+function ToolbarButton(props) {
+  const focusManager = useFocusManager();
+
+  const onKeyDown = e => {
+    switch (e.key) {
+      case 'ArrowRight':
+        focusManager.focusNext({
+          wrap: true
+        });
+        break;
+
+      case 'ArrowLeft':
+        focusManager.focusPrevious({
+          wrap: true
+        });
+        break;
+
+      default:
+    }
+  };
+
+  const {
+    onClick,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("button", {
+    className: style.primary,
+    type: "button",
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, children);
+}
+
+ToolbarButton.propTypes = {
+  children: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};
+
+function FormContainer(props) {
+  const {
+    onSubmit,
+    onCancel
+  } = props;
+  const options = ['apple', 'MSoffice'];
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${style.box1}`
+  }, /*#__PURE__*/React.createElement("button", {
+    className: style.secondary,
+    type: "button",
+    onClick: onCancel
+  }, "close"), /*#__PURE__*/React.createElement("form", {
+    className: style.formContainer
+  }, /*#__PURE__*/React.createElement("h3", null, "name"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: "Input A",
+    className: `${style.input} ${style.inpFocus}`,
+    name: "name"
+  }), /*#__PURE__*/React.createElement("h3", null, "contact"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: "Input A",
+    className: `${style.input} ${style.inpFocus}`,
+    name: "contact"
+  }), /*#__PURE__*/React.createElement("h3", null, "select"), /*#__PURE__*/React.createElement("select", {
+    options: options,
+    name: "select",
+    className: `${style.input} ${style.inpFocus}`
+  }, options.map((item, i) => /*#__PURE__*/React.createElement("option", {
+    key: `item-${i}`
+  }, item)))), /*#__PURE__*/React.createElement("button", {
+    className: style.primary,
+    type: "submit",
+    onClick: onSubmit
+  }, "Submit"), /*#__PURE__*/React.createElement("button", {
+    className: style.secondary,
+    type: "button",
+    onClick: onCancel
+  }, "Cancel"));
+}
+
+FormContainer.propTypes = {
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func
+};
+FocusScope__default.docs = {
+  componentGroup: 'Atom'
+};

package/es/beta/FocusRing/FocusRing.js

@@ -0,0 +1,281 @@
+import React, { useState, useRef, useEffect } from 'react';
+const eventFrom = 'keyboard' | 'pointer' | 'virtual';
+const eventType = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent; //const eventHandler = (evType=eventFrom, e=eventType) => {return eventFrom}
+
+let currentEventType = null;
+let changeHandlers = new Set();
+let hasSetupGlobalListeners = false;
+let hasEventBeforeFocus = false; // let onFocusWithin= props.onFocusWithin?props.onFocusWithin:(e)=>{return void};
+// let onBlurWithin = props.onBlurWithin?props.onBlurWithin:(e) =>void
+// eventHandler that is called when the the focus within state changes.
+// onFocusWithinChange(isFocusWithin)=> void
+// Only Tab or Esc keys will make focus visible on text input elements
+
+const FOCUS_VISIBLE_INPUT_KEYS = {
+  Tab: true,
+  Escape: false
+};
+
+function triggerChangeHandlers() {
+  let evType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : eventFrom;
+  let e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : eventType;
+
+  for (let handler of changeHandlers) {
+    handler(evType, e);
+  }
+} //Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
+
+
+function isValidKey(e) {
+  return !(e.metaKey || e.altKey || e.ctrlKey);
+}
+
+function handleKeyboardEvent(e) {
+  hasEventBeforeFocus = true;
+
+  if (isValidKey(e)) {
+    currentEventType = 'keyboard';
+    triggerChangeHandlers('keyboard', e);
+  }
+}
+
+function handlePointerEvent(e) {
+  currentEventType = 'pointer';
+
+  if (e.type === 'mousedown' || e.type === 'pointerdown') {
+    hasEventBeforeFocus = true;
+    triggerChangeHandlers('pointer', e);
+  }
+}
+
+function handleFocusEvent(e) {
+  // Firefox fires two extra focus events when the user first clicks into an iframe:
+  // first on the window, then on the document. We ignore these events so they don't
+  // cause keyboard focus rings to appear.
+  if (e.target === window || e.target === document) {
+    return;
+  } // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard evType.
+  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
+
+
+  if (!hasEventBeforeFocus) {
+    currentEventType = 'keyboard';
+    triggerChangeHandlers('keyboard', e);
+  }
+
+  hasEventBeforeFocus = false;
+}
+
+function handleWindowBlur() {
+  // When the window is blurred, reset state. This is necessary when tabbing out of the window,
+  // for example, since a subsequent focus event won't be fired.
+  hasEventBeforeFocus = false;
+}
+
+function setupGlobalFocusEvents() {
+  if (typeof window === 'undefined' || hasSetupGlobalListeners) {
+    return;
+  } // Programmatic focus() calls shouldn't affect the current input evType.
+  // However, we need to detect other cases when a focus event occurs without
+  // a preceding user event (e.g. screen reader focus). Overriding the focus
+  // method on HTMLElement.prototype is a bit hacky, but works.
+
+
+  let focus = HTMLElement.prototype.focus;
+
+  HTMLElement.prototype.focus = function () {
+    hasEventBeforeFocus = true;
+    focus.apply(this, arguments);
+  };
+
+  document.addEventListener('keydown', handleKeyboardEvent, true);
+  document.addEventListener('keyup', handleKeyboardEvent, true); // Register focus events on the window so they are sure to happen
+  // before React's event listeners (registered on the document).
+
+  window.addEventListener('focus', handleFocusEvent, true);
+  window.addEventListener('blur', handleWindowBlur, false);
+
+  if (typeof PointerEvent !== 'undefined') {
+    document.addEventListener('pointerdown', handlePointerEvent, true);
+    document.addEventListener('pointermove', handlePointerEvent, true);
+    document.addEventListener('pointerup', handlePointerEvent, true);
+  } else {
+    document.addEventListener('mousedown', handlePointerEvent, true);
+    document.addEventListener('mousemove', handlePointerEvent, true);
+    document.addEventListener('mouseup', handlePointerEvent, true);
+  }
+
+  hasSetupGlobalListeners = true;
+}
+
+function isFocusVisible() {
+  return currentEventType !== 'pointer';
+}
+
+function useFocusVisible(props) {
+  setupGlobalFocusEvents();
+  let [isFocusVisibleState, setFocusVisible] = useState(isFocusVisible());
+  useEffect(() => {
+    let handler = (evType, e) => {
+      // If this is a text input component, don't update the focus visible style when
+      // typing except for when the Tab and Escape keys are pressed.
+      if (evType === 'keyboard' && e instanceof KeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]) {
+        return;
+      }
+
+      setFocusVisible(isFocusVisible());
+    };
+
+    changeHandlers.add(handler);
+    return () => {
+      changeHandlers.delete(handler);
+    };
+  });
+  return {
+    isFocusVisible: isFocusVisibleState
+  };
+} //If true, keyboard focus is visible.
+
+
+function useFocusWithin(props) {
+  let state = useRef({
+    isFocusWithin: false
+  }).current;
+
+  if (props.isDisabled) {
+    return {
+      focusWithinProps: {}
+    };
+  }
+
+  let onFocus = e => {
+    if (!state.isFocusWithin) {
+      if (props.onFocusWithin) {
+        props.onFocusWithin(e);
+      }
+
+      if (props.onFocusWithinChange) {
+        props.onFocusWithinChange(true);
+      }
+
+      state.isFocusWithin = true;
+    }
+  };
+
+  let onBlur = e => {
+    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
+    // when moving focus inside the element. Only trigger if the currentTarget doesn't
+    // include the relatedTarget (where focus is moving).
+    if (state.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
+      if (props.onBlurWithin) {
+        props.onBlurWithin(e);
+      }
+
+      if (props.onFocusWithinChange) {
+        props.onFocusWithinChange(false);
+      }
+
+      state.isFocusWithin = false;
+    }
+  };
+
+  return {
+    focusWithinProps: {
+      onFocus: onFocus,
+      onBlur: onBlur
+    }
+  };
+}
+
+function useFocus(props) {
+  if (props.isDisabled) {
+    return {
+      focusProps: {}
+    };
+  }
+
+  let onFocus, onBlur;
+
+  if (props.onFocus || props.onFocusChange) {
+    onFocus = e => {
+      if (e.target === e.currentTarget) {
+        if (props.onFocus) {
+          props.onFocus(e);
+        }
+
+        if (props.onFocusChange) {
+          props.onFocusChange(true);
+        }
+      }
+    };
+  }
+
+  if (props.onBlur || props.onFocusChange) {
+    onBlur = e => {
+      if (e.target === e.currentTarget) {
+        if (props.onBlur) {
+          props.onBlur(e);
+        }
+
+        if (props.onFocusChange) {
+          props.onFocusChange(false);
+        }
+      }
+    };
+  }
+
+  return {
+    focusProps: {
+      onFocus,
+      onBlur
+    }
+  };
+}
+
+function useFocusRing(props) {
+  let {
+    within
+  } = props;
+  let [isFocused, setFocused] = useState(false);
+  let [isFocusWithin, setFocusWithin] = useState(false);
+  let {
+    isFocusVisible
+  } = useFocusVisible(props);
+  let {
+    focusProps
+  } = useFocus({
+    isDisabled: within,
+    onFocusChange: setFocused
+  });
+  let {
+    focusWithinProps
+  } = useFocusWithin({
+    isDisabled: !within,
+    onFocusWithinChange: setFocusWithin
+  });
+  return {
+    isFocused: within ? isFocusWithin : isFocused,
+    isFocusVisible: (within ? isFocusWithin : isFocused) && isFocusVisible,
+    focusProps: within ? focusWithinProps : focusProps
+  };
+}
+
+export default function FocusRing(props) {
+  let {
+    children,
+    focusClass,
+    focusRingClass
+  } = props;
+  let {
+    isFocused,
+    isFocusVisible,
+    focusProps
+  } = useFocusRing(props);
+  let child = React.Children.only(children);
+  return /*#__PURE__*/React.cloneElement(child, { ...focusProps,
+    customClass: isFocusVisible ? focusRingClass : isFocused ? focusClass : ''
+  });
+}
+FocusRing.docs = {
+  componentGroup: 'Atom'
+};

package/es/beta/FocusRing/FocusRing.module.css

@@ -0,0 +1,127 @@
+.input{
+  width:100%;
+  border: 1px;
+  border-bottom: 1px solid #ddd;
+  outline: 0
+}
+.badFocus {
+  display: inline-block;
+  margin-top: 10px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+  margin-right: 5px;
+  margin-bottom: 30px;
+  padding: 2px;
+  margin: 10px;
+}
+:focus{
+  outline: 0;
+}
+.goodFocus {
+  display: inline-block;
+  border-radius: 2px;
+  padding: 2px;
+  box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
+}
+.inpFocus{
+  padding: 5px;
+  border-radius: 2px;
+  margin: 10px;
+  width: auto;
+}
+.mouseFocus,.inpFocus:focus{
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+}
+.tabFocus,.tabFocus:focus{
+  box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
+}
+.freezeLayer{
+  position: fixed;
+  left:0;
+  right: 0;
+  top:0;
+  bottom: 0;
+  background-color: rgba(20,20,20,.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.element{
+  margin:1rem 0 1rem .5rem;
+}
+.container{
+  background-color: #fff;
+  border-radius: 10px;
+  min-width: 400px;
+  padding: 20px;
+  transition: .3s ease-in-out;
+  position: absolute;
+}
+.formContainer{
+  display: flex;
+  flex-direction: column;
+}
+label{
+  font-weight: 400;
+  font-size: 20px;
+}
+.sOpt:focus{
+  background-color: red;
+}
+.button {
+  -webkit-appearance: none;
+  appearance: none;
+  background: green;
+  border: none;
+  color: white;
+  font-size: 14px;
+  padding: 4px 8px;
+}
+
+.focus-ring {
+  outline: 2px solid dodgerblue;
+  outline-offset: 2px;
+}
+.box{
+  display: flex;
+  flex-direction: column;
+}
+.box1{
+  transform: scale(1);
+}
+.manage{
+  right: 0;
+}
+.primary{
+    background: #00aefe;
+    color: #fff;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 13px;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #00aefe;
+    margin:10px
+  }
+  .secondary{
+    background: #fff;
+    color: #8c8c8c;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 13px;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #8c8c8c
+  }
+  
+  .primary:focus{
+    box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
+  }
+  
+  .secondary:focus{
+    box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+  }

package/es/beta/FocusRing/docs/FocusRing__default.docs.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Button from '../../../Button/Button';
+import TextBox from '../../../TextBox/TextBox';
+import FocusRing from '../FocusRing';
+import style from '../FocusRing.module.css';
+import { Box } from '../../../Layout';
+export default class FocusRing__default extends React.Component {
+  render() {
+    let styles = {
+      margin: '30px',
+      width: '50%',
+      display: 'block'
+    };
+    return /*#__PURE__*/React.createElement(FocusRing, {
+      focusClass: style.mouseFocus,
+      focusRingClass: style.tabFocus,
+      within: true
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(FocusRing, {
+      focusClass: style.mouseFocus,
+      focusRingClass: style.tabFocus
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      defaultValue: "Input a",
+      id: "1"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(FocusRing, {
+      focusClass: style.mouseFocus,
+      focusRingClass: style.tabFocus
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      defaultValue: "Input b",
+      id: "2"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      defaultValue: "Input c",
+      id: "3"
+    }))));
+  }
+
+}
+FocusRing__default.docs = {
+  componentGroup: 'Atom'
+};