@zohodesk/components 1.0.0-alpha-245 → 1.0.0-alpha-248

package/es/beta/FocusRing/FocusRing.js

@@ -1,281 +0,0 @@
-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

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

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

@@ -1,48 +0,0 @@
-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'
-};